Andreas Reinhold / reiniandClaude Opus 5
cd64f4f371
tests / browser (firefox, firefox) (push) Successful in 1m54s
tests / browser (safari, webkit) (push) Successful in 2m17s
tests / lint (push) Successful in 59s
tests / feature (8.4) (push) Successful in 1m7s
tests / feature (8.5) (push) Successful in 1m0s
tests / browser (chrome, chromium) (push) Successful in 1m49s
<x-button> (label buttons, icon buttons and toggles in five sizes, with filled, tonal, outlined, elevated and text variants in any colour role), <x-tooltip>, <x-menu> with items, groups and separators, <x-button-group>, <x-group> as a connected button group, <x-split-button>, <x-fab>, <x-fab-menu> and <x-loading>. Sizes, colours and shapes come from androidx Compose Material 3's tokens; the loading indicator ports its Morph into SVG + SMIL. Menus follow WAI-ARIA's menu button pattern on popovers placed by CSS anchor positioning. Browser tests run in Chromium, Firefox and WebKit. The showcase fetches the icon names on demand: inlined, they tripped Pest's test server into HTTP 431s under Firefox. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
79 lines
3.8 KiB
PHP
79 lines
3.8 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>`.
|
|
|
|
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 }} {{ $attributes }}>
|
|
@if ($icon)
|
|
<x-icon :name="$icon" :class="$iconSize" />
|
|
@endif
|
|
|
|
@if ($extended)
|
|
<span>{{ $label ?? $slot }}</span>
|
|
@endif
|
|
|
|
@if ($tooltip !== null)
|
|
<x-tooltip :text="$tooltip" :anchor="$anchor" />
|
|
@endif
|
|
</{{ $tag }}>
|