[Joy] Add functional Switch component
#30487
Conversation
siriwatknp
changed the title
Switch componentSwitch component
|
@mui/joy: parsed: +7.26% , gzip: +5.63% |
| name: 'MuiSwitch', | ||
| slot: 'Track', | ||
| overridesResolver: (props, styles) => styles.track, | ||
| })<{ ownerState: SwitchProps & { focusVisible: boolean } }>(() => ({ |
There was a problem hiding this comment.
This reminds me I need to export the SwitchOwnerState interface to avoid construction of such types ad hoc.
| <SwitchTrack ownerState={ownerState} className={clsx(classes.track)} /> | ||
| <SwitchThumb ownerState={ownerState} className={clsx(classes.thumb)} /> | ||
| <SwitchInput ownerState={ownerState} {...getInputProps()} className={clsx(classes.input)} /> |
There was a problem hiding this comment.
I see there's no ability to customize the props of inner components (componentsProps is not exposed). Is it by design or do you plan to still add it?
There was a problem hiding this comment.
Good catch, I will add it.
| return generateUtilityClass('MuiSwitch', slot); | ||
| } | ||
|
|
||
| const switchClasses: SwitchClasses = generateUtilityClasses('MuiSwitch', [ |
There was a problem hiding this comment.
IMO we should use a different prefix to avoid conflicts with @mui/material's Switch. It may be a rare use case to have both in the same project, but it doesn't cost us anything to prevent such problems.
There was a problem hiding this comment.
avoid conflicts with @mui/material's Switch
Do you mean when developers use both material and joy in the same project? In that case, they can do this:
import { switchClasses as materialSwitchClasses } from '@mui/material/Switch';
import { switchClasses as joySwitchClasses } from '@mui/joy/Switch';unless I misunderstand the meaning of the different prefix that you mentioned.
There was a problem hiding this comment.
No, I meant the MuiSwitch prefix that gets added to CSS classes. If a project uses plain CSS to customize our components, it'll be impossible to differentiate between Material's Switch and Joy's Switch, as they both will have MuiSwitch-* classes.
There was a problem hiding this comment.
Ah, got it. I will change it in another PR for Switch, Button and Typography.
zannager
added
the
design: joy
Preview: https://deploy-preview-30487--material-ui.netlify.app/experiments/joy/switch/
Summary
Review suggestion
docs/pages/experiments/joy/switch.tsx