noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Draw the choices without Tailwind

Browse Source 
<x-choices> renders data-md-choices (data-md-searchable) and its
"Nothing matches" row as data-md-choices-empty, drawn by
components/choices.css, which brings the field, chip set and chip it
renders (plan step 36).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 14:55:29 +02:00
co-authored by Claude Opus 5
parent 55cf8ceed7
commit 1bb5adab0e
4 changed files with 61 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Feature/Components/ChoicesTest.php
+17 -1
View File
@@ -7,6 +7,8 @@ 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)
->toMatch('/<div\\s+data-md-choices\\s/')
->not->toContain('data-md-searchable')
->toContain('role="group"')
->toContain('Days')
->toContain('Pick any')
@@ -42,6 +44,7 @@ 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)
->toMatch('/<div\\s+data-md-choices\\s+data-md-searchable\\s/')
->toContain('role="combobox"')
->toContain('aria-controls="zone-list"')
->toContain('aria-expanded="false"')
@@ -55,7 +58,10 @@ it('draws a searchable combobox with a popover list', function () {
// WAI-ARIA's combobox keyboard, Home and End included.
->toContain('x-on:keydown.home="jump($event, false)"')
->toContain('x-on:keydown.end="jump($event, true)"')
->toContain('Nothing matches');
->toContain('<li x-show="filtered.length === 0" data-md-choices-empty>Nothing matches</li>')
->toContain('data-md-field-menu')
->toContain('data-md-field-option')
->not->toContain('class=');
preg_match('/anchor-name: (--material-choices-[a-z0-9]{10})/', $html, $anchor);
@@ -92,3 +98,13 @@ it('shows the errors for the property and its items', function () {
->toContain('Choose a time zone.')
->toContain('aria-invalid="true"');
});
it('brings the stylesheets of what it renders, and draws its empty row', function () {
$css = (string) file_get_contents(__DIR__.'/../../../resources/css/components/choices.css');
expect($css)->toContain("@import './field.css';")
->toContain("@import './chip-set.css';")
->toContain("@import './chip.css';")
->toContain('[data-md-choices-empty] {')
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/choices.css';");
});