CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Button Updates #36

Merged
an.di merged 5 commits from adilallo/component/ButtonUpdates into main 2026-02-03 17:56:10 +00:00
Conversation 0 Commits 5 Files Changed 20
+377 -143
an.di commented 2026-02-03 17:44:47 +00:00
Owner
Copy Link
Copy Source

Update Button Component: Variant Renames, Sizing, and Alert Close Button

Overview

This PR updates the Button component to align with Figma design specifications. It includes comprehensive variant renames to match design system naming conventions, updates to button sizing and spacing across all sizes, and improvements to the alert close button styling with hover states. All component references throughout the codebase have been updated to use the new variant names, and visual regression snapshots have been updated to reflect the new button dimensions.

Changes

Button Variant Renames

  • default → filled
  • primary → filled-inverse
  • secondary → ghost
  • inverse → ghost-inverse
  • outlined → outline
  • dark → outline-inverse

Button Sizing and Spacing

  • Updated padding and gap values for all button sizes (xsmall, small, medium, large, xlarge) to match Figma specifications
  • Ensured consistent spacing using design tokens (--spacing-scale-*)
  • Maintained consistent border width (border-[1.5px]) across all states to prevent layout shifts

Component Updates

  • Button.tsx: Updated variant types, default values, and all variant style definitions
  • Alert.view.tsx: Updated close button to use ghost variant at large size with hover color change to var(--color-content-default-primary)
  • ContentLockup.view.tsx: Updated button variants from primary to filled-inverse and hero variant to filled
  • AskOrganizer.view.tsx: Updated default to filled and primary to filled-inverse
  • ModalFooter.view.tsx: Updated default to filled and outlined to outline
  • HomeHeader.container.tsx: Updated secondary to ghost
  • RuleStack.view.tsx: Updated outlined to outline
  • NumberedCards.view.tsx: Updated default to filled and outlined to outline; configured responsive variants (filled for first two breakpoints, outline for next two)

Storybook Updates

  • Button.stories.js: Updated all variant references and added comprehensive examples for all new variants
  • Component Preview: Updated to showcase all new button variants across sizes and states

Design Token Updates

  • tailwind.css: Updated --color-surface-default-brand-primary to use --color-yellow-yellow1000 for filled-inverse active state

Test Updates

  • Updated visual regression snapshots to reflect new button dimensions
  • All component tests passing (157 tests)
  • All unit tests passing (356 tests)
  • All E2E tests passing (124 tests across all browsers and mobile)

How to Test

  1. Run Storybook: npm run storybook and navigate to Button component stories

    • Verify all variants display correctly: filled, filled-inverse, ghost, ghost-inverse, outline, outline-inverse, danger, danger-inverse
    • Check all sizes: xsmall, small, medium, large, xlarge
    • Test all states: default, hover, focus, active, disabled
    • Verify no layout shifts when clicking/holding buttons

  2. Component Preview Page: npm run dev and navigate to /components-preview

    • Review all button variant sections
    • Verify sizing and spacing match Figma designs
    • Test hover states on all variants

  3. Alert Components: Test alert toast and banner components

    • Verify close button uses ghost variant at large size
    • Hover over close button and verify color changes to var(--color-content-default-primary)
    • Verify SVG colors remain unchanged (dynamic based on alert type)

  4. Responsive Testing: Test across breakpoints

    • Verify NumberedCards shows "filled" variant for first two breakpoints ("Create CommunityRule" text)
    • Verify NumberedCards shows "outline" variant for next two breakpoints ("See How It Works" text)
    • Check hero banner button uses filled variant at all breakpoints

  5. Run Test Suite: npm test && npm run test:e2e

    • All tests should pass
    • Visual regression snapshots should match current implementation

  6. Accessibility:

    • Verify focus indicators are visible on all button variants
    • Test keyboard navigation (Tab, Enter, Space)
    • Confirm no layout shifts during interactions

Notes

  • Breaking Changes: This PR includes breaking changes to button variant names. All components using buttons have been updated, but any external code or documentation referencing the old variant names will need to be updated.
  • Layout Shift Prevention: All button variants now use consistent border-[1.5px] (transparent by default where needed) to prevent layout shifts when borders appear on hover/focus/active states.
  • Design Token Alignment: Button sizing and spacing now strictly follow Figma design specifications using design tokens for consistency.
  • Visual Regression: Snapshots have been updated to reflect the new button dimensions. Page heights increased slightly (14px on homepage, 6px on blog post) due to updated button sizing.
  • Test Coverage: All existing tests pass with no modifications needed to test logic, only visual regression snapshots were updated.
# Update Button Component: Variant Renames, Sizing, and Alert Close Button ## Overview This PR updates the Button component to align with Figma design specifications. It includes comprehensive variant renames to match design system naming conventions, updates to button sizing and spacing across all sizes, and improvements to the alert close button styling with hover states. All component references throughout the codebase have been updated to use the new variant names, and visual regression snapshots have been updated to reflect the new button dimensions. ## Changes ### Button Variant Renames - `default` → `filled` - `primary` → `filled-inverse` - `secondary` → `ghost` - `inverse` → `ghost-inverse` - `outlined` → `outline` - `dark` → `outline-inverse` ### Button Sizing and Spacing - Updated padding and gap values for all button sizes (`xsmall`, `small`, `medium`, `large`, `xlarge`) to match Figma specifications - Ensured consistent spacing using design tokens (`--spacing-scale-*`) - Maintained consistent border width (`border-[1.5px]`) across all states to prevent layout shifts ### Component Updates - **Button.tsx**: Updated variant types, default values, and all variant style definitions - **Alert.view.tsx**: Updated close button to use `ghost` variant at `large` size with hover color change to `var(--color-content-default-primary)` - **ContentLockup.view.tsx**: Updated button variants from `primary` to `filled-inverse` and hero variant to `filled` - **AskOrganizer.view.tsx**: Updated `default` to `filled` and `primary` to `filled-inverse` - **ModalFooter.view.tsx**: Updated `default` to `filled` and `outlined` to `outline` - **HomeHeader.container.tsx**: Updated `secondary` to `ghost` - **RuleStack.view.tsx**: Updated `outlined` to `outline` - **NumberedCards.view.tsx**: Updated `default` to `filled` and `outlined` to `outline`; configured responsive variants (filled for first two breakpoints, outline for next two) ### Storybook Updates - **Button.stories.js**: Updated all variant references and added comprehensive examples for all new variants - **Component Preview**: Updated to showcase all new button variants across sizes and states ### Design Token Updates - **tailwind.css**: Updated `--color-surface-default-brand-primary` to use `--color-yellow-yellow1000` for filled-inverse active state ### Test Updates - Updated visual regression snapshots to reflect new button dimensions - All component tests passing (157 tests) - All unit tests passing (356 tests) - All E2E tests passing (124 tests across all browsers and mobile) ## How to Test 1. **Run Storybook**: `npm run storybook` and navigate to Button component stories - Verify all variants display correctly: `filled`, `filled-inverse`, `ghost`, `ghost-inverse`, `outline`, `outline-inverse`, `danger`, `danger-inverse` - Check all sizes: `xsmall`, `small`, `medium`, `large`, `xlarge` - Test all states: default, hover, focus, active, disabled - Verify no layout shifts when clicking/holding buttons 2. **Component Preview Page**: `npm run dev` and navigate to `/components-preview` - Review all button variant sections - Verify sizing and spacing match Figma designs - Test hover states on all variants 3. **Alert Components**: Test alert toast and banner components - Verify close button uses `ghost` variant at `large` size - Hover over close button and verify color changes to `var(--color-content-default-primary)` - Verify SVG colors remain unchanged (dynamic based on alert type) 4. **Responsive Testing**: Test across breakpoints - Verify `NumberedCards` shows "filled" variant for first two breakpoints ("Create CommunityRule" text) - Verify `NumberedCards` shows "outline" variant for next two breakpoints ("See How It Works" text) - Check hero banner button uses `filled` variant at all breakpoints 5. **Run Test Suite**: `npm test && npm run test:e2e` - All tests should pass - Visual regression snapshots should match current implementation 6. **Accessibility**: - Verify focus indicators are visible on all button variants - Test keyboard navigation (Tab, Enter, Space) - Confirm no layout shifts during interactions ## Notes - **Breaking Changes**: This PR includes breaking changes to button variant names. All components using buttons have been updated, but any external code or documentation referencing the old variant names will need to be updated. - **Layout Shift Prevention**: All button variants now use consistent `border-[1.5px]` (transparent by default where needed) to prevent layout shifts when borders appear on hover/focus/active states. - **Design Token Alignment**: Button sizing and spacing now strictly follow Figma design specifications using design tokens for consistency. - **Visual Regression**: Snapshots have been updated to reflect the new button dimensions. Page heights increased slightly (14px on homepage, 6px on blog post) due to updated button sizing. - **Test Coverage**: All existing tests pass with no modifications needed to test logic, only visual regression snapshots were updated.
an.di self-assigned this 2026-02-03 17:44:47 +00:00
an.di added 5 commits 2026-02-03 17:44:47 +00:00
Added danger button 7f7c643e9b
Added ghost button 5beb3193cb
Update button components 8f0db08d0f
Fix buttons across app 6ea840505a
Update button tests and components to pass 7f2caeaad7
an.di merged commit ecaef5d797 into main 2026-02-03 17:56:10 +00:00
an.di deleted branch adilallo/component/ButtonUpdates 2026-02-03 17:56:10 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
an.di (Andy DiLallo) ntnsndr (Nathan Schneider)
No Assignees an.di
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: CommunityRule/community-rule#36
Delete Branch "adilallo/component/ButtonUpdates"

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?