Skip to content

fix(button): align list-variant label with icon line-box#520

Merged
kelsos merged 1 commit intorotki:mainfrom
kelsos:fix/button-list-leading
Apr 27, 2026
Merged

fix(button): align list-variant label with icon line-box#520
kelsos merged 1 commit intorotki:mainfrom
kelsos:fix/button-list-leading

Conversation

@kelsos
Copy link
Copy Markdown
Member

@kelsos kelsos commented Apr 27, 2026

Summary

  • Tighten the variant=\"list\" button label to leading-[1.125rem] so its line-box matches the md icon (--rui-icon-size: 1.125rem). Without this, the 20px label line-box (from leading-5 on the root) is flex-centered against the 18px icon box and the baseline-aligned glyphs visually drift above the icon's optical center — most readable in tight list rows like the rotki UserDropdown menu.
  • Add a list-variant section to the example app (size grid with prepend-icon rows mirroring the menu pattern).
  • Add an e2e assertion that the label line-height collapses to 18px and that the label/icon centers line up.

Closes #515

Test plan

  • pnpm -w run typecheck
  • pnpm -w run lint
  • pnpm test:run RuiButton.spec.ts — 21 pass
  • pnpm test:e2e button.spec.ts — 2 pass (existing + new list-variant alignment test)
  • Visual check in the example app (/buttons) — list-variant section, every size, label sits centered with the prepend icon

Tighten the list-variant label to `leading-[1.125rem]` so its line-box
matches the md icon (`--rui-icon-size: 1.125rem`). Without this, the
20px label line-box (from `leading-5` on the root) is flex-centered
against the 18px icon box and the baseline-aligned glyphs visually
drift above the icon's optical center — most readable in tight list
rows like the rotki UserDropdown menu.

Adds a list-variant section to the example app and an e2e assertion
that the label and icon centers line up.

Closes rotki#515
@kelsos kelsos requested a review from a team as a code owner April 27, 2026 19:47
@codecov-commenter
Copy link
Copy Markdown

codecov-commenter commented Apr 27, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 84.87%. Comparing base (2c15f1c) to head (3b153a3).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main     #520   +/-   ##
=======================================
  Coverage   84.87%   84.87%           
=======================================
  Files         143      143           
  Lines        5209     5209           
  Branches     1553     1553           
=======================================
  Hits         4421     4421           
  Misses        788      788           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@kelsos kelsos merged commit 3b153a3 into rotki:main Apr 27, 2026
5 checks passed
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.

RuiButton variant="list": label text sits in the upper portion of the icon due to line-height / box-center mismatch

2 participants