[base-ui] Improve recommended usage guide (mui#38570)

dhaub-exelixis · Sep 10, 2023 · a1ffff3 · a1ffff3
1 parent 8087943
commit a1ffff3
Show file tree

Hide file tree

Showing 19 changed files with 88 additions and 84 deletions.
diff --git a/docs/data/base/getting-started/customization/DisabledDefaultClasses.js b/docs/data/base/getting-started/customization/DisabledDefaultClasses.js
@@ -67,24 +67,24 @@ const Input = styled('input')`
   margin: 0;
 `;
 
-export default function DisabledDefaultClasses() {
-  const slots = { root: Root, thumb: Thumb, input: Input };
-  const switch1A11yProps = {
-    slotProps: { input: { 'aria-label': 'Switch with built-in classes' } },
-  };
-  const switch2A11yProps = {
-    slotProps: { input: { 'aria-label': 'Switch without built-in classes' } },
-  };
+const slots = { root: Root, thumb: Thumb, input: Input };
 
+export default function DisabledDefaultClasses() {
   return (
     <div>
-      {/* The built-in classes (MuiSwitch-root, Mui-checked, etc.) are enabled by default, 
+      {/* The built-in classes (MuiSwitch-root, Mui-checked, etc.) are enabled by default,
            even though they are not used */}
-      <Switch slots={slots} {...switch1A11yProps} />
+      <Switch
+        slots={slots}
+        slotProps={{ input: { 'aria-label': 'Switch with built-in classes' } }}
+      />
       <ClassNameConfigurator disableDefaultClasses>
         {/* ClassNameConfigurator removes the built-in classes,
              leaving only the one generated by Emotion */}
-        <Switch slots={slots} {...switch2A11yProps} />
+        <Switch
+          slots={slots}
+          slotProps={{ input: { 'aria-label': 'Switch without built-in classes' } }}
+        />
       </ClassNameConfigurator>
     </div>
   );

diff --git a/docs/data/base/getting-started/customization/DisabledDefaultClasses.tsx b/docs/data/base/getting-started/customization/DisabledDefaultClasses.tsx
@@ -67,25 +67,24 @@ const Input = styled('input')`
   margin: 0;
 `;
 
-export default function DisabledDefaultClasses() {
-  const slots = { root: Root, thumb: Thumb, input: Input };
-  const switch1A11yProps = {
-    slotProps: { input: { 'aria-label': 'Switch with built-in classes' } },
-  };
-  const switch2A11yProps = {
-    slotProps: { input: { 'aria-label': 'Switch without built-in classes' } },
-  };
+const slots = { root: Root, thumb: Thumb, input: Input };
 
+export default function DisabledDefaultClasses() {
   return (
     <div>
-      {/* The built-in classes (MuiSwitch-root, Mui-checked, etc.) are enabled by default, 
+      {/* The built-in classes (MuiSwitch-root, Mui-checked, etc.) are enabled by default,
           even though they are not used */}
-      <Switch slots={slots} {...switch1A11yProps} />
-
+      <Switch
+        slots={slots}
+        slotProps={{ input: { 'aria-label': 'Switch with built-in classes' } }}
+      />
       <ClassNameConfigurator disableDefaultClasses>
         {/* ClassNameConfigurator removes the built-in classes,
             leaving only the one generated by Emotion */}
-        <Switch slots={slots} {...switch2A11yProps} />
+        <Switch
+          slots={slots}
+          slotProps={{ input: { 'aria-label': 'Switch without built-in classes' } }}
+        />
       </ClassNameConfigurator>
     </div>
   );

diff --git a/docs/data/base/getting-started/customization/DisabledDefaultClasses.tsx.preview b/docs/data/base/getting-started/customization/DisabledDefaultClasses.tsx.preview
@@ -1,9 +1,14 @@
-{/* The built-in classes (MuiSwitch-root, Mui-checked, etc.) are enabled by default, 
+{/* The built-in classes (MuiSwitch-root, Mui-checked, etc.) are enabled by default,
     even though they are not used */}
-<Switch slots={slots} {...switch1A11yProps} />
-
+<Switch
+  slots={slots}
+  slotProps={{ input: { 'aria-label': 'Switch with built-in classes' } }}
+/>
 <ClassNameConfigurator disableDefaultClasses>
   {/* ClassNameConfigurator removes the built-in classes,
       leaving only the one generated by Emotion */}
-  <Switch slots={slots} {...switch2A11yProps} />
+  <Switch
+    slots={slots}
+    slotProps={{ input: { 'aria-label': 'Switch without built-in classes' } }}
+  />
 </ClassNameConfigurator>
diff --git a/docs/data/base/getting-started/customization/SlotPropsCallback.js b/docs/data/base/getting-started/customization/SlotPropsCallback.js
@@ -18,12 +18,12 @@ const css = `
     background: #007FFF;
   }
 
-  .my-switch.focused .thumb {
+  .my-switch.focused .MuiSwitch-thumb {
     background-color: rgba(255, 255, 255, 1);
     box-shadow: 0 0 1px 8px rgba(0, 0, 0, 0.25);
   }
 
-  .my-switch .thumb {
+  .my-switch .MuiSwitch-thumb {
     display: block;
     width: 14px;
     height: 14px;
@@ -35,13 +35,13 @@ const css = `
     transition: all 200ms ease;
   }
 
-  .my-switch.on .thumb {
+  .my-switch.on .MuiSwitch-thumb {
     left: 14px;
     top: 3px;
     background-color: #FFF;
   }
 
-  .my-switch .input {
+  .my-switch .MuiSwitch-input {
     cursor: inherit;
     position: absolute;
     width: 100%;
@@ -60,14 +60,11 @@ export default function SlotPropsCallback() {
         ownerState.focusVisible ? 'focused' : ''
       }`,
     }),
-    thumb: { className: 'thumb' },
-    input: { className: 'input' },
   };
 
   return (
     <div>
       <style type="text/css">{css}</style>
-
       <Switch slotProps={slotProps} />
     </div>
   );

diff --git a/docs/data/base/getting-started/customization/SlotPropsCallback.tsx b/docs/data/base/getting-started/customization/SlotPropsCallback.tsx
@@ -18,12 +18,12 @@ const css = `
     background: #007FFF;
   }
 
-  .my-switch.focused .thumb {
+  .my-switch.focused .MuiSwitch-thumb {
     background-color: rgba(255, 255, 255, 1);
     box-shadow: 0 0 1px 8px rgba(0, 0, 0, 0.25);
   }
 
-  .my-switch .thumb {
+  .my-switch .MuiSwitch-thumb {
     display: block;
     width: 14px;
     height: 14px;
@@ -35,13 +35,13 @@ const css = `
     transition: all 200ms ease;
   }
 
-  .my-switch.on .thumb {
+  .my-switch.on .MuiSwitch-thumb {
     left: 14px;
     top: 3px;
     background-color: #FFF;
   }
 
-  .my-switch .input {
+  .my-switch .MuiSwitch-input {
     cursor: inherit;
     position: absolute;
     width: 100%;
@@ -60,14 +60,11 @@ export default function SlotPropsCallback() {
         ownerState.focusVisible ? 'focused' : ''
       }`,
     }),
-    thumb: { className: 'thumb' },
-    input: { className: 'input' },
   };
 
   return (
     <div>
       <style type="text/css">{css}</style>
-
       <Switch slotProps={slotProps} />
     </div>
   );

diff --git a/docs/data/base/getting-started/customization/SlotPropsCallback.tsx.preview b/docs/data/base/getting-started/customization/SlotPropsCallback.tsx.preview
@@ -1,3 +1,2 @@
 <style type="text/css">{css}</style>
-
 <Switch slotProps={slotProps} />
diff --git a/docs/data/base/getting-started/customization/StylingCustomCss.js b/docs/data/base/getting-started/customization/StylingCustomCss.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Switch, switchClasses } from '@mui/base/Switch';
+import { Switch as SwitchUnstyled, switchClasses } from '@mui/base/Switch';
 
 const css = `
   .my-switch {
@@ -52,7 +52,7 @@ export default function StylingCustomCss() {
   return (
     <div>
       <style type="text/css">{css}</style>
-      <Switch className="my-switch" />
+      <SwitchUnstyled className="my-switch" />
     </div>
   );
 }
diff --git a/docs/data/base/getting-started/customization/StylingCustomCss.tsx b/docs/data/base/getting-started/customization/StylingCustomCss.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Switch, switchClasses } from '@mui/base/Switch';
+import { Switch as SwitchUnstyled, switchClasses } from '@mui/base/Switch';
 
 const css = `
   .my-switch {
@@ -52,7 +52,7 @@ export default function StylingCustomCss() {
   return (
     <div>
       <style type="text/css">{css}</style>
-      <Switch className="my-switch" />
+      <SwitchUnstyled className="my-switch" />
     </div>
   );
 }
diff --git a/docs/data/base/getting-started/customization/StylingCustomCss.tsx.preview b/docs/data/base/getting-started/customization/StylingCustomCss.tsx.preview
@@ -1,2 +1,2 @@
 <style type="text/css">{css}</style>
-<Switch className="my-switch" />
+<SwitchUnstyled className="my-switch" />
diff --git a/docs/data/base/getting-started/customization/StylingHooks.js b/docs/data/base/getting-started/customization/StylingHooks.js
@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { useSwitch } from '@mui/base/useSwitch';
 import { styled } from '@mui/system';
 
-const BasicSwitchRoot = styled('span')`
+const SwitchRoot = styled('span')`
   font-size: 0;
   position: relative;
   display: inline-block;
@@ -24,7 +24,7 @@ const BasicSwitchRoot = styled('span')`
   }
 `;
 
-const BasicSwitchInput = styled('input')`
+const SwitchInput = styled('input')`
   cursor: inherit;
   position: absolute;
   width: 100%;
@@ -36,7 +36,7 @@ const BasicSwitchInput = styled('input')`
   margin: 0;
 `;
 
-const BasicSwitchThumb = styled('span')`
+const SwitchThumb = styled('span')`
   display: block;
   width: 14px;
   height: 14px;
@@ -59,7 +59,7 @@ const BasicSwitchThumb = styled('span')`
   }
 `;
 
-function BasicSwitch(props) {
+function Switch(props) {
   const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
 
   const stateClasses = {
@@ -69,13 +69,13 @@ function BasicSwitch(props) {
   };
 
   return (
-    <BasicSwitchRoot className={clsx(stateClasses)}>
-      <BasicSwitchThumb className={clsx(stateClasses)} />
-      <BasicSwitchInput {...getInputProps()} aria-label="Demo switch" />
-    </BasicSwitchRoot>
+    <SwitchRoot className={clsx(stateClasses)}>
+      <SwitchThumb className={clsx(stateClasses)} />
+      <SwitchInput {...getInputProps()} aria-label={props['aria-label']} />
+    </SwitchRoot>
   );
 }
 
 export default function StylingHooks() {
-  return <BasicSwitch />;
+  return <Switch aria-label="Demo switch" />;
 }
diff --git a/docs/data/base/getting-started/customization/StylingHooks.tsx b/docs/data/base/getting-started/customization/StylingHooks.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { useSwitch, UseSwitchParameters } from '@mui/base/useSwitch';
 import { styled } from '@mui/system';
 
-const BasicSwitchRoot = styled('span')`
+const SwitchRoot = styled('span')`
   font-size: 0;
   position: relative;
   display: inline-block;
@@ -24,7 +24,7 @@ const BasicSwitchRoot = styled('span')`
   }
 `;
 
-const BasicSwitchInput = styled('input')`
+const SwitchInput = styled('input')`
   cursor: inherit;
   position: absolute;
   width: 100%;
@@ -36,7 +36,7 @@ const BasicSwitchInput = styled('input')`
   margin: 0;
 `;
 
-const BasicSwitchThumb = styled('span')`
+const SwitchThumb = styled('span')`
   display: block;
   width: 14px;
   height: 14px;
@@ -59,7 +59,7 @@ const BasicSwitchThumb = styled('span')`
   }
 `;
 
-function BasicSwitch(props: UseSwitchParameters) {
+function Switch(props: UseSwitchParameters & { 'aria-label'?: string }) {
   const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
 
   const stateClasses = {
@@ -69,13 +69,13 @@ function BasicSwitch(props: UseSwitchParameters) {
   };
 
   return (
-    <BasicSwitchRoot className={clsx(stateClasses)}>
-      <BasicSwitchThumb className={clsx(stateClasses)} />
-      <BasicSwitchInput {...getInputProps()} aria-label="Demo switch" />
-    </BasicSwitchRoot>
+    <SwitchRoot className={clsx(stateClasses)}>
+      <SwitchThumb className={clsx(stateClasses)} />
+      <SwitchInput {...getInputProps()} aria-label={props['aria-label']} />
+    </SwitchRoot>
   );
 }
 
 export default function StylingHooks() {
-  return <BasicSwitch />;
+  return <Switch aria-label="Demo switch" />;
 }
diff --git a/docs/data/base/getting-started/customization/StylingHooks.tsx.preview b/docs/data/base/getting-started/customization/StylingHooks.tsx.preview
@@ -1 +1 @@
-<BasicSwitch />
+<Switch aria-label="Demo switch" />
diff --git a/docs/data/base/getting-started/customization/StylingSlots.js b/docs/data/base/getting-started/customization/StylingSlots.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/system';
 import { Switch, switchClasses } from '@mui/base/Switch';
 
-const Root = styled('span')`
+const SwitchRoot = styled('span')`
   font-size: 0;
   position: relative;
   display: inline-block;
@@ -23,7 +23,7 @@ const Root = styled('span')`
   }
 `;
 
-const Thumb = styled('span')`
+const SwitchThumb = styled('span')`
   display: block;
   width: 14px;
   height: 14px;
@@ -46,7 +46,7 @@ const Thumb = styled('span')`
   }
 `;
 
-const Input = styled('input')`
+const SwitchInput = styled('input')`
   cursor: inherit;
   position: absolute;
   width: 100%;
@@ -59,5 +59,7 @@ const Input = styled('input')`
 `;
 
 export default function StylingSlots() {
-  return <Switch slots={{ root: Root, thumb: Thumb, input: Input }} />;
+  return (
+    <Switch slots={{ root: SwitchRoot, thumb: SwitchThumb, input: SwitchInput }} />
+  );
 }
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1,2 @@
		<style type="text/css">{css}</style>

		<Switch slotProps={slotProps} />
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<BasicSwitch />
		<Switch aria-label="Demo switch" />