feat: modernize Switch to MD3#4957
Conversation
|
The mobile version of example app from this branch is ready! You can see it here. |
| export type Props = { | ||
| /** Whether the switch is on. */ | ||
| value?: boolean; | ||
| /** | ||
| * Custom color for switch. | ||
| */ | ||
| color?: string; | ||
| /** | ||
| * Callback called with the new value when it changes. | ||
| */ | ||
| onValueChange?: Function; | ||
| /** Called with the new value when the user toggles the switch. */ | ||
| onValueChange?: (value: boolean) => void; | ||
| /** Disables interaction and renders the disabled visual state. */ | ||
| disabled?: boolean; | ||
| /** Icon shown inside the handle when checked */ | ||
| checkedIcon?: IconSource; | ||
| /** Icon shown inside the handle when unchecked. */ | ||
| uncheckedIcon?: IconSource; | ||
| /** Per-slot color overrides. Unspecified keys fall back to theme defaults. */ | ||
| colors?: Partial<SwitchColors>; | ||
| style?: StyleProp<ViewStyle>; | ||
| /** | ||
| * @optional | ||
| */ | ||
| testID?: string; | ||
| theme?: ThemeProp; | ||
| accessibilityLabel?: string; | ||
| }; |
There was a problem hiding this comment.
Please use the multiline comment pattern already used in the codebase. Don't collapse them to a single line.
| /** Icon shown inside the handle when unchecked. */ | ||
| uncheckedIcon?: IconSource; | ||
| /** Per-slot color overrides. Unspecified keys fall back to theme defaults. */ | ||
| colors?: Partial<SwitchColors>; |
There was a problem hiding this comment.
I don't think we need this prop, given that all components already receive theme as a prop. It's 2 ways to achieve the same thing.
There was a problem hiding this comment.
Previously we had a color prop and this is what replaces it for custom colors.
I'm fine with removing it but having colors is more developer friendly since we're using explicit switch specific naming instead of having to guess what theme color token corresponds to which component token.
As a developer using this lib, I would not use this unless I want custom colors for the switch and in general I would not pass non-default/global theme to components.
What do you think?
Edit: I would prefer to remove the theme prop and use useInternalTheme() instead for the other tokens we need
| export type { Props as SwitchProps } from './components/Switch/Switch'; | ||
| export type { | ||
| Props as SwitchProps, | ||
| SwitchColors, |
There was a problem hiding this comment.
I don't think we need this exposed
adrcotfas
force-pushed
the
@adrcotfas/tokens_structure
branch
from
91d86b4 to
be1c417
Compare
adrcotfas
force-pushed
the
@adrcotfas/tokens_structure
branch
from
be1c417 to
b41006a
Compare
adrcotfas
force-pushed
the
@adrcotfas/switch
branch
from
562f947 to
7731d0e
Compare
2 participants
Motivation
Update the Switch to use the latest MD specs, including motion and RTL.
Related issue
Closes #4939
Partially closes #4892
Test plan
Demo
Screen_recording_20260520_171630.webm
Simulator.Screen.Recording.-.iPhone.16e.-.2026-05-20.at.17.46.36.mov