Andreas ReinholdandClaude Opus 5
573d94fe6e
ButtonXSmallTokens puts 16dp either side of an xs label, where the button, the <x-group> segment and --group-pad all wrote 12px; the variants table calls 16dp the Expressive value twice over. A standard button group also dropped onto a second line on a narrow window, which M3 forbids — and the press expansion only ever reaches a neighbour on the same line. Plan step 18, actions.md ACT-09, ACT-10. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
46 lines
1.8 KiB
PHP
46 lines
1.8 KiB
PHP
{{-- An M3 Expressive button group: related `<x-button>`s in a row.
|
|
|
|
<x-button-group size="md" label="Text formatting">
|
|
<x-button icon="format_bold" aria-label="Bold" variant="tonal" :selected="$bold" wire:click="toggleBold" />
|
|
…
|
|
</x-button-group>
|
|
|
|
Standard (the default): the buttons stand apart, and pressing a label button widens it while
|
|
its neighbours give way. `connected`: 2px apart with small inner corners, the shape that
|
|
replaced M3's segmented button; a selected (aria-pressed) button rounds fully. Give `size`
|
|
the size of the buttons inside, so the spacing and corners match. For a choice bound to a
|
|
property, `<x-group>` draws a connected group of radios.
|
|
|
|
A group never wraps to a second line — M3's rule, and the press expansion only reaches a
|
|
neighbour on the same line anyway. Where a row is too long for its window the answer is a
|
|
smaller `size` or fewer buttons, or two groups stacked.
|
|
|
|
Spacing from the M3 Expressive spec (ButtonGroupSmallTokens: 12px at the small size). The
|
|
shapes are resources/css/components/groups.css. --}}
|
|
|
|
@props([
|
|
'connected' => false,
|
|
'size' => 'sm',
|
|
'label' => null,
|
|
])
|
|
|
|
@php
|
|
$size = in_array($size, ['xs', 'sm', 'md', 'lg', 'xl'], true) ? $size : 'sm';
|
|
@endphp
|
|
|
|
<div
|
|
role="group"
|
|
@if ($label) aria-label="{{ $label }}" @endif
|
|
data-button-group="{{ $connected ? 'connected' : 'standard' }}"
|
|
data-size="{{ $size }}"
|
|
{{ $attributes->class([
|
|
'inline-flex items-center',
|
|
'gap-0.5' => $connected,
|
|
'gap-[18px]' => ! $connected && $size === 'xs',
|
|
'gap-3' => ! $connected && $size === 'sm',
|
|
'gap-2' => ! $connected && in_array($size, ['md', 'lg', 'xl'], true),
|
|
]) }}
|
|
>
|
|
{{ $slot }}
|
|
</div>
|