Skip to content

refactor(ui): drop leftover button class overrides (phase C) - #90

Merged
ilramdhan merged 2 commits into
mainfrom
refactor/button-overrides
Oct 8, 2026
Merged

ilramdhan merged 2 commits into
mainfrom
refactor/button-overrides

Conversation

@ilramdhan

@ilramdhan ilramdhan commented Oct 8, 2026 •

Copy link
Copy Markdown
Owner

Summary

Phase C of the button system (after #87 and #88). Some Button/IconButton call sites still overrode height, radius, padding or colours through className, which bypasses the 44px touch sizing and the one-look-per-role rule. This PR removes those overrides and picks the right variant/size instead.

  • QuickTask submit: size="lg" instead of h-11 (the input is h-10 coarse:h-11 so the row stays aligned and still grows to 44px on touch).
  • Archive purge: variant="danger-ghost" instead of tertiary + text-destructive hover:text-destructive.
  • Block-type picker (BlockEditor "Turn into"): active type uses variant="secondary" instead of a bg-accent override; px-2 dropped.
  • New size icon-xs (16px, round, tap-area) for the tag chip remover in TagInput, replacing size-4 rounded-full hover:bg-background/70 [&_svg]:size-3.
  • link buttons now drop side padding via a compoundVariants entry (sm/md/lg), so call sites no longer need px-0.
  • Removed padding / hover-colour overrides in Kanban column add button, DemoBanner dismiss (size-11 + amber hover), CommandMenu mode toggle, FillFromText, BlockEditor "add block", TaskFilters reset, TaskViews "show done", calendar "+N more", note properties, app shell (sign out, capture dialog links) and login (back link, forgot password).
  • AGENTS.md: new bullet under the Buttons rule: don't override height/colour/radius/padding through className; it is for layout only (plus text-muted-foreground to quieten a tertiary/link action).

Remaining className on buttons is layout (w-full, ml-auto, shrink-0, justify-start, opacity reveal) or text-muted-foreground / font-normal, which the new rule allows.

Closes #

Type of change

  • feat – new feature
  • fix – bug fix
  • refactor / perf – no behavior change / performance
  • docs / test / chore / ci
  • Breaking change (describe the migration path below)

How to test

  1. Tasks list: the quick-add row (input + "Buat" button) is the same height; on a touch device / mobile emulation both are 44px.
  2. Kanban: column "+" button still hovers with the tertiary accent.
  3. Notes: add tags in the note header, the × on each tag chip is a small round button; the block handle "Turn into" menu highlights the current type.
  4. Archive → Trash: the purge icon is red (danger-ghost) with a red-tinted hover.
  5. Demo mode banner: dismiss button is 36px (44px on touch) at the top-right.
  6. Login: back link and "Lupa kata sandi?" link align with surrounding text; app shell capture dialog links align left.
  7. Calendar month view: "+N more" link still fits the cell.

Screenshots / recordings

Visual deltas are small (padding/hover tints); no screenshots captured from this agent session.

Checklist

  • bun run lint, bunx tsc --noEmit and bun run test pass locally
  • bun run build passes (required for routing, server function or config changes)
  • Follows the architecture rules in AGENTS.md (data hooks in src/lib/data.ts, task edits via TaskDialogProvider/useTaskActions, PageContainer, soft delete, …)
  • Database changes: new migration in drizzle/migrations/ registered in meta/_journal.json, RLS enabled with policies + grants, src/integrations/supabase/types.ts regenerated (n/a)
  • No secrets, tokens or personal data in code, logs, fixtures or screenshots
  • Server-only secrets stay in *.server.ts / server functions and are never exposed via VITE_*
  • Accessibility considered: keyboard reachable, labelled controls, visible focus, sufficient contrast (see ACCESSIBILITY.md)
  • UI strings added for both Indonesian and English where the i18n layer applies (n/a, no new strings)
  • PR title follows Conventional Commits (it drives the version bump and CHANGELOG.md; don't edit the changelog by hand)
  • Docs updated (README.md, AGENTS.md if an architecture rule changed)
  • No force-push / history rewrite of commits already on main (keep published history intact)

Notes for reviewers

  • Local checks: eslint (0 errors), prettier --check, tsc --noEmit, vitest (all pass, 2 new button tests), vite build, check-migrations, check-n8n.
  • The link compound variant changes every variant="link" button with sm/md/lg to px-0; all existing ones already used px-0 or size="inline".
  • icon-xs is a new size (the tag remover was the only call site needing it). The existing button.test.tsx case that overrides h-12 is kept: tailwind-merge still allows overrides, the rule is a convention.
  • Trade-off: the block-type picker's active item now uses the secondary look (border + background) instead of a plain accent fill.

🤖 Generated with Claude Code

Phase A/B moved every call site onto the button system, but some
buttons still overrode height, radius, padding or colours through
className, which bypasses the 44px touch sizing and the per-role look.

- QuickTask submit uses size="lg" instead of h-11 (input matches it).
- Archive purge uses variant="danger-ghost" instead of text-destructive.
- Block-type picker marks the active type with variant="secondary"
  instead of a bg-accent override.
- New icon-xs size (16px round, tap-area) for the tag chip remover.
- link buttons drop side padding via a compound variant, so call sites
  no longer need px-0.
- Removed padding/hover-colour overrides in Kanban, DemoBanner,
  CommandMenu, FillFromText, BlockEditor, TaskFilters, calendar, notes,
  the app shell and login.
- AGENTS.md: className on Button is for layout only.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@vercel

vercel Bot commented Oct 8, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
demo-2ndbrain.ilramdhan.dev Ready Ready Preview Oct 8, 2026 8:13am UTC
second-brain Ready Ready Preview Oct 8, 2026 8:13am UTC

Asserts that link buttons drop side padding while keeping their height
and tap area, and that the new icon-xs size stays round with a 44px
hit area on touch screens.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@ilramdhan
ilramdhan marked this pull request as ready for review October 8, 2026 08:13
Copilot AI balanced review requested due to automatic review settings October 8, 2026 08:13
@chatgpt-codex-connector

Copy link
Copy Markdown

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@ilramdhan
ilramdhan merged commit 7bb7545 into main Oct 8, 2026
20 checks passed
@ilramdhan
ilramdhan deleted the refactor/button-overrides branch October 8, 2026 08:15

This branch was successfully deployed

2 active deployments
Preview – second-brain — 6f8f5777 Deployed Oct 8, 2026 by vercel[bot]
Preview – demo-2ndbrain.ilramdhan.dev — 6f8f5777 Deployed Oct 8, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants