From ecb0a37aaa58edd85512a89cd35ad488487f9bf1 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Mon, 2 Oct 2023 23:54:30 -0300 Subject: [PATCH 1/2] tweak the Switch default widths and docs --- .../switch/ExampleMaterialSwitch.js | 48 ----------------- .../switch/ExampleMaterialSwitch.tsx | 51 ------------------- docs/data/joy/components/switch/switch.md | 8 +-- packages/mui-joy/src/Switch/Switch.tsx | 12 ++--- 4 files changed, 7 insertions(+), 112 deletions(-) delete mode 100644 docs/data/joy/components/switch/ExampleMaterialSwitch.js delete mode 100644 docs/data/joy/components/switch/ExampleMaterialSwitch.tsx diff --git a/docs/data/joy/components/switch/ExampleMaterialSwitch.js b/docs/data/joy/components/switch/ExampleMaterialSwitch.js deleted file mode 100644 index aa1773f03e7db6..00000000000000 --- a/docs/data/joy/components/switch/ExampleMaterialSwitch.js +++ /dev/null @@ -1,48 +0,0 @@ -import * as React from 'react'; -import Switch, { switchClasses } from '@mui/joy/Switch'; - -export default function ExampleMaterialSwitch() { - const [checked, setChecked] = React.useState(false); - return ( - setChecked(event.target.checked)} - sx={(theme) => ({ - display: 'inherit', - '--Switch-thumbShadow': - 'rgb(0 0 0 / 20%) 0px 2px 1px -1px, rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 1px 3px 0px', - '--Switch-thumbSize': '20px', - '--Switch-trackWidth': '34px', - '--Switch-trackHeight': '14px', - '--Switch-trackBackground': 'rgb(0, 0, 0, 0.38)', - '&:hover': { - '--Switch-trackBackground': 'rgb(0, 0, 0, 0.38)', - }, - [`&.${switchClasses.checked}`]: { - '--Switch-thumbBackground': 'rgb(25, 118, 210)', - '--Switch-trackBackground': 'rgba(25, 118, 210, 0.5)', - '&:hover': { - '--Switch-trackBackground': 'rgba(25, 118, 210, 0.5)', - }, - }, - [`&.${switchClasses.disabled}`]: { - '--Switch-trackBackground': 'rgb(0, 0, 0, 0.12)', - '--Switch-thumbColor': 'rgb(245, 245, 245)', - }, - [`&.${switchClasses.checked}.${switchClasses.disabled}`]: { - '--Switch-trackBackground': 'rgba(25, 118, 210, 0.12)', - '--Switch-thumbColor': 'rgb(167, 202, 237)', - }, - [theme.getColorSchemeSelector('dark')]: { - '--Switch-thumbBackground': '#fff', - '--Switch-trackBackground': 'rgba(255, 255, 255, 0.3)', - [`&.${switchClasses.checked}`]: { - '--Switch-thumbBackground': 'rgb(144, 202, 249)', - '--Switch-trackBackground': 'rgba(144, 202, 249, 0.5)', - }, - }, - })} - /> - ); -} diff --git a/docs/data/joy/components/switch/ExampleMaterialSwitch.tsx b/docs/data/joy/components/switch/ExampleMaterialSwitch.tsx deleted file mode 100644 index 3feb62e218f0ad..00000000000000 --- a/docs/data/joy/components/switch/ExampleMaterialSwitch.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import * as React from 'react'; -import Switch, { switchClasses } from '@mui/joy/Switch'; -import { Theme } from '@mui/joy'; - -export default function ExampleMaterialSwitch() { - const [checked, setChecked] = React.useState(false); - return ( - ) => - setChecked(event.target.checked) - } - sx={(theme: Theme) => ({ - display: 'inherit', - '--Switch-thumbShadow': - 'rgb(0 0 0 / 20%) 0px 2px 1px -1px, rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 1px 3px 0px', - '--Switch-thumbSize': '20px', - '--Switch-trackWidth': '34px', - '--Switch-trackHeight': '14px', - '--Switch-trackBackground': 'rgb(0, 0, 0, 0.38)', - '&:hover': { - '--Switch-trackBackground': 'rgb(0, 0, 0, 0.38)', - }, - [`&.${switchClasses.checked}`]: { - '--Switch-thumbBackground': 'rgb(25, 118, 210)', - '--Switch-trackBackground': 'rgba(25, 118, 210, 0.5)', - '&:hover': { - '--Switch-trackBackground': 'rgba(25, 118, 210, 0.5)', - }, - }, - [`&.${switchClasses.disabled}`]: { - '--Switch-trackBackground': 'rgb(0, 0, 0, 0.12)', - '--Switch-thumbColor': 'rgb(245, 245, 245)', - }, - [`&.${switchClasses.checked}.${switchClasses.disabled}`]: { - '--Switch-trackBackground': 'rgba(25, 118, 210, 0.12)', - '--Switch-thumbColor': 'rgb(167, 202, 237)', - }, - [theme.getColorSchemeSelector('dark')]: { - '--Switch-thumbBackground': '#fff', - '--Switch-trackBackground': 'rgba(255, 255, 255, 0.3)', - [`&.${switchClasses.checked}`]: { - '--Switch-thumbBackground': 'rgb(144, 202, 249)', - '--Switch-trackBackground': 'rgba(144, 202, 249, 0.5)', - }, - }, - })} - /> - ); -} diff --git a/docs/data/joy/components/switch/switch.md b/docs/data/joy/components/switch/switch.md index 2f4f058c6e7d40..eb59edab5ec6c6 100644 --- 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 index 7faa93ceb7b7e5..ee936e6ad14371 100644 --- 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)`, From e33e6344af869fef1162cde4c5454e16bbcfb2cf Mon Sep 17 00:00:00 2001 From: zanivan Date: Tue, 3 Oct 2023 11:26:42 -0300 Subject: [PATCH 2/2] Tweaked the ThumbChild demo --- docs/data/joy/components/switch/ExampleThumbChild.js | 3 ++- docs/data/joy/components/switch/ExampleThumbChild.tsx | 3 ++- docs/data/joy/components/switch/ExampleThumbChild.tsx.preview | 3 ++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/docs/data/joy/components/switch/ExampleThumbChild.js b/docs/data/joy/components/switch/ExampleThumbChild.js index 401e8e02048fef..37a88bd60e0e74 100644 --- a/docs/data/joy/components/switch/ExampleThumbChild.js +++ b/docs/data/joy/components/switch/ExampleThumbChild.js @@ -5,6 +5,7 @@ import DarkMode from '@mui/icons-material/DarkMode'; export default function ExampleThumbChild() { return ( ); diff --git a/docs/data/joy/components/switch/ExampleThumbChild.tsx b/docs/data/joy/components/switch/ExampleThumbChild.tsx index 401e8e02048fef..37a88bd60e0e74 100644 --- a/docs/data/joy/components/switch/ExampleThumbChild.tsx +++ b/docs/data/joy/components/switch/ExampleThumbChild.tsx @@ -5,6 +5,7 @@ import DarkMode from '@mui/icons-material/DarkMode'; export default function ExampleThumbChild() { return ( ); diff --git a/docs/data/joy/components/switch/ExampleThumbChild.tsx.preview b/docs/data/joy/components/switch/ExampleThumbChild.tsx.preview index 2c1754d3ac3fa2..583800c0d187df 100644 --- a/docs/data/joy/components/switch/ExampleThumbChild.tsx.preview +++ b/docs/data/joy/components/switch/ExampleThumbChild.tsx.preview @@ -1,4 +1,5 @@ \ No newline at end of file