Rule Card and Rule Stack Update #39
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: CommunityRule/community-rule#39
Reference in New Issue
Block a user
Delete Branch "adilallo/component/RuleCardUpdate"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
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:
itemsarray (fully migrated tochipOptions)Enhanced RuleStack Component:
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