Adjust button hover #61

Merged
an.di merged 1 commits from adilallo/fix/CR-123-button-hover into main 2026-08-15 17:15:32 +00:00
Owner

Tone down hover scale on buttons and interactive surfaces

Overview

Hover states were enlarging labels because the whole control scaled (hover:scale-[1.02]), including on “Send me the magic link” and “Learn how CommunityRule works.” This implements CR-123: color/border/opacity/shadow on hover and focus; scale only on press.

Changes

  • Button: drop hover/focus scale and the filled hover-outline ramp; keep color/border hover and active:scale-[0.98]
  • Same no-hover-scale rule on MenuItem, Chip, Incrementer, Mini/Icon cards, article thumbnails, and use-cases tiles
  • CommunityRule logo: mark scales on hover; wordmark does not
  • Logo wall: no hover scale or opacity on partner logos
  • Document the interaction rule in docs/figma-component-registry.md
  • Tests: Button, Logo, LogoWall

Also in this branch (not CR-123): custom-method wizard drag-and-drop polish, and ops-deploy copy that the legacy archive is repo-only.

How to Test

  1. npx vitest run tests/components/Button.test.tsx tests/components/Logo.test.tsx tests/unit/LogoWall.test.jsx
  2. Storybook → Components/Buttons/Button — hover, focus, press; label size must not change on hover
  3. /login — “Send me the magic link”; home hero CTA — same
  4. Header CommunityRule logo — mark moves, wordmark does not
  5. Home partner logo wall — no hover motion
  6. Press feedback (active scale) still present on buttons

Notes

  • Logo wall fade-in on mount is unchanged
  • Footer social-icon scale is unchanged (CR-121)
  • Typography token migration for Button stays on CR-24
# Tone down hover scale on buttons and interactive surfaces ## Overview Hover states were enlarging labels because the whole control scaled (`hover:scale-[1.02]`), including on “Send me the magic link” and “Learn how CommunityRule works.” This implements [CR-123](https://linear.app/community-rule/issue/CR-123): color/border/opacity/shadow on hover and focus; scale only on press. ## Changes - **`Button`:** drop hover/focus scale and the filled hover-outline ramp; keep color/border hover and `active:scale-[0.98]` - **Same no-hover-scale rule** on `MenuItem`, `Chip`, `Incrementer`, `Mini`/`Icon` cards, article thumbnails, and use-cases tiles - **CommunityRule logo:** mark scales on hover; wordmark does not - **Logo wall:** no hover scale or opacity on partner logos - Document the interaction rule in `docs/figma-component-registry.md` - Tests: `Button`, `Logo`, `LogoWall` Also in this branch (not CR-123): custom-method wizard drag-and-drop polish, and ops-deploy copy that the legacy archive is repo-only. ## How to Test 1. `npx vitest run tests/components/Button.test.tsx tests/components/Logo.test.tsx tests/unit/LogoWall.test.jsx` 2. Storybook → Components/Buttons/Button — hover, focus, press; label size must not change on hover 3. `/login` — “Send me the magic link”; home hero CTA — same 4. Header CommunityRule logo — mark moves, wordmark does not 5. Home partner logo wall — no hover motion 6. Press feedback (`active` scale) still present on buttons ## Notes - Logo wall fade-in on mount is unchanged - Footer social-icon scale is unchanged (CR-121) - Typography token migration for `Button` stays on [CR-24](https://linear.app/community-rule/issue/CR-24)
an.di added 1 commit 2026-08-15 17:15:11 +00:00
an.di self-assigned this 2026-08-15 17:15:17 +00:00
an.di merged commit f6752dd7f3 into main 2026-08-15 17:15:32 +00:00
an.di deleted branch adilallo/fix/CR-123-button-hover 2026-08-15 17:15:32 +00:00
Sign in to join this conversation.
No Reviewers
No labels
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: CommunityRule/community-rule#61