Add chips, choices and search

M3's assist, filter, input and suggestion chips with chip sets; choices as filter chips or a searchable combobox whose list is an anchored popover; and the search bar that opens into a docked or full-screen search view. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
2026-09-13 08:07:59 +02:00
parent 7f92f1cb29
commit 0fee2a0952
21 changed files with 2061 additions and 2 deletions
@@ -0,0 +1,91 @@
+<?php
+
+use Livewire\Component;
+use Livewire\Livewire;
+
+it('lays every option out as a filter chip', function () {
+    $html = (string) $this->blade('<x-choices label="Days" hint="Pick any" :value="[2]" :options="[[\'id\' => 1, \'name\' => \'Mon\'], [\'id\' => 2, \'name\' => \'Tue\'], [\'id\' => 3, \'name\' => \'Wed\', \'disabled\' => true]]" />');
+
+    expect($html)
+        ->toContain('role="group"')
+        ->toContain('Days')
+        ->toContain('Pick any')
+        ->toContain('x-modelable="selection"')
+        ->toContain('x-on:click="toggle(0)"')
+        ->toContain('x-bind:aria-pressed="selected(2).toString()"')
+        ->and(substr_count($html, 'aria-pressed="true"'))->toBe(1)
+        ->and(substr_count($html, 'aria-pressed="false"'))->toBe(2)
+        ->and($html)->toContain('disabled');
+});
+
+it('entangles the selection with its Livewire property and renders it as the property says', function () {
+    Livewire::component('choices-probe', new class extends Component
+    {
+        /** @var list<int> */
+        public array $days = [1, 3];
+
+        public function render(): string
+        {
+            return '<div><x-choices wire:model.live="days" :options="[[\'id\' => 1, \'name\' => \'Mon\'], [\'id\' => 2, \'name\' => \'Tue\'], [\'id\' => 3, \'name\' => \'Wed\']]" /></div>';
+        }
+    });
+
+    $html = Livewire::test('choices-probe')->html();
+
+    expect($html)
+        ->toContain(".entangle('days').live")
+        ->not->toContain('x-modelable')
+        ->and(substr_count($html, 'aria-pressed="true"'))->toBe(2);
+});
+
+it('draws a searchable combobox with a popover list', function () {
+    $html = (string) $this->blade('<x-choices id="zone" label="Time zone" searchable icon="public" value="Europe/Zurich" :options="[[\'id\' => \'Europe/Zurich\', \'name\' => \'Zurich\']]" />');
+
+    expect($html)
+        ->toContain('role="combobox"')
+        ->toContain('aria-controls="zone-list"')
+        ->toContain('aria-expanded="false"')
+        ->toContain('<ul')
+        ->toContain('id="zone-list"')
+        ->toContain('role="listbox"')
+        ->toContain('popover="manual"')
+        ->toMatch('/anchor-name: (--material-choices-[a-z0-9]{10})/')
+        ->toContain('x-modelable="value"')
+        ->toContain('field-arrow')
+        ->toContain('Nothing matches');
+
+    preg_match('/anchor-name: (--material-choices-[a-z0-9]{10})/', $html, $anchor);
+
+    expect($html)->toContain("position-anchor: {$anchor[1]}");
+});
+
+it('shows the errors for the property and its items', function () {
+    Livewire::component('choices-errors', new class extends Component
+    {
+        /** @var list<int> */
+        public array $days = [];
+
+        public ?string $zone = null;
+
+        public function mount(): void
+        {
+            $this->addError('days.0', 'Mon is not a working day.');
+            $this->addError('zone', 'Choose a time zone.');
+        }
+
+        public function render(): string
+        {
+            return <<<'BLADE'
+                <div>
+                    <x-choices wire:model="days" :options="[['id' => 1, 'name' => 'Mon']]" />
+                    <x-choices wire:model="zone" searchable :options="[['id' => 'UTC', 'name' => 'UTC']]" />
+                </div>
+                BLADE;
+        }
+    });
+
+    expect(Livewire::test('choices-errors')->html())
+        ->toContain('Mon is not a working day.')
+        ->toContain('Choose a time zone.')
+        ->toContain('aria-invalid="true"');
+});