2.7 KiB
Button Press Feedback Implementation Plan
For Claude: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
Goal: Give every enabled button immediate, consistent click acknowledgment while preserving a non-kinetic reduced-motion alternative.
Architecture: Define the interaction once in the global Tailwind base layer so both Base UI and native buttons inherit it. Remove the shared button's older translation-only active state to avoid compounded transforms. Verify the CSS contract first, then exercise the real interaction in Playwright.
Tech Stack: React 18, Tailwind CSS 3, Vitest, Playwright CLI.
Task 1: Specify the global press contract
Files:
- Create:
frontend/src/button-press-feedback.test.ts - Test:
frontend/src/button-press-feedback.test.ts
Step 1: Write the failing test
Read src/index.css and assert the enabled-button active selector, scale(0.97), 140 ms duration, ease-out-quint curve, disabled exclusion, and reduced-motion transform override. Assert that components/ui/button.tsx no longer contains the legacy translation active class.
Step 2: Run test to verify it fails
Run: npx vitest run src/button-press-feedback.test.ts
Expected: FAIL because the global press rules do not exist and the shared button still uses translation.
Task 2: Implement the press feedback
Files:
- Modify:
frontend/src/index.css - Modify:
frontend/src/components/ui/button.tsx - Test:
frontend/src/button-press-feedback.test.ts
Step 1: Add the minimal CSS
Add a global enabled-button transition and active state using only transform, filter, and shadow. Add a prefers-reduced-motion override that removes scale while preserving non-kinetic contrast feedback.
Step 2: Remove the legacy shared-button translation
Delete active:not-aria-[haspopup]:translate-y-px from the shared variant base string.
Step 3: Run the focused test
Run: npx vitest run src/button-press-feedback.test.ts
Expected: PASS.
Task 3: Verify regressions and real-browser behavior
Files:
- Verify:
frontend/src/index.css - Verify:
frontend/src/components/ui/button.tsx
Step 1: Run frontend verification
Run: npx vitest run
Run: npx tsc -b
Expected: all tests pass and typecheck exits 0.
Step 2: Verify in Playwright
Open http://localhost:5173, hold pointer-down on an enabled button, and inspect its computed transform and filter before release. Repeat with reduced motion emulation and confirm transform remains none while contrast feedback remains.
Step 3: Review the final diff
Run: git diff --check and inspect git diff --stat.
Expected: no whitespace errors and only the intended product/design, CSS, component, and test files changed.