Commit ccd67a1
committed
feat(checkbox): modernize for md3 spec compliance
Rewrites the Checkbox renderer to match the Material Design 3 spec
(https://m3.material.io/components/checkbox/specs):
- 18dp container with 2dp outline (unselected) / 0dp outline + theme
primary fill (selected), inside a 40dp state-layer tap target.
- State-layer overlay renders hover (8%), focus (10%) and pressed (10%)
layers in the color the spec defines for each (selected pressed flips
to onSurface; error always wins).
- Focus indicator: 3dp ring at theme.colors.secondary with the 2dp
outer-offset from md.sys.state.focusIndicator. Gated on
:focus-visible via the useFocusVisible hook added in #4952.
- Animations approximate Compose Material3 Checkbox.kt: 100ms fill
transition and 150ms checkmark draw, sequenced short-leg then
long-leg to suggest the stroke fraction. Indeterminate uses a
scaleX-animated dash.
- No new peer-deps: the checkmark is built from two rotated rectangles
(View-based), not an SVG path.
utils.ts:
- New getSelectionVisualState helper returns the full color +
opacity + outline-width picture for a given state combo.
- Legacy getSelectionControlColor kept as a compatibility export
for RadioButtonAndroid (radio button modernization is out of
scope for this PR).
9 snapshots auto-updated to reflect the new render tree.1 parent 8720eac commit ccd67a1
5 files changed
Lines changed: 2304 additions & 622 deletions
File tree
- src/components
- Checkbox
- __tests__/Checkbox
- __snapshots__
0 commit comments