feat: align radio layout and add unchecked hover state#676
Draft
isaquebock wants to merge 1 commit into
Draft
Conversation
- RadioButton: on hover (when not checked) the border switches to `var(--primary)` to mirror the checked affordance, and the ghost-overlay is hidden so the color isn't muddied - RadioButton: keep the inner dot via `data-[checked]:after`; drop the pseudo `before` override that hid it - FieldRadio + FieldRadioBlock: render the control before the label/description block so the indicator stays on the leading edge, matching Checkbox-driven fields and the Figma layout
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
RadioButton: when unchecked, hovering swaps the border tovar(--primary)(mirroring the checked affordance) and hides the toggle ghost overlay so the colour stays clean.RadioButton: drop the redundantdata-[checked]:before:hiddenoverride; the inner dot keeps relying on theafterpseudo so the checked-disabled state continues to render correctly.FieldRadioandFieldRadioBlock: render the<RadioButton>before the label/description block so the indicator sits on the leading edge — matches the Checkbox-driven fields and the Figma layout.Test plan
pnpm webkit:lint && pnpm webkit:type-checkpnpm --filter storybook build