Add M3 text fields, selects and selection controls

Outlined and filled text fields (input, password, auto-growing textarea, native select with the customizable select menu, file), checkbox with an indeterminate state, radio buttons, the M3 switch and form, ported from ReStride and extended. The first half of Phase 6. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
2026-09-13 07:53:14 +02:00
parent ad724662ca
commit 7f92f1cb29
24 changed files with 2296 additions and 1 deletions
@@ -0,0 +1,149 @@
+<?php
+
+it('draws an outlined field with a notched label unless told otherwise', function () {
+    $html = (string) $this->blade('<x-input label="Share name" />');
+
+    expect($html)
+        ->toContain('data-variant="outlined"')
+        ->toContain('<legend><span>Share name</span></legend>')
+        ->toMatch('/<label for="(field-[0-9a-f]{12})" class="field-label">Share name<\/label>/')
+        ->toContain('placeholder=" "')
+        ->toContain('class="field-control"');
+});
+
+it('draws a filled field on request, or by the application\'s default', function () {
+    expect((string) $this->blade('<x-input label="Name" variant="filled" />'))->toContain('data-variant="filled"');
+
+    config(['livewire-material.fields.variant' => 'filled']);
+
+    expect((string) $this->blade('<x-input label="Name" />'))->toContain('data-variant="filled"')
+        ->and((string) $this->blade('<x-input label="Name" variant="outlined" />'))->toContain('data-variant="outlined"')
+        ->and((string) $this->blade('<x-input label="Name" variant="glass" />'))->toContain('data-variant="filled"');
+});
+
+it('ties the label, the hint and the control together', function () {
+    $html = (string) $this->blade('<x-input id="share-name" label="Share name" hint="Recipients see this name" wire:model="name" />');
+
+    expect($html)
+        ->toContain('<label for="share-name" class="field-label">')
+        ->toContain('id="share-name"')
+        ->toContain('aria-describedby="share-name-support"')
+        ->toContain('<p id="share-name-support" class="field-support">Recipients see this name</p>')
+        ->toContain('wire:model="name"')
+        ->not->toContain('aria-invalid');
+});
+
+it('replaces the hint with the errors for its model', function () {
+    $html = (string) $this->withViewErrors(['email' => ['Enter a valid email address.']])
+        ->blade('<x-input id="email" label="Email" hint="We never share it" wire:model.live="email" />');
+
+    expect($html)
+        ->toContain('data-invalid')
+        ->toContain('aria-invalid="true"')
+        ->toContain('aria-describedby="email-support"')
+        ->toContain('Enter a valid email address.')
+        ->not->toContain('We never share it');
+});
+
+it('puts icons, affixes and the size on the field, and every other attribute on the input', function () {
+    $html = (string) $this->blade('<x-input label="Price" icon="payments" icon-right="info" prefix="CHF" suffix="per month" size="sm" type="number" min="0" class="w-40" mono readonly />');
+
+    expect($html)
+        ->toContain('class="field w-40"')
+        ->toContain('data-size="sm"')
+        ->toContain('data-mono')
+        ->toContain('data-readonly')
+        ->toContain('<span class="field-affix">CHF</span>')
+        ->toContain('<span class="field-affix">per month</span>')
+        ->toContain('type="number"')
+        ->toContain('min="0"')
+        ->and(substr_count($html, '<svg'))->toBe(2);
+});
+
+it('offers to clear and to copy the value', function () {
+    $html = (string) $this->blade('<x-input label="Link" clearable copyable />');
+
+    expect($html)
+        ->toContain('data-field-clear')
+        ->toContain('aria-label="Clear"')
+        ->toContain('data-field-copy')
+        ->toContain('navigator.clipboard.writeText')
+        ->toContain('aria-label="Copy"');
+});
+
+it('lets a password be shown and hidden again', function () {
+    $html = (string) $this->blade('<x-password label="Password" autocomplete="current-password" type="text" />');
+
+    expect($html)
+        ->toContain('type="password"')
+        ->not->toContain('type="text"')
+        ->toContain('x-bind:type="shown ? \'text\' : \'password\'"')
+        ->toContain('data-field-reveal')
+        ->toContain('aria-pressed="false"')
+        ->toContain('autocomplete="current-password"');
+});
+
+it('grows a textarea from its rows up to its maximum, or leaves it to be resized', function () {
+    expect((string) $this->blade('<x-textarea label="Message" rows="2" max-rows="6" />'))
+        ->toContain('rows="2"')
+        ->toContain('data-autogrow')
+        ->toContain('--field-rows: 2;')
+        ->toContain('--field-max-rows: 6;')
+        ->and((string) $this->blade('<x-textarea label="Message" :autogrow="false" />'))
+        ->toContain('rows="3"')
+        ->not->toContain('data-autogrow');
+});
+
+it('draws a native select whose label always floats', function () {
+    $html = (string) $this->blade(<<<'BLADE'
+        <x-select label="Expires" wire:model="hours" placeholder="Choose…" option-value="hours" option-label="label" :options="[
+            ['hours' => 1, 'label' => '1 hour'],
+            ['hours' => 720, 'label' => '30 days', 'disabled' => true],
+        ]" />
+        BLADE);
+
+    expect($html)
+        ->toContain('data-floated')
+        ->toContain('<select')
+        ->toContain('wire:model="hours"')
+        ->toContain('<option value="">Choose…</option>')
+        ->toContain('<option value="1" >1 hour</option>')
+        ->toContain('<option value="720" disabled>30 days</option>')
+        ->toContain('field-arrow');
+});
+
+it('takes a select\'s options from its slot as well', function () {
+    expect((string) $this->blade('<x-select label="Size"><option value="s">Small</option></x-select>'))
+        ->toContain('<option value="s">Small</option>');
+});
+
+it('collects a file field\'s own errors and each file\'s', function () {
+    $html = (string) $this->withViewErrors([
+        'photos' => ['Choose at most 10 photos.'],
+        'photos.0' => ['photo.jpg is larger than 2 GB.'],
+    ])->blade('<x-file label="Photos" wire:model="photos" multiple />');
+
+    expect($html)
+        ->toContain('type="file"')
+        ->toContain('multiple')
+        ->toContain('data-floated')
+        ->toContain('Choose at most 10 photos.')
+        ->toContain('photo.jpg is larger than 2 GB.');
+});
+
+it('lays out a form with its actions under an optional divider', function () {
+    $html = (string) $this->blade(<<<'BLADE'
+        <x-form wire:submit="save" separator>
+            <x-input label="Name" />
+            <x-slot:actions class="justify-between"><button>Save</button></x-slot:actions>
+        </x-form>
+        BLADE);
+
+    expect($html)
+        ->toContain('<form class="grid grid-cols-1 auto-rows-min gap-4" wire:submit="save">')
+        ->toContain('role="separator"')
+        ->toContain('justify-between')
+        ->toContain('<button>Save</button>')
+        ->and((string) $this->blade('<x-form><x-slot:actions><button>Save</button></x-slot:actions></x-form>'))
+        ->not->toContain('role="separator"');
+});
@@ -0,0 +1,92 @@
+<?php
+
+it('draws a checkbox whose row is its label', function () {
+    $html = (string) $this->blade('<x-checkbox id="notify" label="Notify me" hint="On every download" wire:model="notify" class="mt-2" />');
+
+    expect($html)
+        ->toContain('<div class="min-w-0 mt-2">')
+        ->toContain('<label for="notify" data-selection')
+        ->toContain('data-checkbox')
+        ->toContain('type="checkbox"')
+        ->toContain('wire:model="notify"')
+        ->toContain('data-check')
+        ->toContain('data-mixed')
+        ->toContain('Notify me')
+        ->toContain('On every download')
+        ->not->toContain('data-indeterminate');
+});
+
+it('marks a checkbox that is partly ticked', function () {
+    expect((string) $this->blade('<x-checkbox label="Select all" indeterminate />'))->toContain('data-indeterminate');
+});
+
+it('puts a checkbox at the end of its row on request', function () {
+    expect((string) $this->blade('<x-checkbox label="Show" right />'))->toContain('flex-row-reverse justify-between');
+});
+
+it('shows a checkbox\'s errors', function () {
+    $html = (string) $this->withViewErrors(['terms' => ['Accept the terms to continue.']])
+        ->blade('<x-checkbox id="terms" label="I accept the terms" wire:model="terms" />');
+
+    expect($html)
+        ->toContain('data-invalid')
+        ->toContain('aria-invalid="true"')
+        ->toContain('aria-describedby="terms-support"')
+        ->toContain('Accept the terms to continue.');
+});
+
+it('draws radio buttons in a fieldset named by its question', function () {
+    $html = (string) $this->blade(<<<'BLADE'
+        <x-radio label="Who can open it" wire:model.live="audience" :options="[
+            ['id' => 'anyone', 'name' => 'Anyone with the link'],
+            ['id' => 'password', 'name' => 'Anyone with the password', 'hint' => 'Share it separately'],
+            ['id' => 'team', 'name' => 'My team', 'disabled' => true],
+        ]" />
+        BLADE);
+
+    expect($html)
+        ->toContain('<fieldset')
+        ->toContain('Who can open it</legend>')
+        ->and(substr_count($html, 'type="radio"'))->toBe(3)
+        ->and(substr_count($html, 'name="audience"'))->toBe(3)
+        ->and(substr_count($html, 'wire:model.live="audience"'))->toBe(3)
+        ->and($html)->toContain('value="password"')
+        ->toContain('Share it separately')
+        ->toMatch('/value="team"\s+disabled/');
+});
+
+it('names unbound radios after their group and checks the given value', function () {
+    $html = (string) $this->blade('<x-radio name="theme" value="dark" inline :options="[[\'id\' => \'light\', \'name\' => \'Light\'], [\'id\' => \'dark\', \'name\' => \'Dark\']]" />');
+
+    expect($html)
+        ->toContain('sm:flex')
+        ->and(substr_count($html, 'name="theme"'))->toBe(2)
+        ->and($html)->toMatch('/value="dark"\s+checked/')
+        ->not->toMatch('/value="light"\s+checked/');
+});
+
+it('shows the errors of a radio group', function () {
+    expect((string) $this->withViewErrors(['audience' => ['Choose who can open it.']])
+        ->blade('<x-radio wire:model="audience" :options="[[\'id\' => \'a\', \'name\' => \'A\']]" />'))
+        ->toContain('data-invalid')
+        ->toContain('Choose who can open it.');
+});
+
+it('draws a switch on a checkbox with the switch role', function () {
+    $html = (string) $this->blade('<x-toggle id="public" label="Public link" wire:model.live="public" right />');
+
+    expect($html)
+        ->toContain('<label for="public" data-selection')
+        ->toContain('data-switch')
+        ->toContain('role="switch"')
+        ->toContain('type="checkbox"')
+        ->toContain('wire:model.live="public"')
+        ->toContain('data-handle')
+        ->toContain('flex-row-reverse')
+        ->not->toContain('data-icons');
+});
+
+it('puts icons on a switch\'s handle', function () {
+    expect((string) $this->blade('<x-toggle label="Wi-Fi" icons />'))->toContain('data-icons="both"')->toContain('data-on')->toContain('data-off')
+        ->and((string) $this->blade('<x-toggle label="Wi-Fi" icons="selected" />'))->toContain('data-icons="selected"');
+});