noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions 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
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"')