Andreas ReinholdandClaude Opus 5
deb7ff8ab5
M3 is explicit twice over — never disable a FAB, remove it instead — and the prop painted the full disabled treatment with nothing warning against it. It is gone; hiding the FAB is the documented answer. The extended FAB's icon-to-label gap goes to M3's 16dp at md and 20dp at lg, the small one takes the baseline's 80dp minimum width, and the root gains a `data-fab` hook for a place that draws a nested FAB its own way. Plan step 18, actions.md ACT-08, ACT-16, ACT-31. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
89 lines
4.4 KiB
PHP
89 lines
4.4 KiB
PHP
{{-- An M3 Expressive floating action button: the screen's primary action.
|
|
|
|
With only an `icon` it is a FAB — `size` `sm` 56px (the default; M3's deprecated small FAB is
|
|
gone, so this is the baseline FAB), `md` 80px, `lg` 96px. With a `label` it is an extended
|
|
FAB at the same three heights. `color` is `primary` (the default), `secondary` or `tertiary`,
|
|
drawn in its container, or in the colour itself with `variant="filled"`.
|
|
|
|
It does not place itself: put it where the layout wants it, e.g.
|
|
`<div class="fixed end-4 bottom-4"><x-fab icon="add" tooltip="New share" /></div>`. For a
|
|
create action that is a FAB on a phone and a header button above, use `<x-button fab>`.
|
|
|
|
The glyph is filled, not outlined: M3 says so twice, in the FAB's anatomy and again in its
|
|
guidelines ("icon should be filled (not outlined) and unambiguous").
|
|
|
|
There is no `disabled`: M3 says never to disable a FAB — "if its action is unavailable,
|
|
remove the FAB entirely instead" — so hide it (`@if`), or leave it out of the render, rather
|
|
than greying it out. A form-submit FAB that must not be pressed twice takes the caller's own
|
|
`wire:loading.attr="disabled"`.
|
|
|
|
`data-fab` marks the root, so a place a FAB sits in can draw it its own way: a navigation
|
|
rail flattens a nested FAB to elevation 0.
|
|
|
|
Sizes, corners and elevation from FabBaseline/Medium/LargeTokens and ExtendedFab*Tokens
|
|
(androidx Compose Material 3, Apache-2.0). --}}
|
|
|
|
@props([
|
|
'icon' => null,
|
|
'label' => null,
|
|
'size' => 'sm',
|
|
'color' => 'primary',
|
|
'variant' => 'container',
|
|
'link' => null,
|
|
'external' => false,
|
|
'tooltip' => null,
|
|
'type' => 'button',
|
|
])
|
|
|
|
@php
|
|
$size = in_array($size, ['sm', 'md', 'lg'], true) ? $size : 'sm';
|
|
$color = in_array($color, ['primary', 'secondary', 'tertiary'], true) ? $color : 'primary';
|
|
$extended = filled($label) || $slot->isNotEmpty();
|
|
$isLink = filled($link);
|
|
|
|
$colours = $variant === 'filled'
|
|
? ['primary' => 'bg-primary text-on-primary', 'secondary' => 'bg-secondary text-on-secondary', 'tertiary' => 'bg-tertiary text-on-tertiary'][$color]
|
|
: ['primary' => 'bg-primary-container text-on-primary-container', 'secondary' => 'bg-secondary-container text-on-secondary-container', 'tertiary' => 'bg-tertiary-container text-on-tertiary-container'][$color];
|
|
|
|
$dimensions = $extended
|
|
? ['sm' => 'h-14 min-w-20 gap-2 px-4 rounded-corner-lg type-title-md', 'md' => 'h-20 min-w-20 gap-4 px-[26px] rounded-corner-lg-increased type-title-lg', 'lg' => 'h-24 min-w-24 gap-5 px-7 rounded-corner-xl type-headline-sm'][$size]
|
|
: ['sm' => 'size-14 rounded-corner-lg', 'md' => 'size-20 rounded-corner-lg-increased', 'lg' => 'size-24 rounded-corner-xl'][$size];
|
|
|
|
$iconSize = ['sm' => 'size-6', 'md' => 'size-7', 'lg' => 'size-8'][$size];
|
|
$anchor = $tooltip !== null ? '--material-fab-'.\Illuminate\Support\Str::lower(\Illuminate\Support\Str::random(10)) : null;
|
|
$tag = $isLink ? 'a' : 'button';
|
|
|
|
$attributes = $attributes
|
|
->class([
|
|
'state-layer focus-ring inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap',
|
|
'shadow-elevation-3 hover:shadow-elevation-4 transition-[box-shadow,background-color,color] duration-(--md-sys-motion-effects-fast-duration) ease-effects-fast',
|
|
$dimensions,
|
|
$colours,
|
|
])
|
|
->merge(array_filter([
|
|
'href' => $isLink ? $link : null,
|
|
'target' => $isLink && $external ? '_blank' : null,
|
|
'rel' => $isLink && $external ? 'noopener' : null,
|
|
'wire:navigate' => $isLink && ! $external && ! $attributes->has('wire:navigate') ? true : null,
|
|
'type' => $isLink ? null : $type,
|
|
// The hook a place uses to draw a nested FAB its own way: a rail flattens it to 0dp.
|
|
'data-fab' => true,
|
|
'aria-label' => ! $extended && ! $attributes->has('aria-label') ? $tooltip : null,
|
|
'style' => $anchor ? "anchor-name: {$anchor}" : null,
|
|
], fn ($value): bool => $value !== null));
|
|
@endphp
|
|
|
|
<{{ $tag }} {{ $attributes }}>
|
|
@if ($icon)
|
|
<x-livewire-material::icon :name="$icon" filled :class="$iconSize" />
|
|
@endif
|
|
|
|
@if ($extended)
|
|
<span>{{ $label ?? $slot }}</span>
|
|
@endif
|
|
|
|
@if ($tooltip !== null)
|
|
<x-livewire-material::tooltip :text="$tooltip" :anchor="$anchor" />
|
|
@endif
|
|
</{{ $tag }}>
|