GovAlta
feat(#2936): update Radio component for V2
Summary
Updates the Radio component (RadioGroup + RadioItem) to support V2 design system styling while maintaining full backward compatibility with V1. This is a Token+CSS+Logic implementation due to the fundamental visual pattern change requiring DOM structure updates.
Changes
RadioGroup Component
New Props:
-
version("1" | "2", default"1"): Controls V1 vs V2 styling -
size("default" | "compact", default"default"): Controls spacing between radio items
Size Variants:
- Default vertical gap: 16px (unchanged from V1)
- Compact vertical gap: 12px (new)
- Default horizontal gap: 32px (increased from 24px)
- Compact horizontal gap: 24px (new)
Implementation:
- Version and compact state passed to RadioItem children via event messaging
- Reactive block ensures size/version changes propagate immediately
- CSS scoped with
.v2.compactfor V2-only features
RadioItem Component
Visual Pattern Change (V1 → V2):
V1 Approach (Border-Based):
- Uses thick 7px border to create "filled circle" appearance when checked
- Simple DOM structure:
.icondiv directly in label
V2 Approach (Border + Inner Dot):
- Uses thin 1.5px border + separate 16px inner dot element when checked
- Enhanced DOM structure:
.icon-wrapper>.icon+.icon-inner(conditional) - Inner dot absolutely positioned and centered using
transform: translate(-50%, -50%)
New Props:
- version (received from RadioGroup): Controls V1/V2 rendering
- compact (received from RadioGroup): Controls typography sizing
State Styling Updates:
All interaction states properly tokenized across 12+ combinations:
- Unchecked: default, hover, focus, hover+focus, disabled
- Checked: default, hover, focus, hover+focus, disabled
- Error states: unchecked + checked with all interaction combinations
V2-Specific Features:
- Inner dot colors: Blue (default), dark blue (hover), grey (disabled), red (error)
- Background colors: Light grey (disabled), light red (error), pink (error hover)
- Gap spacing: 12px icon-to-label (default), 8px (compact)
- Typography: Medium weight (500), 22px line-height
Size Variants:
- Default: 18px label, medium weight
- Compact: 16px label, medium weight
Related
- Parent issue: #2998
- Component issue: #2936
- Design tokens PR for Radio
- Figma component
@bdfranck Thanks for the detailed review and changes. I've implemented everything you included and will squash into one commit.
One additional thing I saw was that we need after testing again:
.icon {
flex: 0 0 auto;
}
(to prevent squishing of the radio button)
Before
After
I also noticed that the font-weight medium is also not showing correctly. (just shows regular weight). Seems to be the same issue we've been having as the semi-bold weight used in various components not showing up. I figure we'll fix that on the system level.
:tada: This PR is included in version 1.40.0-dev.8 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 4.10.0-dev.1 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 6.10.0-dev.3 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 1.10.0-dev.1 :tada:
The release is available on:
Your semantic-release bot :package::rocket: