Skip to content

Conversation

@GomezIvann
Copy link
Collaborator

@GomezIvann GomezIvann commented Mar 27, 2025

Checklist

  • The build process is done without errors. All tests pass in the /lib directory.
  • Self-reviewed the code before submitting.
  • Meets accessibility standards.
  • Added/updated documentation to /website as needed.
  • Added/updated tests as 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

@GomezIvann GomezIvann requested a review from Copilot March 27, 2025 12:04
Copy link
Contributor

Copilot AI left a 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<{

@GomezIvann GomezIvann marked this pull request as ready for review March 28, 2025 13:22
@Mil4n0r Mil4n0r self-assigned this Mar 28, 2025
@Mil4n0r Mil4n0r self-requested a review March 28, 2025 13:25
@dxc-technology dxc-technology deleted a comment from Mil4n0r Apr 8, 2025
Mil4n0r
Mil4n0r previously approved these changes Apr 8, 2025
Copy link
Collaborator

@Mil4n0r Mil4n0r left a 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!

@Mil4n0r Mil4n0r self-requested a review April 9, 2025 11:31
@Mil4n0r Mil4n0r merged commit d0f27f4 into master Apr 9, 2025
4 checks passed
@Mil4n0r Mil4n0r deleted the gomezivann/radio-group-redesign branch April 9, 2025 11:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants