Andreas Reinhold / reiniandClaude Opus 5
4d4862189a
A FAB nested in another component has to be restyled from that component's stylesheet, and its root carried no hook. Added here rather than with the rule that needs it, so the actions stream's own use of the hook merges cleanly. Plan: docs/plans/material-3-alignment.md, step 14 (navigation N-03). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
82 lines
4.0 KiB
PHP
82 lines
4.0 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>`.
|
|
|
|
`data-fab` marks the root, so a component that nests a FAB can restyle it from its own
|
|
stylesheet — a rail drops its elevation to 0, as M3 asks of a nested FAB.
|
|
|
|
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,
|
|
'disabled' => false,
|
|
'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-14 gap-2 px-4 rounded-corner-lg type-title-md', 'md' => 'h-20 min-w-20 gap-3 px-[26px] rounded-corner-lg-increased type-title-lg', 'lg' => 'h-24 min-w-24 gap-4 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,
|
|
'disabled:cursor-not-allowed disabled:bg-on-surface/10 disabled:text-on-surface/38 disabled:shadow-none',
|
|
])
|
|
->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,
|
|
'disabled' => ! $isLink && $disabled ? true : null,
|
|
'aria-label' => ! $extended && ! $attributes->has('aria-label') ? $tooltip : null,
|
|
'style' => $anchor ? "anchor-name: {$anchor}" : null,
|
|
], fn ($value): bool => $value !== null));
|
|
@endphp
|
|
|
|
<{{ $tag }} data-fab {{ $attributes }}>
|
|
@if ($icon)
|
|
<x-livewire-material::icon :name="$icon" :class="$iconSize" />
|
|
@endif
|
|
|
|
@if ($extended)
|
|
<span>{{ $label ?? $slot }}</span>
|
|
@endif
|
|
|
|
@if ($tooltip !== null)
|
|
<x-livewire-material::tooltip :text="$tooltip" :anchor="$anchor" />
|
|
@endif
|
|
</{{ $tag }}>
|