Let a select, a password and a file field span its container
<x-input>, <x-textarea> and <x-datepicker> took `full` to drop the 40rem bound field.css puts on a text field from `medium`; <x-select>, <x-password> and <x-file> did not, so a field inside a container that already bounds it stopped short of that container's edge with no way to say so. The three now take the prop and hand it to <x-field> like the others. <x-choices> and <x-timepicker> still do not. Found in SealShare: its share options, its admin settings and its user settings are cards, and a card is exactly the "other container" M3 names as the thing that should bound a field on a medium or expanded screen instead of the 40rem ceiling. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5
parent
5b05e52e1c
commit
5014d3e576
@@ -4,7 +4,7 @@
|
||||
password manager still sees a password input on load. Its label says what pressing it will do —
|
||||
M3's own pattern for an interactive trailing icon ("Show password" / "Hide password") — and it
|
||||
carries no `aria-pressed`, which would say the state a second time and the other way round.
|
||||
`label`, `hint`, `icon`, `variant`, `size`; `class` and `style` land on the field's root, every
|
||||
`label`, `hint`, `icon`, `variant`, `size`; `full` takes the 40rem bound off a field its container already bounds. `class` and `style` land on the field's root, every
|
||||
other attribute reaches the `<input>`
|
||||
(`autocomplete="current-password"`, `wire:model`). The field's root carries
|
||||
`data-md-password`; the chrome and the eye's icon button are the field's
|
||||
@@ -17,6 +17,7 @@
|
||||
'icon' => null,
|
||||
'size' => 'md',
|
||||
'variant' => null,
|
||||
'full' => false,
|
||||
])
|
||||
|
||||
@php
|
||||
@@ -28,7 +29,7 @@
|
||||
$fieldIconSize = ['sm' => 20, 'xs' => 16][$size] ?? 24;
|
||||
@endphp
|
||||
|
||||
<x-livewire-material::field :$id :$label :$hint :hint-class="$hintClass" :$messages :$icon :$size :$variant :class="$attributes->get('class')" :style="$attributes->get('style')" x-data="{ shown: false }" data-md-password>
|
||||
<x-livewire-material::field :$id :$label :$hint :hint-class="$hintClass" :$messages :$icon :$size :$variant :$full :class="$attributes->get('class')" :style="$attributes->get('style')" x-data="{ shown: false }" data-md-password>
|
||||
<input
|
||||
{{ $attributes->except(['class', 'style', 'id', 'type', 'placeholder']) }}
|
||||
id="{{ $id }}"
|
||||
|
||||
Reference in New Issue
Block a user