tweak the Switch default widths and docs

danilo-leal · Oct 3, 2023 · ecb0a37 · ecb0a37
1 parent 1685e96
commit ecb0a37
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 112 deletions.
diff --git a/docs/data/joy/components/switch/ExampleMaterialSwitch.js b/docs/data/joy/components/switch/ExampleMaterialSwitch.js
diff --git a/docs/data/joy/components/switch/ExampleMaterialSwitch.tsx b/docs/data/joy/components/switch/ExampleMaterialSwitch.tsx
diff --git a/docs/data/joy/components/switch/switch.md b/docs/data/joy/components/switch/switch.md
@@ -92,15 +92,9 @@ You can use those to customize the component on both the `sx` prop and the theme
 
 ## Common examples
 
-### Material Design
-
-You can also find the Material Design switch design, out of the box, in [Material UI's documentation](/material-ui/react-switch/).
-
-{{"demo": "ExampleMaterialSwitch.js"}}
-
 ### Fluent UI
 
-Here's how you'd customize Joy UI's switch to make it look like [Microsoft's Fluent UI](https://developer.microsoft.com/en-us/fluentui#/controls/web/toggle):
+Here's how you'd customize Joy UI's Switch to make it look like [Microsoft's Fluent UI](https://developer.microsoft.com/en-us/fluentui#/controls/web/toggle):
 
 - Unchecked state: `outlined` variant and `neutral` color.
 - Checked state: `solid` variant and `primary` color.

diff --git a/packages/mui-joy/src/Switch/Switch.tsx b/packages/mui-joy/src/Switch/Switch.tsx
@@ -65,23 +65,23 @@ const SwitchRoot = styled('div', {
     '--Switch-thumbShadow':
       ownerState.variant === 'soft' ? 'none' : '0 0 0 1px var(--Switch-trackBackground)', // create border-like if the thumb is bigger than the track
     ...(ownerState.size === 'sm' && {
-      '--Switch-trackWidth': '32px',
+      '--Switch-trackWidth': '26px',
       '--Switch-trackHeight': '16px',
-      '--Switch-thumbSize': '8px',
+      '--Switch-thumbSize': '10px',
       fontSize: theme.vars.fontSize.sm,
       gap: 'var(--Switch-gap, 6px)',
     }),
     ...(ownerState.size === 'md' && {
-      '--Switch-trackWidth': '40px',
+      '--Switch-trackWidth': '32px',
       '--Switch-trackHeight': '20px',
-      '--Switch-thumbSize': '12px',
+      '--Switch-thumbSize': '14px',
       fontSize: theme.vars.fontSize.md,
       gap: 'var(--Switch-gap, 8px)',
     }),
     ...(ownerState.size === 'lg' && {
-      '--Switch-trackWidth': '48px',
+      '--Switch-trackWidth': '40px',
       '--Switch-trackHeight': '24px',
-      '--Switch-thumbSize': '16px',
+      '--Switch-thumbSize': '18px',
       gap: 'var(--Switch-gap, 12px)',
     }),
     '--unstable_paddingBlock': `max((var(--Switch-trackHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Switch-thumbSize)) / 2, 0px)`,