Andreas Reinhold / reiniandClaude Opus 5
330b835043
<x-fab-menu-item> renders data-md-fab-menu-item and data-md-color with no class list; fab-menu-item.css draws FabMenuBaselineTokens' 56px pill, 24px sides, 24px icon, full corner and elevation 3, and the entry/exit rise-and-sink transition (ACT-33) that fab-menu.css's [data-md-fab-menu]:not(:popover-open) rule will drive once the FAB menu itself is rewritten. Its tests move out of FabTest.php into a new FabMenuTest.php (plan step 36, actions). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
45 lines
1.6 KiB
PHP
45 lines
1.6 KiB
PHP
{{-- One action in an `<x-fab-menu>`: a 56px pill with an icon and a label, rising into place as
|
|
the menu opens and sinking back as it closes (fab-menu.css drives the exit from the popover's
|
|
own open state). `link` makes it an anchor (with `wire:navigate` unless `external`); `color`
|
|
should match the menu's.
|
|
|
|
FabMenuBaselineTokens (androidx Compose Material 3, Apache-2.0): 56px tall, 24px either side,
|
|
8px between the icon and the label, 24px icons, full corner, elevation 3.
|
|
|
|
Drawn by resources/css/components/fab-menu-item.css from `data-md-fab-menu-item` and
|
|
`data-md-color`. --}}
|
|
|
|
@props([
|
|
'label' => null,
|
|
'icon' => null,
|
|
'color' => 'primary',
|
|
'link' => null,
|
|
'external' => false,
|
|
])
|
|
|
|
@php
|
|
$isLink = filled($link);
|
|
$tag = $isLink ? 'a' : 'button';
|
|
$color = in_array($color, ['primary', 'secondary', 'tertiary'], true) ? $color : 'primary';
|
|
|
|
$attributes = $attributes->merge(array_filter([
|
|
'data-md-fab-menu-item' => true,
|
|
'data-md-color' => $color,
|
|
'role' => 'menuitem',
|
|
'tabindex' => '-1',
|
|
'type' => $isLink ? null : 'button',
|
|
'href' => $isLink ? $link : null,
|
|
'target' => $isLink && $external ? '_blank' : null,
|
|
'rel' => $isLink && $external ? 'noopener' : null,
|
|
'wire:navigate' => $isLink && ! $external && ! $attributes->has('wire:navigate') ? true : null,
|
|
], fn ($value): bool => $value !== null));
|
|
@endphp
|
|
|
|
<{{ $tag }} {{ $attributes }}>
|
|
@if ($icon)
|
|
<x-livewire-material::icon :name="$icon" size="24" />
|
|
@endif
|
|
|
|
<span>{{ $label ?? $slot }}</span>
|
|
</{{ $tag }}>
|