Andreas Reinhold / reiniandClaude Opus 5
cd47aa4b0f
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
69 lines
2.9 KiB
PHP
69 lines
2.9 KiB
PHP
{{-- An M3 Expressive split button: an action, and a menu of its alternatives.
|
|
|
|
<x-split-button label="Download all" icon="download" wire:click="downloadZip" menu-label="Download options">
|
|
<x-menu-item label="Download as ZIP" wire:click="downloadZip" />
|
|
<x-menu-item label="Download files one by one" wire:click="downloadEach" />
|
|
</x-split-button>
|
|
|
|
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
|
|
wide there. resources/css/components/split-button.css carries the rest of the spec, which is
|
|
all geometry: the inner corners (4/4/4/8/12px, growing under the finger, not shrinking as a
|
|
connected group's do), the trailing icon's own size (22/22/26/38/50px, which the icon-button
|
|
table has no entry for), the 1/1/2/3/6px nudge that sits the chevron towards the leading half,
|
|
and the standard motion scheme M3 asks for while it turns over. --}}
|
|
|
|
@props([
|
|
'label' => null,
|
|
'icon' => null,
|
|
'variant' => 'filled',
|
|
'color' => 'primary',
|
|
'size' => 'sm',
|
|
'disabled' => false,
|
|
'spinner' => null,
|
|
'menuLabel' => null,
|
|
'position' => 'bottom-end',
|
|
])
|
|
|
|
@php
|
|
$variant = in_array($variant, ['filled', 'tonal', 'outlined', 'elevated'], true) ? $variant : 'filled';
|
|
$size = in_array($size, ['xs', 'sm', 'md', 'lg', 'xl'], true) ? $size : 'sm';
|
|
$menuLabel ??= __('More options');
|
|
@endphp
|
|
|
|
<div data-md-split-button data-md-size="{{ $size }}" {{ $attributes->only(['class', 'style']) }}>
|
|
<x-livewire-material::button
|
|
{{ $attributes->except(['class', 'style']) }}
|
|
:label="$label"
|
|
:icon="$icon"
|
|
:variant="$variant"
|
|
:color="$color"
|
|
:size="$size"
|
|
:disabled="$disabled"
|
|
:spinner="$spinner"
|
|
data-md-split="leading"
|
|
/>
|
|
|
|
<x-livewire-material::menu :position="$position" :label="$menuLabel">
|
|
<x-slot:trigger>
|
|
<x-livewire-material::button
|
|
icon="keyboard_arrow_down"
|
|
:aria-label="$menuLabel"
|
|
:variant="$variant"
|
|
:color="$color"
|
|
:size="$size"
|
|
:disabled="$disabled"
|
|
data-md-split="trailing"
|
|
/>
|
|
</x-slot:trigger>
|
|
|
|
{{ $slot }}
|
|
</x-livewire-material::menu>
|
|
</div>
|