Andreas Reinhold / reiniandClaude Opus 5
5d0e9bc12f
Plan step 22, actions.md § Missing (Square-by-default button groups): M3 lists "Default shape | Round, square" as a button-group configuration and neither `<x-button-group>` nor `<x-group>` had a `shape` prop, so a group of square buttons still drew round outer corners. `shape="square"` passes the square corner scale to every child through `data-shape` and two new variables in groups.css: `--group-outer` is what the two ends of a group round to (half the height when round, the corner its inner edges take when square — M3's square table, 4/8/8/16/20dp), and `--group-square`/`--group-square-pressed` give a standard group's buttons the scale `<x-button shape="square">` draws. The selected rules keep `--group-full`, so a selected button in a square group rounds: M3 has a toggle inside a group swap shape on selection either way. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
56 lines
2.4 KiB
PHP
56 lines
2.4 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.
|
|
|
|
`shape` is M3's "Default shape | Round, square" configuration, and covers every button in the
|
|
group so it need not be written on each one: `square` squares a connected group's two ends to
|
|
the corner its inner edges take (M3's square table, 4/8/8/16/20dp by size) and gives a
|
|
standard group's buttons the square corner scale `<x-button shape="square">` draws. Selection
|
|
still morphs the other way — M3 has a toggle inside a group "swap shape square/round on
|
|
selection" — so a selected button in a square group rounds.
|
|
|
|
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,
|
|
'shape' => 'round',
|
|
])
|
|
|
|
@php
|
|
$size = in_array($size, ['xs', 'sm', 'md', 'lg', 'xl'], true) ? $size : 'sm';
|
|
$shape = $shape === 'square' ? 'square' : 'round';
|
|
@endphp
|
|
|
|
<div
|
|
role="group"
|
|
@if ($label) aria-label="{{ $label }}" @endif
|
|
data-button-group="{{ $connected ? 'connected' : 'standard' }}"
|
|
data-size="{{ $size }}"
|
|
data-shape="{{ $shape }}"
|
|
{{ $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>
|