fix(button): size styles use min-height so theme paddingBlock overrides can grow the button#3470
fix(button): size styles use min-height so theme paddingBlock overrides can grow the button#3470Arman-Luthra wants to merge 2 commits into
Conversation
…es can grow the button (facebook#3379)
|
@Arman-Luthra is attempting to deploy a commit to the Meta Open Source Team on Vercel. A member of the Team first needs to authorize it. |
|
Hi @Arman-Luthra! Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks! |
summary
fixes #3379.
button size styles set a fixed
height(28/32/36px). underbox-sizing: border-boxthat fixed height absorbs anypaddingBlocka theme adds, so the natural way to theme a taller button, apaddingBlockoverride, silently does nothing.this pr lets padding drive the height. each size now sets
minHeight: --size-element-*instead ofheight, andpaddingBlockmoves from the base styles (uniform 8px) into the size styles, paired per size so default geometry is unchanged: 20px label line-height + 2×4px (sm) / 2×6px (md) / 2×8px (lg) = 28/32/36px.minHeightis already the sizing pattern in typeahead, tokenizer, and toolbar, with the same--size-element-*tokens.behavior
'size:lg': {paddingBlock: '10px'}grows the button to 40px, where before it stayed at 36px with no signal.aspect-ratio: 1/1transfers the min-height to a min-width per css sizing rules, verified in chromium at 28/32/36px squares.tests
two tests are new. one asserts each size resolves through
min-heightwith no fixedheight, the regression test for #3379. the other asserts the per-sizepaddingBlockpairing that keeps default geometry. the full suite passes.