-
Notifications
You must be signed in to change notification settings - Fork 17
Radio group redesign #2201
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Radio group redesign #2201
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR implements a redesign for radio group components along with associated form elements and supporting pages to ensure consistency in styling and improved accessibility. Key changes include:
- Extracting common form style components (HelperText, ErrorMessage, Label) and updating their usage across slider, select, and radio group components.
- Refactoring radio group types and components to streamline properties and accessibility attributes.
- Updating related Storybook stories and documentation pages to reflect the new design and behavior.
Reviewed Changes
Copilot reviewed 32 out of 32 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/lib/src/styles/forms/HelperText.tsx | Introduces a styled HelperText component with configurable margin and disabled styling. |
| packages/lib/src/styles/forms/ErrorMessage.tsx | Adds an ErrorMessage component with improved error icon handling and accessibility. |
| packages/lib/src/slider/Slider.tsx | Refactors internal Label and HelperText definitions to use shared styled components; updates tick rendering semantics. |
| packages/lib/src/select/Select.tsx | Replaces internal styling with imported components and adjusts dependency order for callbacks. |
| packages/lib/src/radio-group/* | Updates types, component structure, and styling for radio group elements; removes redundant theme providers. |
| apps/website/screens/** | Refactors documentation and layout pages to align with the renamed and reorganized radio group components. |
Comments suppressed due to low confidence (2)
packages/lib/src/radio-group/types.ts:1
- Consider renaming 'Option' back to 'RadioOption' to maintain clarity and consistency with the component context.
type Option = {
packages/lib/src/slider/Slider.tsx:135
- Ensure that using an element for tick marks inside a datalist complies with accessibility standards and that the custom styling (e.g., 'all: unset;') does not affect native behavior across different browsers.
const Tick = styled.option<{
Mil4n0r
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Approved, we have to merge TextInput PR first though!
Checklist
/libdirectory./websiteas needed.Description
Redesign of the radio group component following the new design kit specifications, already using the new token architecture (CSS variables).
Additional context
Figma designs - Radio group
Figma designs - Radio input