noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Draw the FAB menu's trigger and items from the interaction classes

Browse Source 
Plan step 36 ("Interaction is the shared classes", the user, 2026-09-14).
The trigger button (fab-menu.css) and each item (fab-menu-item.css)
hand-rolled md-state-layer and md-focus-ring; both now render the classes
and keep only their own colour, shape and motion. Neither needs
md-touch-target: the trigger and every item draw at 56px.

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
2026-09-14 18:08:47 +02:00
co-authored by Claude Opus 5
parent 6c30f1e3ae
commit 5a9211acd4
5 changed files with 22 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components/fab-menu-item.css
+3 -35
View File
@@ -4,7 +4,9 @@
*
* 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, `data-md-color`'s
* container.
* container. It renders the foundation's `md-state-layer` and `md-focus-ring`
* (foundation/interaction.css); its 56px already meets M3's target, so it needs no
* `md-touch-target`.
*
* The entry is `@starting-style` on the item itself; the exit needs the state to be readable
* while the popover is on its way out, which `[data-md-fab-menu-popover]:not(:popover-open) > *`
@@ -21,8 +23,6 @@
--md-fab-menu-item-container: var(--md-sys-color-primary-container);
--md-fab-menu-item-on-container: var(--md-sys-color-on-primary-container);
position: relative;
isolation: isolate;
display: inline-flex;
flex-shrink: 0;
align-items: center;
@@ -38,7 +38,6 @@
letter-spacing: var(--md-sys-typescale-title-md-tracking);
font-variation-settings: normal;
cursor: pointer;
outline: none;
-webkit-user-select: none;
user-select: none;
translate: 0 0;
@@ -51,37 +50,6 @@
var(--md-sys-motion-spatial-fast), var(--md-sys-motion-effects-default), linear, linear;
transition-behavior: allow-discrete;
&::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background-color: currentColor;
opacity: 0;
pointer-events: none;
transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
}
@media (hover: hover) {
&:hover::before {
opacity: var(--md-sys-state-hover-state-layer-opacity);
}
}
&:focus-visible {
outline: 3px solid var(--md-sys-color-secondary);
outline-offset: 2px;
}
&:focus-visible::before {
opacity: var(--md-sys-state-focus-state-layer-opacity);
}
&:active::before {
opacity: var(--md-sys-state-pressed-state-layer-opacity);
}
@starting-style {
translate: 0 var(--md-sys-measurement-space100);
opacity: 0;
resources/css/components/fab-menu.css
+3 -33
View File
@@ -4,7 +4,9 @@
* FabMenuBaselineTokens (androidx Compose Material 3, Apache-2.0): the trigger is a 56px FAB,
* `data-md-color`'s container, large corner, elevation 3, rising to elevation 4 under a hovering
* pointer; while its list is open (`aria-expanded`) it turns fully round and paints the colour
* itself, on the default spatial and effects springs (ACT-19 splits the two). The list sits
* itself, on the default spatial and effects springs (ACT-19 splits the two). It renders the
* foundation's `md-state-layer` and `md-focus-ring` (foundation/interaction.css); its 56px already
* meets M3's target, so it needs no `md-touch-target`. The list sits
* `data-md-position`'s corner of the trigger, 8px padding — the room the close button keeps below
* the first item — and scrolls past `calc(100dvh - 128px)` on a short window, behind the close
* button, which stays fixed (ACT-32).
@@ -39,8 +41,6 @@
--md-fab-menu-color: var(--md-sys-color-primary);
--md-fab-menu-on-color: var(--md-sys-color-on-primary);
position: relative;
isolation: isolate;
display: inline-flex;
flex-shrink: 0;
align-items: center;
@@ -52,7 +52,6 @@
color: var(--md-fab-menu-on-container);
box-shadow: var(--md-sys-elevation-3);
cursor: pointer;
outline: none;
-webkit-user-select: none;
user-select: none;
transition-property: border-radius, background-color, color, box-shadow;
@@ -63,39 +62,10 @@
var(--md-sys-motion-spatial-default), var(--md-sys-motion-effects-default),
var(--md-sys-motion-effects-default), var(--md-sys-motion-effects-default);
&::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background-color: currentColor;
opacity: 0;
pointer-events: none;
transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
}
@media (hover: hover) {
&:hover {
box-shadow: var(--md-sys-elevation-4);
}
&:hover::before {
opacity: var(--md-sys-state-hover-state-layer-opacity);
}
}
&:focus-visible {
outline: 3px solid var(--md-sys-color-secondary);
outline-offset: 2px;
}
&:focus-visible::before {
opacity: var(--md-sys-state-focus-state-layer-opacity);
}
&:active::before {
opacity: var(--md-sys-state-pressed-state-layer-opacity);
}
&[aria-expanded='true'] {
resources/views/components/fab-menu-item.blade.php
+1 -1
View File
@@ -32,7 +32,7 @@
'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));
], fn ($value): bool => $value !== null))->class(['md-state-layer', 'md-focus-ring']);
@endphp
<{{ $tag }} {{ $attributes }}>
resources/views/components/fab-menu.blade.php
+1 -1
View File
@@ -53,7 +53,7 @@
x-on:keydown.down.prevent="open('first')"
x-on:keydown.up.prevent="open('last')"
>
<button type="button" aria-label="{{ $label }}" data-md-fab-menu-trigger data-md-color="{{ $color }}">
<button type="button" class="md-state-layer md-focus-ring" aria-label="{{ $label }}" data-md-fab-menu-trigger data-md-color="{{ $color }}">
<x-livewire-material::icon :name="$icon" filled data-md-fab-menu-icon />
<x-livewire-material::icon name="close" filled size="20" data-md-fab-menu-close-icon />
</button>
tests/Feature/Components/FabMenuTest.php
+14
View File
@@ -33,6 +33,20 @@ it('opens a FAB menu of end-aligned actions above it', function () {
]);
});
it('draws the trigger and its items from the foundation\'s shared classes, not their own', function () {
$html = (string) $this->blade(<<<'BLADE'
<x-fab-menu label="New">
<x-fab-menu-item label="Upload files" icon="upload_file" />
</x-fab-menu>
BLADE);
expect($html)
->toContain('class="md-state-layer md-focus-ring" aria-label="New"')
->toMatch('/<button class="md-state-layer md-focus-ring" data-md-fab-menu-item="data-md-fab-menu-item"/')
->and(ComponentStylesheet::read('fab-menu')->has('[data-md-fab-menu-trigger]::before'))->toBeFalse()
->and(ComponentStylesheet::read('fab-menu-item')->has('[data-md-fab-menu-item]::before'))->toBeFalse();
});
it('names the FAB menu even when the caller forgets to', function () {
expect((string) $this->blade('<x-fab-menu />'))
->toContain('aria-label="Toggle menu"')