feat: use caption-1 text for the small size of Button, MenuItem, Tabs and form fields - #656
Merged
Merged
Conversation
… and form fields Button, MenuItem, Tabs, TextField, Select and PinField rendered body-2 text in their small size, matching the medium size. They now use caption-1, following Checkbox and Radio which already do that. caption-1 has a smaller line height, so the components would shrink. Their vertical padding grows by half of the line height difference on each side to keep the size unchanged. The difference is derived from the theme tokens via --rs-caption-1-line-height-offset, so themes where both line heights match resolve it to 0 and are unaffected. Button min-width was expressed through the horizontal padding, which relied on it being exactly one unit larger than the vertical one. It now reuses the same value as min-height so icon-only buttons stay square. PinField and Tabs size their items independently of the text, so they only switch the Text variant. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UVFEsPkaDMhhb3CVc1zWkE
size-limit report 📦
|
…nent Replaces the --rs-caption-1-line-height-offset global variable with the same calc written directly in each small size block, so no new theme-level variable is introduced. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UVFEsPkaDMhhb3CVc1zWkE
blvdmitry
changed the title
blvdmitry
marked this pull request as ready for review
August 15, 2026 22:57
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Button,MenuItem,Tabs,TextField,SelectandPinFieldrenderedbody-2text in theirsmallsize — the same variant asmedium. They now rendercaption-1, matchingCheckboxandRadio, which already do.caption-1has a smaller line height, so the components would have shrunk. Their vertical padding grows by half of the line height difference on each side, keeping the rendered size identical:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2), deriving the compensation from the theme rather than hardcoding it. In thefigmatheme, where both line heights are already1rem, it resolves to0and nothing changes.Buttonmin-widthwas written asline-height − x1 * 2 + p-h * 2, which only equalledmin-heightbecause horizontal padding happened to be exactly one unit larger than vertical padding at every size. That no longer holds forsmall, so both dimensions now read the same--rs-button-min-sizevalue and icon-only buttons stay square.TabsandPinFieldsize their items independently of the text, so they only switch theTextvariant.Also bumped
PinField'ssmallsize offbody-1, which was larger than thebody-2used bymedium.TextAreais not included — itssizeprop ismedium | large | xlarge, so it has no small size to change.Related Issue
N/A
Screenshots / Recordings
Measured in Chromium against the built CSS, comparing the branch to
canary(slate theme,smallrows are the ones that changed):Heights are unchanged everywhere; only font size and intrinsic width shrink. The same comparison against the
figmatheme is byte-identical before and after, since itsbody-2andcaption-1line heights match.Notes for Reviewers
x1-5on purpose — hardcoding it would grow small components by 4px in any theme where the two line heights are already equal.