Bound a text field's width from medium
M3 § Text Fields, Behaviour: compact may let a field span full width, but medium and expanded must bound it — "never let it span the full width of a large screen". Nothing in the package capped a field (plan step 24, audit docs/audits/m3-alignment/inputs.md § Missing). From `medium` a field now stops at 40rem — the site names no number, so the header says where this one comes from — which a `max-w-*` class beats and `full` takes off. The search bar already carries M3's own 720px. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
co-authored by
Claude Fable 5.1
parent
c8c2d2e13e
commit
72a3e22fbc
@@ -170,6 +170,16 @@ it('shows no counter without `counter` or without a maximum to count against', f
|
||||
->and((string) $this->blade('<x-textarea label="Note" counter />'))->not->toContain('field-counter');
|
||||
});
|
||||
|
||||
it('bounds a field\'s width from medium unless it is told to fill its pane', function () {
|
||||
expect(file_get_contents(__DIR__.'/../../../resources/css/components/field.css'))
|
||||
->toContain('@media (width >= 37.5rem)')
|
||||
->toMatch('/\.field:not\(\[data-full\]\)\s*\{\s*max-width: 40rem;/');
|
||||
|
||||
expect((string) $this->blade('<x-input label="Share name" full />'))->toContain('data-full')
|
||||
->and((string) $this->blade('<x-textarea label="Message" full />'))->toContain('data-full')
|
||||
->and((string) $this->blade('<x-input label="Share name" />'))->not->toContain('data-full');
|
||||
});
|
||||
|
||||
it('lays out a form with its actions under an optional divider', function () {
|
||||
$html = (string) $this->blade(<<<'BLADE'
|
||||
<x-form wire:submit="save" separator>
|
||||
|
||||
Reference in New Issue
Block a user