Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[joy-ui][Switch] Slight adjustments to the design #39276

Merged
merged 2 commits into from
Oct 4, 2023
Merged

[joy-ui][Switch] Slight adjustments to the design #39276

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ecb0a37
tweak the Switch default widths and docs
danilo-leal Oct 3, 2023
e33e634
Tweaked the ThumbChild demo
zanivan Oct 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 0 additions & 48 deletions docs/data/joy/components/switch/ExampleMaterialSwitch.js
View file
Open in desktop

This file was deleted.

51 changes: 0 additions & 51 deletions docs/data/joy/components/switch/ExampleMaterialSwitch.tsx
View file
Open in desktop

This file was deleted.

3 changes: 2 additions & 1 deletion docs/data/joy/components/switch/ExampleThumbChild.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,15 @@ import DarkMode from '@mui/icons-material/DarkMode';
export default function ExampleThumbChild() {
return (
<Switch
size="lg"
slotProps={{
input: { 'aria-label': 'Dark mode' },
thumb: {
children: <DarkMode />,
},
}}
sx={{
'--Switch-thumbSize': '28px',
'--Switch-thumbSize': '16px',
}}
/>
);
Expand Down
3 changes: 2 additions & 1 deletion docs/data/joy/components/switch/ExampleThumbChild.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,15 @@ import DarkMode from '@mui/icons-material/DarkMode';
export default function ExampleThumbChild() {
return (
<Switch
size="lg"
slotProps={{
input: { 'aria-label': 'Dark mode' },
thumb: {
children: <DarkMode />,
},
}}
sx={{
'--Switch-thumbSize': '28px',
'--Switch-thumbSize': '16px',
}}
/>
);
Expand Down
3 changes: 2 additions & 1 deletion docs/data/joy/components/switch/ExampleThumbChild.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
<Switch
size="lg"
slotProps={{
input: { 'aria-label': 'Dark mode' },
thumb: {
children: <DarkMode />,
},
}}
sx={{
'--Switch-thumbSize': '28px',
'--Switch-thumbSize': '16px',
}}
/>
8 changes: 1 addition & 7 deletions docs/data/joy/components/switch/switch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
12 changes: 6 additions & 6 deletions packages/mui-joy/src/Switch/Switch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)`,
Expand Down