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

Land a caller's style with its class on field and picker roots

Browse Source 
Plan step 38 review: the showcase kept two unlayered width classes
because <x-input> and <x-datepicker> "don't forward style usefully".
They did not: the Phase F rule is that a caller's class and style land
on the component root, and the field family sent class to the field's
root but style to the inner control, where a width sizes nothing.
Input, password, textarea, select and file now pass style to the field
root with class; datepicker and timepicker put it on their root;
<x-group> dropped style entirely and <x-split-button> gave it to the
leading button; <x-search> rendered it twice, on the root and the
input. A textarea given a style also lost its autogrow rows, since
its own style attribute came second and the browser ignores it.
A dataset test renders each component with both and requires them on
the root, once.

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-15 06:14:51 +02:00
co-authored by Claude Opus 5
parent 3fb0a404db
commit cd47aa4b0f
12 changed files with 89 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/split-button.blade.php
+7 -7
View File
@@ -5,11 +5,11 @@
<x-menu-item label="Download files one by one" wire:click="downloadEach" />
</x-split-button>
Attributes (wire:click, spinner…) go to the leading button, a `class` to the pair; the slot is
the menu. `variant` is `filled` (the default), `tonal`, `outlined` or `elevated` — a text split
button does not exist in M3 — with `color` and `size` as on `<x-button>`. The halves sit 2px
apart; the trailing one rounds fully and turns its chevron over while the menu is open.
`menu-label` names the trailing button and the menu for screen readers.
Attributes (wire:click, spinner…) go to the leading button, `class` and `style` to the pair;
the slot is the menu. `variant` is `filled` (the default), `tonal`, `outlined` or `elevated` —
a text split button does not exist in M3 — with `color` and `size` as on `<x-button>`. The
halves sit 2px apart; the trailing one rounds fully and turns its chevron over while the menu
is open. `menu-label` names the trailing button and the menu for screen readers.
Padding from SplitButton*Tokens (androidx Compose Material 3, Apache-2.0): the leading button
keeps less room on its inner side at the two smallest sizes, and the trailing button is 48px
@@ -37,9 +37,9 @@
$menuLabel ??= __('More options');
@endphp
<div data-md-split-button data-md-size="{{ $size }}" {{ $attributes->only('class') }}>
<div data-md-split-button data-md-size="{{ $size }}" {{ $attributes->only(['class', 'style']) }}>
<x-livewire-material::button
{{ $attributes->except('class') }}
{{ $attributes->except(['class', 'style']) }}
:label="$label"
:icon="$icon"
:variant="$variant"