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

Button Component #5

Merged
an.di merged 1 commits from adilallo/ButtonComponent into main 2025-08-15 01:12:21 +00:00
Conversation 1 Commits 1 Files Changed 2
+146 -7
an.di commented 2025-08-14 20:48:34 +00:00
Owner
Copy Link
Copy Source
No description provided.
an.di added 1 commit 2025-08-14 20:48:34 +00:00
Button component style variants and sizes added 8779440c19
an.di self-assigned this 2025-08-14 20:52:27 +00:00
an.di commented 2025-08-14 20:52:37 +00:00
Author
Owner
Copy Link
Copy Source

Add Button Component System

Overview

This PR introduces a responsive, accessible Button component system for CommunityRule.
It supports six variants, five sizes, and full interactive states, all implemented with Tailwind CSS and design tokens. The component is WCAG 2.1 AA compliant and optimized for responsive layouts.

Changes

  • Implemented six variants: default, secondary, primary, outlined, dark, inverse
  • Added five sizes: xsmall → small → medium → large → xlarge
  • Built interactive states: default, hover, focus, active, disabled
  • Integrated with design tokens for colors, spacing, typography, border radius
  • Added smooth transitions (500ms, scale ±2%)
  • Verified accessibility: semantic HTML, ARIA support, focus indicators
  • Created Storybook stories for variants, sizes, and states

Screenshots

Screenshot 2025-08-14 at 2.51.15 PM.pngScreenshot 2025-08-14 at 2.50.55 PM.png

How to Test

  1. Run Storybook and open the Button stories.
  2. Verify:
    • All six variants render correctly
    • Sizes scale consistently across breakpoints
    • Interactive states (hover, focus, active, disabled) display as expected
    • Buttons are accessible via keyboard (Tab, Enter, Space)
    • Contrast ratios meet design system standards
  3. Confirm buttons work in forms and as links (href support).

Notes

  • Dark mode and RTL support will come in a future PR.
  • Icon/avatar integration is placeholder for now.
  • Event tracking hooks can be added later if needed.
# Add Button Component System ## Overview This PR introduces a responsive, accessible **Button component system** for CommunityRule. It supports six variants, five sizes, and full interactive states, all implemented with Tailwind CSS and design tokens. The component is WCAG 2.1 AA compliant and optimized for responsive layouts. ## Changes - Implemented **six variants**: default, secondary, primary, outlined, dark, inverse - Added **five sizes**: xsmall → small → medium → large → xlarge - Built **interactive states**: default, hover, focus, active, disabled - Integrated with **design tokens** for colors, spacing, typography, border radius - Added **smooth transitions** (500ms, scale ±2%) - Verified **accessibility**: semantic HTML, ARIA support, focus indicators - Created **Storybook stories** for variants, sizes, and states ## Screenshots <img width="548" alt="Screenshot 2025-08-14 at 2.51.15 PM.png" src="attachments/d4a1d678-1deb-4b5c-80c1-e4abcb60558a"><img width="548" alt="Screenshot 2025-08-14 at 2.50.55 PM.png" src="attachments/dd294926-052e-4868-b248-9ef2aed47d84"> ## How to Test 1. Run Storybook and open the `Button` stories. 2. Verify: - All six variants render correctly - Sizes scale consistently across breakpoints - Interactive states (hover, focus, active, disabled) display as expected - Buttons are accessible via keyboard (Tab, Enter, Space) - Contrast ratios meet design system standards 3. Confirm buttons work in forms and as links (`href` support). ## Notes - Dark mode and RTL support will come in a future PR. - Icon/avatar integration is placeholder for now. - Event tracking hooks can be added later if needed.
Screenshot 2025-08-14 at 2.51.15 PM.png
23 KiB
Screenshot 2025-08-14 at 2.50.55 PM.png
30 KiB
an.di merged commit 9952247e3e into main 2025-08-15 01:12:21 +00:00
an.di deleted branch adilallo/ButtonComponent 2025-08-15 01:12:40 +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#5
Delete Branch "adilallo/ButtonComponent"

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?