Andreas Reinhold / reiniandClaude Opus 5
3f651c5c08
Plan step 22, actions.md § Missing (Grouped menu layout by gap): M3 Expressive's "Grouped" layout separates clusters with a gap rather than a divider, and `<x-menu-group>` only had the labelled form. `<x-menu-group gap>` holds its items in a box 2px apart (SegmentedMenuTokens.SegmentedGap) whose ends round like a list's, and stands 8px off its neighbours — the same 8px the separator keeps around its line. `label` is now optional, so a cluster can be a gap alone. The header says when to reach for which: the divider first, and always in a menu long enough to scroll, where M3 says gaps are unsupported. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
49 lines
2.0 KiB
PHP
49 lines
2.0 KiB
PHP
{{-- A group of items in an `<x-menu>`, labelled ("Sort by", "Share with"), set apart by a gap, or
|
|
both.
|
|
|
|
M3 Expressive gives a menu two ways to break its items into clusters, and they are not
|
|
interchangeable:
|
|
|
|
- `<x-menu-separator />`, a line. M3: "dividers are more subtle and are the right choice for
|
|
scrollable menus or text-field dropdowns", and "on web, use dividers to separate items".
|
|
The default answer, and the only one for a menu long enough to scroll.
|
|
- `<x-menu-group gap>`, the Expressive "Grouped" layout: no line, a gap. M3: "gaps are the
|
|
more expressive way to separate item clusters" — but "limit to one or two gaps per menu",
|
|
"don't vary gap size", and "never use gaps in a scrollable menu" (unsupported).
|
|
|
|
A gapped cluster sets its items 2px apart (SegmentedMenuTokens.SegmentedGap = 2dp) and holds
|
|
them in a box of their own, so the two ends of the cluster round the way the ends of a whole
|
|
list round and each cluster reads as one block. Clusters stand 8px apart, the same 8px a
|
|
separator keeps above and below its line, so a menu is the same height whichever it uses.
|
|
SegmentedMenuTokens' own GroupShape is 8dp where the library's list ends are 12dp; the
|
|
library's shape wins, so a cluster's ends and a list's ends match. --}}
|
|
|
|
@props([
|
|
'label' => null,
|
|
'gap' => false,
|
|
])
|
|
|
|
@php
|
|
$attributes = $attributes
|
|
->class([
|
|
'py-1 first:pt-0 last:pb-0' => ! $gap,
|
|
'not-first:mt-2' => $gap,
|
|
])
|
|
->merge(array_filter([
|
|
'role' => 'group',
|
|
'aria-label' => $label,
|
|
], fn ($value): bool => filled($value)));
|
|
@endphp
|
|
|
|
<div {{ $attributes }}>
|
|
@if (filled($label))
|
|
<div aria-hidden="true" class="px-4 pt-2 pb-1 type-label-lg text-on-surface-variant">{{ $label }}</div>
|
|
@endif
|
|
|
|
@if ($gap)
|
|
<div class="space-y-0.5">{{ $slot }}</div>
|
|
@else
|
|
{{ $slot }}
|
|
@endif
|
|
</div>
|