Keep a button at its label's width in a stack and a form
<x-stack> stretches its children across by default and <x-form> is a one-track grid, so a button written directly in either drew as a full-width pill. M3 keeps a button's width "dynamic to fit label" and says not to "stretch buttons into long flat shapes on large windows". A button there now sits at the start edge at its own width; a stack aligned start, centre or end is untouched, and an application's own width still wins (a cap on the button itself was rejected for exactly that: it would have limited an app's inline-size, which CascadeTest guards). Chromium test in both directions, failing without the rules. Decided with the user (plan step 46). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5
parent
f5f040516e
commit
92d3d761f3
@@ -4,7 +4,8 @@
|
||||
|
||||
`gap` is a spacing token's name, `space25` … `space900` (docs/reference/m3/styles-supplement.md
|
||||
§ Spacing), and none when left out or unknown. `align` places the children across the stack:
|
||||
`stretch` (the default), `start`, `center` or `end`.
|
||||
`stretch` (the default), `start`, `center` or `end`. A button keeps its label's width even
|
||||
when the rest stretch, as M3 asks.
|
||||
|
||||
M3's layout has no arrangement component inside a pane — its "column" is a grid column — so
|
||||
this is the package's neutral one, beside `<x-row>` and `<x-grid>`. It takes `as`,
|
||||
|
||||
Reference in New Issue
Block a user