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:
Andreas Reinhold / reini
2026-09-15 12:56:45 +02:00
co-authored by Claude Opus 5
parent f5f040516e
commit 92d3d761f3
8 changed files with 58 additions and 5 deletions
+6
View File
@@ -297,3 +297,9 @@ it('draws the file picker\'s button from its own stylesheet', function () {
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components/field.css'))->not->toContain("[type='file']")
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/file.css';");
});
it('keeps a button written among a form\'s fields at its label\'s width', function () {
// M3: keep a button's width "dynamic to fit label"; don't "stretch buttons into long flat shapes".
expect(ComponentStylesheet::read('form')->declarations('[data-md-form] > [data-md-button]'))
->toBe(['justify-self' => 'start']);
});
+7
View File
@@ -41,3 +41,10 @@ it('draws the stack from a stylesheet in the layout layer, imported by all.css',
->toContain(":where([data-md-stack]) {\n --md-gap: 0px;")
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './layout/stack.css';");
});
it('keeps a button at its label\'s width while the stack stretches the rest', function () {
// M3: keep a button's width "dynamic to fit label"; don't "stretch buttons into long flat shapes".
$css = (string) file_get_contents(__DIR__.'/../../../resources/css/layout/stack.css');
expect($css)->toContain("[data-md-stack]:is(:not([data-md-align]), [data-md-align='stretch']) > [data-md-button] {\n align-self: start;\n }");
});