[WEB-8227] - Align Checkbox with Figma states and lock production readiness#230
Open
codingwolf-at wants to merge 5 commits into
Open
[WEB-8227] - Align Checkbox with Figma states and lock production readiness#230codingwolf-at wants to merge 5 commits into
codingwolf-at wants to merge 5 commits into
Conversation
- Introduced `LabeledRowDoesNotShiftOnToggle` story to validate that the labeled checkbox's geometry remains consistent when toggled. - Enhanced the `States` story by adding hover states for unchecked, checked, and indeterminate checkboxes, ensuring visual feedback aligns with design specifications. - Updated checkbox variants to include hover effects and improved alignment handling for better user experience. - Adjusted styles in `variants.ts` and `checkbox-box.ts` to support new hover interactions and maintain consistent appearance across states.
|
📚 Storybook preview: https://pr-230-propel-storybook.vamsi-906.workers.dev |
- Added a new `Disabled indeterminate` checkbox state to the stories for better representation of checkbox states. - Introduced `LabelClickToggles` story to demonstrate interaction testing for label clicks toggling the checkbox state. - Updated `CheckboxProps` to set a default `sizing` of `"hug"` for better layout handling. - Refactored `CheckboxField` and `CheckboxGroupFieldOption` to utilize the `Checkbox` component directly, simplifying the structure. - Removed the `CheckboxFieldControl` component to streamline the checkbox field implementation. - Enhanced documentation and comments for clarity on component usage and behavior.
codingwolf-at
changed the title
|
Linked to Plane Work Item(s) This comment was auto-generated by Plane |
…cessibility - Removed assertions for hover states in the `StatesCssCanary` story, clarifying that these are demonstrated in the `States` documentation instead. - Updated the `Labeled` story to include accessibility configuration, disabling color contrast checks for disabled controls to align with WCAG guidelines. - Enhanced comments for better understanding of hover interactions and accessibility considerations.
|
Figma uses a 14px fill inset inside the 16px checkbox. This clips filled states to the padding box: |
Contributor
Author
What we shipped:
Same 14px chrome in every state, 16px hit target unchanged. |
- Updated the visual design of the checkbox box to align with Figma specifications, including changes to border and shadow styles. - Enhanced comments to provide clearer explanations of the checkbox's appearance and behavior in various states (checked, indeterminate, disabled). - Adjusted class names to ensure proper styling and interaction feedback, particularly for error states and hover effects.
- Enhanced comments to better explain the distinction between box-shadow and border-color for invalid states in the Checkbox component. - Adjusted assertions in the `InvalidInteraction` stories to reflect the correct styling behavior of danger strokes and their relationship to checked and unchecked states. - Improved overall clarity in the documentation of checkbox interactions, particularly regarding visual feedback for invalid states.
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
2 participants
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.
Description
--txt-disabled(#71777A) with white check/dash, label/icon disabled tint, andtext-body-xs-regulartypography.align-toponCheckboxLabel) and cover it with geometry regression stories.sizingdefault to the ready-made (AGENTS rule 13), delete theCheckboxFieldControlpassthrough, and expand Storybook coverage (hover canary, disabled canary, label-click,Sizing, disabled indeterminate).Type of Change
snapshot
Figma URL