feat(icon): add form control glyphs - #4648
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
meta-cla
Bot
added
the
CLA Signed
fb5f3e0 to
6a4d36e
Compare
| ['chevronLeft', 'Navigate back, previous'], | ||
| ['chevronRight', 'Navigate forward, next'], | ||
| ['check', 'Checkbox checked, confirm'], | ||
| ['check', 'Confirm, selected option'], |
There was a problem hiding this comment.
Checkmark icon, specifically. Describe this in a way that can differentiate it from the others
| ['check', 'Confirm, selected option'], | ||
| ['checkboxChecked', 'Checked checkbox glyph'], | ||
| ['checkboxIndeterminate', 'Indeterminate checkbox glyph'], | ||
| ['radioChecked', 'Selected radio glyph'], |
There was a problem hiding this comment.
Missing unchecked states for radio and checkmarks
| '@media (pointer: coarse)': 'auto', | ||
| }, | ||
| }, | ||
| markerUnchecked: { |
There was a problem hiding this comment.
These should be part of the icon not the component
| ), | ||
|
|
||
| /** checkbox checked glyph — checkmark for checked checkbox state */ | ||
| checkboxChecked: ( |
There was a problem hiding this comment.
Mark sure these render exactly the way they did before. We may want an internal set of checkbox and radio that take in states and just renders the components. It should be the full checkmark box, radio circle, etc so may not be a full svg. Also reuse the component for each state just change some state prop.
Maybe we should make them public like "radio icon" and "checkbox icon"?
6a4d36e to
2418a5a
Compare
2418a5a to
97ac2dd
Compare
97ac2dd to
304fd4b
Compare
304fd4b to
c007c00
Compare
github-actions
Bot
added
the
needs:design-review
1 participant
Why
Checkbox and radio state marks are icon-like glyphs. Keeping them in component-local SVG/div markup makes them harder to theme consistently with the icon registry and with component icon slots.
What
Adds form-control state glyphs to the icon registry and routes form-control internals through component icon slots:
checkboxChecked,checkboxIndeterminate, andradioCheckedtoIconName/ default icons / icon docs.useIcon(slot, fallback).Risk
Default visual intent is preserved: checked checkbox still renders a checkmark, indeterminate still renders a bar, and selected radio still renders a dot. The implementation now goes through the icon registry, so themes can remap those component purposes.
Testing
pnpm exec vitest run --project ui packages/core/src/Icon/globalIconRegistry.test.tsx packages/core/src/CheckboxInput/CheckboxInput.test.tsx packages/core/src/RadioList/RadioList.test.tsx packages/core/src/DropdownMenu/DropdownMenu.test.tsx --reporter=dotpnpm -F @astryxdesign/core typecheckpnpm -F @astryxdesign/core lintpnpm check:syncpnpm check:package-boundariespnpm check:changesetspnpm -F @astryxdesign/core build