Draw the menu item without Tailwind
<x-menu-item> renders data-md-menu-item, data-md-description and its aria-* state, with data-md-keep-open renamed from data-keep-open; menu-item.css draws SegmentedMenuTokens' 48px row, 16px sides, 12px gaps, 4/12px corners, the selected/current colours and the shared --md-menu-item-ink icon-class outranks except when disabled (ACT-11/19/27/28); a submenu's popover shares its container colour with the menu it opens from and menu.js follows the rename (plan step 36, actions). 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
co-authored by
Claude Opus 5
Claude Opus 5
parent
2f8fb2183f
commit
c040925cd4
@@ -5,13 +5,13 @@
|
||||
makes it an anchor, with `wire:navigate` unless `external` or `no-wire-navigate`. `selected`
|
||||
(true or false) makes it a `menuitemcheckbox` with `aria-checked`; a selected item takes
|
||||
Expressive's selected shape and tertiary-container, and a `check` at its end unless it has an
|
||||
`icon-right` of its own — M3 asks for a cue beyond the colour and the shape. `current` is for a menu of places rather
|
||||
than choices — a section picker — and marks the page you are on: `aria-current="page"`, the
|
||||
selected shape in secondary-container, the colour M3 gives the navigation indicator. `badge`
|
||||
draws `<x-badge>` at the end of the row: `true` for a dot, or a count. `disabled` keeps it in the list, reachable by the
|
||||
keyboard but not selectable — M3 keeps a disabled item focusable so a person can find out it
|
||||
is there. `keep-open` leaves the menu open when it is activated — for a choice the person may
|
||||
want to change twice.
|
||||
`icon-right` of its own — M3 asks for a cue beyond the colour and the shape. `current` is for
|
||||
a menu of places rather than choices — a section picker — and marks the page you are on:
|
||||
`aria-current="page"`, the selected shape in secondary-container, the colour M3 gives the
|
||||
navigation indicator. `badge` draws `<x-badge>` at the end of the row: `true` for a dot, or a
|
||||
count. `disabled` keeps it in the list, reachable by the keyboard but not selectable — M3
|
||||
keeps a disabled item focusable so a person can find out it is there. `keep-open` leaves the
|
||||
menu open when it is activated — for a choice the person may want to change twice.
|
||||
|
||||
`submenu` turns the item into a menu of its own: the slot holds `<x-menu-item>`s instead of a
|
||||
label, and they open in a second popover beside this one, on the item's end, flipping to its
|
||||
@@ -30,17 +30,17 @@
|
||||
come back to the item, and Escape closes nothing more.
|
||||
|
||||
`icon-class` is for an icon whose colour means something of its own, a sport's glyph in the
|
||||
sport's colour (`icon-class="text-sport-run"`). A colour there paints the icon, a selected
|
||||
item's too: the icon's own colour then carries no specificity, because which of two colour
|
||||
utilities wins depends on the order Tailwind emits them. A disabled item's icon stays
|
||||
disabled.
|
||||
sport's colour (`icon-class="text-sport-run"`). A colour there paints the icon over the ink
|
||||
this file gives it, because a caller's unlayered class always outranks the package's layer —
|
||||
except a disabled item's icon, which stays disabled regardless.
|
||||
|
||||
48px tall, body-large label, 20px icons, 16px either side (SegmentedMenuTokens' Expressive
|
||||
spacing), 4px corners that open to 12px at the ends of the list — the corner on the spatial
|
||||
spring and the colour on the effects one (`state-transition-fast`). The row is 48px rather
|
||||
than SegmentedMenuTokens' 44px: M3's menu page publishes 48dp and asks for ≥48×48 targets
|
||||
inside an item's slots, and the library's own select and choices menus are 48px, so the more
|
||||
binding source wins over the more specific one. --}}
|
||||
48px tall (M3's published row height wins over SegmentedMenuTokens' own 44dp, ACT-28),
|
||||
body-large label, 20px icons, 16px either side (SegmentedMenuTokens' Expressive spacing,
|
||||
ACT-11), 4px corners that open to 12px at the ends of the list — the corner on the spatial
|
||||
spring and the colour on the effects one, apart (ACT-19).
|
||||
|
||||
Drawn by resources/css/components/menu-item.css from `data-md-menu-item`,
|
||||
`data-md-description` and the item's aria-* state. --}}
|
||||
|
||||
@props([
|
||||
'label' => null,
|
||||
@@ -69,52 +69,28 @@
|
||||
$key = $submenu ? \Illuminate\Support\Str::lower(\Illuminate\Support\Str::random(10)) : null;
|
||||
$anchor = $submenu ? "--material-submenu-{$key}" : null;
|
||||
|
||||
$attributes = $attributes
|
||||
->class([
|
||||
'group/item state-layer flex w-full min-h-12 cursor-pointer items-center gap-3 px-4 text-start outline-none',
|
||||
'rounded-corner-xs first:rounded-t-corner-md last:rounded-b-corner-md',
|
||||
'state-transition-fast',
|
||||
'focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-secondary',
|
||||
'py-2' => filled($description),
|
||||
'rounded-corner-md bg-tertiary-container text-on-tertiary-container' => $selected === true,
|
||||
'rounded-corner-md bg-secondary-container text-on-secondary-container' => $current && $selected !== true,
|
||||
'pointer-events-none text-on-surface/38' => $disabled,
|
||||
])
|
||||
->merge(array_filter([
|
||||
'role' => $selected === null ? 'menuitem' : 'menuitemcheckbox',
|
||||
'aria-checked' => $selected === null ? null : ($selected ? 'true' : 'false'),
|
||||
'aria-current' => $current ? 'page' : null,
|
||||
'aria-disabled' => $disabled ? 'true' : null,
|
||||
'tabindex' => '-1',
|
||||
'x-ref' => $submenu ? 'trigger' : null,
|
||||
'style' => $submenu ? "anchor-name: {$anchor}" : null,
|
||||
'aria-haspopup' => $submenu ? 'menu' : null,
|
||||
'aria-expanded' => $submenu ? 'false' : null,
|
||||
'aria-controls' => $submenu ? "material-submenu-{$key}" : null,
|
||||
'x-on:click' => $submenu ? "toggle('first')" : null,
|
||||
'type' => $isLink ? null : 'button',
|
||||
'href' => $isLink ? $link : null,
|
||||
'target' => $isLink && $external ? '_blank' : null,
|
||||
'rel' => $isLink && $external ? 'noopener' : null,
|
||||
'wire:navigate' => $isLink && ! $external && ! $noWireNavigate && ! $attributes->has('wire:navigate') ? true : null,
|
||||
// Opening a submenu is not choosing anything: the outer menu stays where it was.
|
||||
'data-keep-open' => $keepOpen || $submenu ? true : null,
|
||||
], fn ($value): bool => $value !== null));
|
||||
|
||||
$iconInk = match (true) {
|
||||
$disabled => 'text-on-surface/38',
|
||||
$selected === true => 'text-on-tertiary-container',
|
||||
$current => 'text-on-secondary-container',
|
||||
default => 'text-on-surface-variant',
|
||||
};
|
||||
|
||||
$leadingIcon = match (true) {
|
||||
blank($iconClass) => 'size-5 '.$iconInk,
|
||||
$disabled => \Illuminate\Support\Arr::toCssClasses(['size-5', $iconClass, 'text-on-surface/38!']),
|
||||
$selected === true => \Illuminate\Support\Arr::toCssClasses(['size-5 [:where(&)]:text-on-tertiary-container', $iconClass]),
|
||||
$current => \Illuminate\Support\Arr::toCssClasses(['size-5 [:where(&)]:text-on-secondary-container', $iconClass]),
|
||||
default => \Illuminate\Support\Arr::toCssClasses(['size-5 [:where(&)]:text-on-surface-variant', $iconClass]),
|
||||
};
|
||||
$attributes = $attributes->merge(array_filter([
|
||||
'data-md-menu-item' => true,
|
||||
'data-md-description' => filled($description) ? true : null,
|
||||
'role' => $selected === null ? 'menuitem' : 'menuitemcheckbox',
|
||||
'aria-checked' => $selected === null ? null : ($selected ? 'true' : 'false'),
|
||||
'aria-current' => $current ? 'page' : null,
|
||||
'aria-disabled' => $disabled ? 'true' : null,
|
||||
'tabindex' => '-1',
|
||||
'x-ref' => $submenu ? 'trigger' : null,
|
||||
'style' => $submenu ? "anchor-name: {$anchor}" : null,
|
||||
'aria-haspopup' => $submenu ? 'menu' : null,
|
||||
'aria-expanded' => $submenu ? 'false' : null,
|
||||
'aria-controls' => $submenu ? "material-submenu-{$key}" : null,
|
||||
'x-on:click' => $submenu ? "toggle('first')" : null,
|
||||
'type' => $isLink ? null : 'button',
|
||||
'href' => $isLink ? $link : null,
|
||||
'target' => $isLink && $external ? '_blank' : null,
|
||||
'rel' => $isLink && $external ? 'noopener' : null,
|
||||
'wire:navigate' => $isLink && ! $external && ! $noWireNavigate && ! $attributes->has('wire:navigate') ? true : null,
|
||||
// Opening a submenu is not choosing anything: the outer menu stays where it was.
|
||||
'data-md-keep-open' => $keepOpen || $submenu ? true : null,
|
||||
], fn ($value): bool => $value !== null));
|
||||
@endphp
|
||||
|
||||
@if ($submenu)
|
||||
@@ -127,32 +103,32 @@
|
||||
|
||||
<{{ $tag }} {{ $attributes }}>
|
||||
@if ($icon)
|
||||
<x-livewire-material::icon :name="$icon" optical="20" :filled="$selected === true || $current" :class="$leadingIcon" />
|
||||
<x-livewire-material::icon :name="$icon" size="20" :filled="$selected === true || $current" class="{{ $iconClass }}" />
|
||||
@endif
|
||||
|
||||
<span class="min-w-0 flex-1">
|
||||
<span class="block truncate type-body-lg">{{ $submenu ? $label : ($label ?? $slot) }}</span>
|
||||
<span data-md-menu-item-text>
|
||||
<span data-md-menu-item-label>{{ $submenu ? $label : ($label ?? $slot) }}</span>
|
||||
|
||||
@if ($description)
|
||||
<span @class(['block type-body-md', $iconInk])>{{ $description }}</span>
|
||||
<span data-md-menu-item-description>{{ $description }}</span>
|
||||
@endif
|
||||
</span>
|
||||
|
||||
@if ($badge !== null && $badge !== false && $badge !== '')
|
||||
<x-livewire-material::badge :value="$badge === true ? null : $badge" class="shrink-0" />
|
||||
<x-livewire-material::badge :value="$badge === true ? null : $badge" />
|
||||
@endif
|
||||
@if ($shortcut)
|
||||
<span @class(['shrink-0 type-label-sm', $iconInk])>{{ $shortcut }}</span>
|
||||
<span data-md-menu-item-shortcut>{{ $shortcut }}</span>
|
||||
@endif
|
||||
|
||||
@if ($iconRight)
|
||||
<x-livewire-material::icon :name="$iconRight" optical="20" :class="'size-5 '.$iconInk" />
|
||||
<x-livewire-material::icon :name="$iconRight" size="20" />
|
||||
@elseif ($submenu)
|
||||
{{-- M3's submenu marker: it points the way the list opens, and turns over in an RTL page. --}}
|
||||
<x-livewire-material::icon name="chevron_right" optical="20" data-submenu-chevron :class="'size-5 rtl:-scale-x-100 '.$iconInk" />
|
||||
<x-livewire-material::icon name="chevron_right" size="20" mirror-rtl data-md-submenu-chevron />
|
||||
@elseif ($selected === true)
|
||||
{{-- The third cue M3 recommends, so a chosen item is not told by colour and shape alone. --}}
|
||||
<x-livewire-material::icon name="check" optical="20" :class="'size-5 '.$iconInk" />
|
||||
<x-livewire-material::icon name="check" size="20" />
|
||||
@endif
|
||||
</{{ $tag }}>
|
||||
|
||||
@@ -163,13 +139,12 @@
|
||||
id="material-submenu-{{ $key }}"
|
||||
popover="auto"
|
||||
role="menu"
|
||||
data-submenu
|
||||
data-md-submenu
|
||||
aria-label="{{ $label }}"
|
||||
tabindex="-1"
|
||||
style="position-anchor: {{ $anchor }}"
|
||||
x-on:keydown.stop="navigate($event)"
|
||||
x-on:click="activate($event)"
|
||||
class="m-0 mx-1 min-w-28 max-w-70 max-h-[min(18rem,calc(100dvh-2rem))] origin-top overflow-y-auto border-0 p-1 rounded-corner-lg shadow-elevation-2 popover-transition [inset:auto] [position-area:inline-end_span-block-end] [position-try-fallbacks:flip-inline]"
|
||||
>
|
||||
{{ $slot }}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user