Take full on the searchable choice and the pickers, as on every field

`full` takes the 40rem bound off `[data-md-field]` from `medium`, and
`<x-input>`, `<x-password>`, `<x-textarea>`, `<x-select>` and `<x-file>`
pass it to the field they draw. `<x-choices searchable>`,
`<x-datepicker>` and `<x-timepicker>` draw the same field but did not
declare the prop, and their roots only forward `class` and `style`, so
`full` reached no element and the field stopped at 40rem: ReStride's
time zone choice stood narrower than the rows filling its card.

The three now declare `full` and pass it to their field (the date
picker's own field, not the dialog's entry fields). `<x-choices>`' chips
are not a field and have no bound, so they take `full` and render
nothing for it, and a call site can switch `searchable` on and off
without it. The docblocks and the skill list every component that takes
it.

The browser test that bounds a field at 600px now measures a bounded
and a `full` searchable choice, date picker and time picker too; it
fails without the change in Chrome, Firefox and Safari. A feature test
renders `full` on every field-shaped component and none on the chips.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Andreas Reinhold / reini
2026-09-17 07:04:12 +02:00
co-authored by Claude Opus 5
parent 6d4487feb3
commit 7aa6dc7d33
7 changed files with 60 additions and 14 deletions
@@ -23,9 +23,9 @@
multiple of the step; a drag and the arrows move by the step). `min` and `max` (`H:i`, inclusive;
a `min` later than `max` spans midnight) grey out and skip what lies outside them and turn typed
values outside them into errors validate on the server as well. `clearable` adds a button that
empties the field; `name` posts the value from a hidden input. `label`, `hint`, `icon`, `variant`
and `size` are the field's; `class` and `style` land on the root, other attributes (`required`,
`disabled`, `placeholder`) reach the field's input.
empties the field; `name` posts the value from a hidden input. `label`, `hint`, `icon`, `variant`,
`size` and `full` (the 40rem bound taken off) are the field's; `class` and `style` land on the
root, other attributes (`required`, `disabled`, `placeholder`) reach the field's input.
From androidx Compose Material 3 at commit 27cf9a7d5788aa0f5f2d8b6699ce279560daf326 (Apache-2.0):
TimePickerTokens and TimeInputTokens a surface-container-high dialog with an extra-large
@@ -56,6 +56,7 @@
'value' => null,
'name' => null,
'clearable' => false,
'full' => false,
])
@php
@@ -143,7 +144,7 @@
x-data="materialTimepicker(@if ($model !== null) @entangle($attributes->wire('model')) @else @js($current) @endif, @js($config))"
@if ($model === null) x-modelable="value" @endif
>
<x-livewire-material::field :$id :$label :$hint :$messages :$icon :$size :$variant data-md-timepicker-field>
<x-livewire-material::field :$id :$label :$hint :$messages :$icon :$size :$variant :$full data-md-timepicker-field>
<input
{{ $inputAttributes }}
id="{{ $id }}"