Rule Card and Rule Stack Update #39

2026-02-06T00:03:30Z

an.di commented

2026-02-06 00:03:30 +00:00

RuleCard Enhancement: Expanded States, New Sizes, and Supporting Components

Overview

This PR implements a comprehensive enhancement to the RuleCard component, adding expanded/collapsed states, new size variants (XS, S, M, L), and integration with new form control components. The RuleStack component is also updated with responsive breakpoints and improved layout. All components align with Figma design specifications and maintain full accessibility support.

The work includes three new components (Chip, MultiSelect, InputLabel) that support the RuleCard's expanded state functionality, along with responsive design improvements that use CSS-only Tailwind classes to prevent hydration mismatches.

Changes

New Chip Component: Versatile chip component with states (Unselected, Selected, Disabled, Custom), palettes (Default, Inverse), and sizes (S, M). Custom state supports editable input with check/close buttons. Full keyboard navigation and accessibility support.
New MultiSelect Component: Container component for managing multiple chips with labels and add functionality. Integrates Chip and InputLabel components, supports custom chip creation, and provides configurable add button styling.
New InputLabel Component: Reusable label component for form inputs with optional help icon (yellow for default, dark yellow for inverse), asterisk for required fields, and helper text. Supports size variants (S, M) and palette variants (Default, Inverse).
Enhanced RuleCard Component:
- Added size variants: XS, S, M, L with responsive styling
- Implemented expanded/collapsed states with toggleable expanded view
- Integrated MultiSelect component for category sections
- Removed backward compatibility with old items array (fully migrated to chipOptions)
- Fixed header layout with proper border alignment and spacing
- Fixed header heights: 72px (XS), 80px (S), 88px (M), 136px (L)
- Enhanced logo rendering with community initials fallback
- All responsive styling uses CSS-only Tailwind classes
Enhanced RuleStack Component:
- Implemented responsive breakpoints:
  - 320-639px: XS RuleCard, single column, 40px logo
  - 640-767px: S RuleCard, single column, 56px logo
  - 768-1023px: S RuleCard, 2x2 grid, 56px logo
  - 1024-1439px: M RuleCard, 2x2 grid, 56px logo
  - 1440px+: L RuleCard, 2x2 grid, 90px logo
- Integrated SectionHeader component for title/subtitle
- Updated to use Button component with outline variant for "See all templates"
- All responsive styling uses CSS-only classes to prevent hydration mismatches
Prop Normalization Updates: Added normalization functions for new component props (Chip, MultiSelect, InputLabel) and updated RuleCard size normalization to support XS and S.
Hydration Fixes: Converted all JavaScript-based conditional styling to CSS-only responsive classes, fixing logo size flashing, border radius mismatches, and header layout/font size flashing on refresh.
Test Updates: Updated all existing tests to match new implementation, added comprehensive tests for new components, and fixed responsive class assertions. All 389 tests passing (4 skipped).

Screenshots

# RuleCard Enhancement: Expanded States, New Sizes, and Supporting Components ## Overview This PR implements a comprehensive enhancement to the RuleCard component, adding expanded/collapsed states, new size variants (XS, S, M, L), and integration with new form control components. The RuleStack component is also updated with responsive breakpoints and improved layout. All components align with Figma design specifications and maintain full accessibility support. The work includes three new components (Chip, MultiSelect, InputLabel) that support the RuleCard's expanded state functionality, along with responsive design improvements that use CSS-only Tailwind classes to prevent hydration mismatches. ## Changes - **New Chip Component**: Versatile chip component with states (Unselected, Selected, Disabled, Custom), palettes (Default, Inverse), and sizes (S, M). Custom state supports editable input with check/close buttons. Full keyboard navigation and accessibility support. - **New MultiSelect Component**: Container component for managing multiple chips with labels and add functionality. Integrates Chip and InputLabel components, supports custom chip creation, and provides configurable add button styling. - **New InputLabel Component**: Reusable label component for form inputs with optional help icon (yellow for default, dark yellow for inverse), asterisk for required fields, and helper text. Supports size variants (S, M) and palette variants (Default, Inverse). - **Enhanced RuleCard Component**: - Added size variants: XS, S, M, L with responsive styling - Implemented expanded/collapsed states with toggleable expanded view - Integrated MultiSelect component for category sections - Removed backward compatibility with old `items` array (fully migrated to `chipOptions`) - Fixed header layout with proper border alignment and spacing - Fixed header heights: 72px (XS), 80px (S), 88px (M), 136px (L) - Enhanced logo rendering with community initials fallback - All responsive styling uses CSS-only Tailwind classes - **Enhanced RuleStack Component**: - Implemented responsive breakpoints: - 320-639px: XS RuleCard, single column, 40px logo - 640-767px: S RuleCard, single column, 56px logo - 768-1023px: S RuleCard, 2x2 grid, 56px logo - 1024-1439px: M RuleCard, 2x2 grid, 56px logo - 1440px+: L RuleCard, 2x2 grid, 90px logo - Integrated SectionHeader component for title/subtitle - Updated to use Button component with outline variant for "See all templates" - All responsive styling uses CSS-only classes to prevent hydration mismatches - **Prop Normalization Updates**: Added normalization functions for new component props (Chip, MultiSelect, InputLabel) and updated RuleCard size normalization to support XS and S. - **Hydration Fixes**: Converted all JavaScript-based conditional styling to CSS-only responsive classes, fixing logo size flashing, border radius mismatches, and header layout/font size flashing on refresh. - **Test Updates**: Updated all existing tests to match new implementation, added comprehensive tests for new components, and fixed responsive class assertions. All 389 tests passing (4 skipped). ## Screenshots <img width="782" alt="Screenshot 2026-02-05 at 5.02.19 PM.png" src="attachments/a692f874-7e10-4a99-9443-44565567d743"> <img width="782" alt="Screenshot 2026-02-05 at 5.02.30 PM.png" src="attachments/db73f0b9-44d1-4e44-a2ae-843604e6ef7e"> <img width="782" alt="Screenshot 2026-02-05 at 5.02.44 PM.png" src="attachments/b48c34a7-c980-4040-9ee5-8495c8333565"> <img width="782" alt="Screenshot 2026-02-05 at 5.02.58 PM.png" src="attachments/84e8fa39-d202-4d3a-b764-d8e0273ba702"> <img width="484" alt="Screenshot 2026-02-05 at 5.03.23 PM.png" src="attachments/89bc7ea5-f965-45e9-a700-7a8f086630f7">

Screenshot 2026-02-05 at 5.02.19 PM.png

48 KiB

Screenshot 2026-02-05 at 5.02.30 PM.png

44 KiB

Screenshot 2026-02-05 at 5.02.44 PM.png

84 KiB

Screenshot 2026-02-05 at 5.02.58 PM.png

88 KiB

Screenshot 2026-02-05 at 5.03.23 PM.png

185 KiB

an.di added 8 commits 2026-02-06 00:03:31 +00:00