Button Standardization — Project Status

Button Standardization — Project Status

Tracks progress migrating buttons from local shadcn Button to the canary Button from @arda-cards/design-system. See the button audit for the full inventory and the button migration guide for the per-file checklist.

Phase 1 — Complete

Phase 1 established the design system components, frontend infrastructure, and migrated the first 24 buttons as a proof-of-concept across auth pages and the items page.

Assignee: Sebrand Warren (@nail60)

Design system (ux-prototype)

PR #74 — merged 2026-05-07, published as stable v5.2.1.

• New atoms: Toggle, ToggleGroup, ButtonGroup, SplitButton
• Button enhancements: tooltip, tooltipSide, tooltipDelay, loading as boolean | string, loadingPosition, cursor-pointer, icon-lg fixed to 40px
• IconButton deprecated — use Button size="icon" + tooltip
• Exports: DropdownMenu primitives and TooltipProvider from canary barrel
• Tokens: --primary fixed to #FC5A29 (hex, not oklch), hover ramp recalculated, --secondary-light added
• ColorPicker: displayLabel mode with searchable dropdown, trigger height aligned to h-9
• Stories: Streamlined to Showcase + Playground pattern with MDX docs

Frontend (arda-frontend-app)

PR #733 — merged 2026-05-12.

Migrated buttons (24 across 7 files)

Section	File	Buttons	Notes
Sign In	src/app/signin/page.tsx	2	Primary + loading prop
Sign Up	src/app/signup/page.tsx	1	Primary + loading prop
Reset Password	src/app/reset-password/page.tsx	1	Primary + loading prop
Reset Password (new)	src/app/reset-password/new/client.tsx	1	Primary + loading prop
Reset Password (email sent)	src/app/reset-password/email-sent/page.tsx	1	Primary + loading prop
Items Grid	src/app/items/page.tsx	5	SplitButton, ButtonGroup, outline toolbar, Ctrl+Alt+N shortcut
Item Detail Panel	src/components/items/ItemDetailsPanel.tsx	13	Ghost toolbar, loading props, icon buttons, card nav

Infrastructure changes (already on main)

These are done — no need to repeat for Phase 2:

• globals.css: Imports @arda-cards/design-system/styles/tokens.css after Tailwind, adds hover/active Tailwind color mappings, pins --primary to #FC5A29
• layout.tsx: DesignSystemTooltipProvider wraps the app at root
• package.json: @arda-cards/design-system at stable ^5.2.1
• __mocks__/@arda-cards/design-system/canary.ts: Jest mock for canary components — update this when importing new canary components
• E2E page object: detailsCloseButton uses aria-label locator (not SVG class matching)

Additional fixes included in PR #733

• Keyboard shortcut focus guard: skips inputs/textareas and checks AltGraph to avoid European keyboard collisions
• Button mock disabled prop: correctly interacts with loading
• E2E flaky test fix: stabilized panel-close in items grid interactions
• Nightly E2E workflow: removed duplicate workflow_dispatch key

Phase 2 — Remaining Work

Assignee: Jennifer Warren (@danmerb)

49 buttons across 25 files. Most are low complexity (1–2 straightforward replacements). The scan views are the largest effort.

Section	File	Buttons	Complexity
Scan (Desktop)	components/scan/DesktopScanView.tsx	8	High — large file
Scan (Mobile)	components/scan/MobileScanView.tsx	8	High — large file
Company Settings	app/company-settings/page.tsx	6	Medium
Manage Cards Panel	components/items/ManageCardsPanel.tsx	5	Medium
Mobile Device Check	app/mobile-device-check/page.tsx	3	Low
Unsaved Changes Modal	components/common/UnsavedChangesModal.tsx	3	Low
Delete Confirmation Modal	components/common/DeleteConfirmationModal.tsx	2	Low
Add Cards Modal	components/items/AddCardsModal.tsx	2	Low
Kanban History Modal	components/items/KanbanHistoryModal.tsx	2	Low
Order Queue	app/order-queue/page.tsx	2	Low
Card Actions	components/scan/CardActions.tsx	2	Low
Account Section	components/settings/AccountSection.tsx	2	Low
Email Panel	components/EmailPanel.tsx	2	Low
Item Form Panel	components/items/ItemFormPanel.tsx	1	Low
Cards Preview Modal	components/items/CardsPreviewModalIndividual.tsx	1	Low
Order Queue Toast	components/ui/order-queue-toast.tsx	1	Low
Receiving	app/receiving/page.tsx	1	Low
Scan Modal	components/scan/ScanModal.tsx	1	Low
Initial Scan Modal	components/scan/InitialScanModal.tsx	1	Low
Card Preview Modal	components/scan/CardPreviewModal.tsx	1	Low
Kanban Card Detail	app/kanban/cards/[cardId]/page.tsx	1	Low
Settings Page	app/settings/page.tsx	1	Low
Appearance Section	components/settings/AppearanceSection.tsx	1	Low
Change Password	components/settings/ChangePasswordSection.tsx	1	Low
Display Section	components/settings/DisplaySection.tsx	1	Low
Notifications Section	components/settings/NotificationsSection.tsx	1	Low
Note Modal	components/common/NoteModal.tsx	1	Low
Tutorials Section	components/homepage/TutorialsSection.tsx	1	Low
Account Profile	app/account-profile/page.tsx	1	Low
Terms Modal	components/ui/terms-modal.tsx	1	Low
App Sidebar Toggle	components/app-sidebar.tsx	1	Low
Truncated Link	components/common/TruncatedLink.tsx	1	Low

Dashboard is skipped (not live).

How to continue

1. Follow the button migration guide — it has a per-file checklist, variant mapping table, and props reference
2. Work one file at a time, verify in the browser before moving on
3. The design system is already at stable v5.2.1 on main — no local linking needed unless you are also changing design system components
4. When adding new canary imports (e.g., DropdownMenu), update the Jest mock at __mocks__/@arda-cards/design-system/canary.ts — see the reference doc for mock patterns
5. Commit after each logical group (e.g., all modals, all settings pages, all scan views)
6. Suggested order: start with the low-complexity modals and settings to build familiarity, then tackle scan views and company settings last

Related

• Button audit — full inventory of buttons
• Button migration guide — per-file checklist
• Design system integration reference — token setup, Jest mocks, auth
• Using the Design System — Storybook docs

---

Copyright: (c) Arda Systems 2025-2026, All rights reserved