Add SwatchPicker color field#91
Merged
czarandy merged 3 commits intoJul 10, 2026
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Owner
Author
|
Pure rename, no behavior change. Renames the component, its props type, its recipes (swatchPickerRecipe -> colorSwatchPickerRecipe, swatchRecipe -> colorSwatchRecipe), the variants type, and the Storybook title. Updates the public barrel export, the README component list, and the docs site category list; both lists stay alphabetically ordered, so the entry moves up under CheckboxInput.
Addresses review feedback on the swatch visuals and affordances: - Spacing between swatches drops from spacing.2 to spacing.1. - Each swatch gets a hover tooltip naming its color. Tooltips are hover-only (focusTrigger: 'never'): the color is already the swatch's accessible name, and a focus tooltip both collided with the group's keyboard hint and stayed open on the focused swatch while the pointer hovered a different one. For the same reason the tooltip is left out of aria-describedby, which would otherwise announce the color twice. - The focus ring moves off the padded button and onto the circle itself, so it sits 2px out instead of 6px. - Selection now draws an outer ring in the swatch's own accent color, separated from the circle by a background-colored gap, replacing the thick inner border. The color is threaded through a --swatch-ring custom property so one box-shadow serves all ten palette entries. - Swatches grow to scale(1.12) on hover, suppressed when disabled and under prefers-reduced-motion. The button keeps its spacing.1 padding, which is what reserves room for both rings inside its own box, so neither can bleed onto a neighboring swatch. Verified geometry in headless Chromium against Storybook (light and dark): gap 4px, focus ring at 2px offset, selected ring spanning 2-4px, hover 32px -> 35.84px. Recipe tests assert on whole Panda class names rather than substrings, since focusOffset is a prefix of focusOffsetLoose.
Owner
Author
|
🤖 Addressed feedback: Renamed SwatchPicker to ColorSwatchPicker and addressed all five review items: spacing.1 gap, hover-only per-color tooltips, focus ring tightened from 6px to 2px, selected state changed to an outer accent-colored ring, and a scale(1.12) hover grow — verified in headless Chromium and guarded by mutation-tested recipe assertions. |
czarandy
deleted the
silver/issue-79-colorpicker-color-swatch-field-component-pick
branch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
SwatchPickeras a Field-integrated named theme color picker with accessible radiogroup keyboard behavior.COLOR_NAMES/ColorNameand derive Tag, Badge, and Schedule color types from it.graypalette support plus docs, Storybook examples, and tests.Verification
pnpm typecheckpnpm lintpnpm testpnpm buildpnpm build:storybookpnpm build:siteCloses #79