Number Card and Form Component Updates #37

2026-02-04T21:06:40Z

an.di commented

2026-02-04 21:06:40 +00:00

Update form components to match Figma design system

Overview

This PR updates multiple form components (RadioButton, RadioGroup, Checkbox, CheckboxGroup, SelectInput, TextInput, and NumberCard) to align with the Figma design system. All components now support both standard and inverse modes, with consistent styling for default, hover, focus, selected, and disabled states. The updates ensure visual consistency across all form elements and improve accessibility.

Changes

RadioButton Component

Standard mode: Implemented default, hover, focus, selected, selected hover, and selected focus states per Figma
- Default: Tertiary border (#464646)
- Hover: Brand primary border (#fdfaa8)
- Focus: Double-ring focus shadow (2px white inner, 4px dark outer)
- Selected: Brand primary border with light cream dot (#fefcc9)
- Selected hover: Brand primary border with darker dot (#333000)
- Selected focus: Invert tertiary border (#2d2d2d) with focus ring
Inverse mode: Implemented all states with transparent background
- Default: White border
- Hover: Inverse brand primary border (#6c6701) for unselected, brand primary for selected
- Focus: Double-ring focus shadow (2px dark inner, 4px white outer)
- Selected: Brand primary border with black dot
Simplified styling using Tailwind pseudo-classes (:hover, :focus) instead of state-based logic
Updated dot colors and border styling to match Figma specifications exactly

RadioGroup Component

Added support for optional subtext field in radio options (similar to CheckboxGroup)
Updated to render subtext with proper spacing (4px gap) and text colors for both modes
Maintains 8px vertical spacing between radio button items
All radio buttons in group inherit mode and state from parent

Checkbox Component

Standard mode: Implemented default, hover, focus, checked, and disabled states
- Default: Tertiary border with hover changing to brand primary
- Focus: Double-ring shadow (2px white inner, 4px dark outer)
- Checked: Brand primary checkmark color (#fefcc9)
Inverse mode: Implemented all states with transparent background
- Default: White border
- Hover: Brand primary border
- Focus: Double-ring shadow (2px dark inner, 4px white outer)
- Checked: Black checkmark
Simplified styling using Tailwind pseudo-classes for hover and focus states
Updated checkmark SVG styling and colors per Figma

CheckboxGroup Component

New component for rendering multiple checkboxes with labels
Supports optional subtext for each checkbox option
Proper spacing and layout (8px gap between items, 4px between label and subtext)
Supports both standard and inverse modes
Tracks checked values as an array

SelectInput Component

Completely redesigned as button-based component (replacing native select)
Matches TextInput styling exactly for all states (default, active, focus, error, disabled)
Implemented focus detection logic to distinguish keyboard vs mouse interaction
Active state shown when dropdown is open
Focus state shown on keyboard navigation (Tab key)
Proper accessibility attributes (aria-expanded, aria-haspopup, aria-invalid)
Dropdown menu with SelectOption components

TextInput Component

Verified and maintained consistency with SelectInput styling
All states (default, active, focus, error, disabled) match Figma design
Consistent spacing, borders, and focus rings

NumberCard Component

Updated to match latest design specifications
Consistent styling with other card components

Component Preview Page

Updated to showcase all form components in both standard and inverse modes
Added interactive examples for testing hover and focus states
Organized by component type with clear sections

Storybook Stories

Updated all component stories to reflect new states and modes
Added interactive examples for both standard and inverse modes
Added stories demonstrating subtext support where applicable
All stories are interactive to test hover and focus states

Screenshots

How to Test

Run Storybook: npm run storybook
- Navigate to Forms section
- Test RadioButton, RadioGroup, Checkbox, CheckboxGroup, SelectInput, and TextInput stories
- Verify all states (default, hover, focus, selected, disabled) work correctly
- Test both standard and inverse modes
Run Component Preview: npm run dev and navigate to /components-preview
- Verify all components display correctly
- Test interactive states (hover, focus, selection)
- Verify standard and inverse modes render properly
- Test subtext support in RadioGroup and CheckboxGroup
Keyboard Navigation:
- Tab through form elements to verify focus states
- Use Space/Enter to interact with radio buttons and checkboxes
- Verify focus rings appear correctly for keyboard navigation
Accessibility:
- Run accessibility tests: npm test -- --testPathPattern=accessibility
- Verify ARIA attributes are correct
- Test with screen reader if available
Visual Regression:
- Run visual regression tests: npm run test:e2e
- Verify components match Figma designs

Notes

All components now use Tailwind CSS pseudo-classes (:hover, :focus) for cleaner, more maintainable code
Focus states are automatically detected based on interaction method (keyboard vs mouse)
Subtext support in RadioGroup and CheckboxGroup follows the same pattern for consistency
All color values use CSS custom properties (design tokens) for easy theming
Component preview page serves as a quick reference for all form component states
All existing tests pass; no breaking changes to component APIs

# Update form components to match Figma design system ## Overview This PR updates multiple form components (RadioButton, RadioGroup, Checkbox, CheckboxGroup, SelectInput, TextInput, and NumberCard) to align with the Figma design system. All components now support both standard and inverse modes, with consistent styling for default, hover, focus, selected, and disabled states. The updates ensure visual consistency across all form elements and improve accessibility. ## Changes ### RadioButton Component - **Standard mode**: Implemented default, hover, focus, selected, selected hover, and selected focus states per Figma - Default: Tertiary border (#464646) - Hover: Brand primary border (#fdfaa8) - Focus: Double-ring focus shadow (2px white inner, 4px dark outer) - Selected: Brand primary border with light cream dot (#fefcc9) - Selected hover: Brand primary border with darker dot (#333000) - Selected focus: Invert tertiary border (#2d2d2d) with focus ring - **Inverse mode**: Implemented all states with transparent background - Default: White border - Hover: Inverse brand primary border (#6c6701) for unselected, brand primary for selected - Focus: Double-ring focus shadow (2px dark inner, 4px white outer) - Selected: Brand primary border with black dot - Simplified styling using Tailwind pseudo-classes (`:hover`, `:focus`) instead of state-based logic - Updated dot colors and border styling to match Figma specifications exactly ### RadioGroup Component - Added support for optional `subtext` field in radio options (similar to CheckboxGroup) - Updated to render subtext with proper spacing (4px gap) and text colors for both modes - Maintains 8px vertical spacing between radio button items - All radio buttons in group inherit mode and state from parent ### Checkbox Component - **Standard mode**: Implemented default, hover, focus, checked, and disabled states - Default: Tertiary border with hover changing to brand primary - Focus: Double-ring shadow (2px white inner, 4px dark outer) - Checked: Brand primary checkmark color (#fefcc9) - **Inverse mode**: Implemented all states with transparent background - Default: White border - Hover: Brand primary border - Focus: Double-ring shadow (2px dark inner, 4px white outer) - Checked: Black checkmark - Simplified styling using Tailwind pseudo-classes for hover and focus states - Updated checkmark SVG styling and colors per Figma ### CheckboxGroup Component - New component for rendering multiple checkboxes with labels - Supports optional subtext for each checkbox option - Proper spacing and layout (8px gap between items, 4px between label and subtext) - Supports both standard and inverse modes - Tracks checked values as an array ### SelectInput Component - Completely redesigned as button-based component (replacing native select) - Matches TextInput styling exactly for all states (default, active, focus, error, disabled) - Implemented focus detection logic to distinguish keyboard vs mouse interaction - Active state shown when dropdown is open - Focus state shown on keyboard navigation (Tab key) - Proper accessibility attributes (aria-expanded, aria-haspopup, aria-invalid) - Dropdown menu with SelectOption components ### TextInput Component - Verified and maintained consistency with SelectInput styling - All states (default, active, focus, error, disabled) match Figma design - Consistent spacing, borders, and focus rings ### NumberCard Component - Updated to match latest design specifications - Consistent styling with other card components ### Component Preview Page - Updated to showcase all form components in both standard and inverse modes - Added interactive examples for testing hover and focus states - Organized by component type with clear sections ### Storybook Stories - Updated all component stories to reflect new states and modes - Added interactive examples for both standard and inverse modes - Added stories demonstrating subtext support where applicable - All stories are interactive to test hover and focus states ## Screenshots <img width="733" alt="Screenshot 2026-02-04 at 2.05.50 PM.png" src="attachments/4ec828f6-8ed6-4480-998d-eead8297a104"> <img width="733" alt="Screenshot 2026-02-04 at 2.06.10 PM.png" src="attachments/f3df678d-f7e0-43aa-be0e-1bc449a4c4f5"> <img width="733" alt="Screenshot 2026-02-04 at 2.06.24 PM.png" src="attachments/e071d0a0-7634-4902-b33c-6dfede3b731d"> ## How to Test 1. **Run Storybook**: `npm run storybook` - Navigate to Forms section - Test RadioButton, RadioGroup, Checkbox, CheckboxGroup, SelectInput, and TextInput stories - Verify all states (default, hover, focus, selected, disabled) work correctly - Test both standard and inverse modes 2. **Run Component Preview**: `npm run dev` and navigate to `/components-preview` - Verify all components display correctly - Test interactive states (hover, focus, selection) - Verify standard and inverse modes render properly - Test subtext support in RadioGroup and CheckboxGroup 3. **Keyboard Navigation**: - Tab through form elements to verify focus states - Use Space/Enter to interact with radio buttons and checkboxes - Verify focus rings appear correctly for keyboard navigation 4. **Accessibility**: - Run accessibility tests: `npm test -- --testPathPattern=accessibility` - Verify ARIA attributes are correct - Test with screen reader if available 5. **Visual Regression**: - Run visual regression tests: `npm run test:e2e` - Verify components match Figma designs ## Notes - All components now use Tailwind CSS pseudo-classes (`:hover`, `:focus`) for cleaner, more maintainable code - Focus states are automatically detected based on interaction method (keyboard vs mouse) - Subtext support in RadioGroup and CheckboxGroup follows the same pattern for consistency - All color values use CSS custom properties (design tokens) for easy theming - Component preview page serves as a quick reference for all form component states - All existing tests pass; no breaking changes to component APIs

Screenshot 2026-02-04 at 2.05.50 PM.png

106 KiB

Screenshot 2026-02-04 at 2.06.10 PM.png

92 KiB

Screenshot 2026-02-04 at 2.06.24 PM.png

87 KiB

an.di added 9 commits 2026-02-04 21:06:40 +00:00

Update NumberCard component 139780d867

Update vitest.config.mjs 91635cbf4c

Adjust NumberCard story d8fa525514

Update text input component 255f16477c

Update select input component 0e7985287f