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

Draw the FAB menu item without Tailwind

Browse Source 
<x-fab-menu-item> renders data-md-fab-menu-item and data-md-color
with no class list; fab-menu-item.css draws FabMenuBaselineTokens'
56px pill, 24px sides, 24px icon, full corner and elevation 3, and
the entry/exit rise-and-sink transition (ACT-33) that fab-menu.css's
[data-md-fab-menu]:not(:popover-open) rule will drive once the FAB
menu itself is rewritten. Its tests move out of FabTest.php into a
new FabMenuTest.php (plan step 36, actions).

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 16:18:18 +02:00
co-authored by Claude Opus 5
parent 5cdeec26e8
commit 330b835043
6 changed files with 194 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Feature/Components/FabTest.php
+1 -27
View File
@@ -124,30 +124,4 @@ it('cannot be disabled, because M3 says to remove a FAB instead', function () {
->and(ComponentStylesheet::read('fab')->css)->not->toContain(':disabled');
});
it('opens a FAB menu of end-aligned actions above it', function () {
$html = (string) $this->blade(<<<'BLADE'
<x-fab-menu label="New" color="secondary">
<x-fab-menu-item label="Upload files" icon="upload_file" color="secondary" wire:click="upload" />
</x-fab-menu>
BLADE);
expect($html)
->toContain('x-data="materialMenu"')
->toContain('aria-label="New"')
->toContain('bg-secondary-container text-on-secondary-container aria-expanded:bg-secondary aria-expanded:text-on-secondary')
->toContain('aria-expanded:rounded-corner-full')
->toContain('role="menu"')
->toContain('[position-area:top_span-left]')
->toContain('role="menuitem"')
->toContain('wire:click="upload"')
->toContain('h-14')
->toContain('Upload files')
->toContain('max-h-[calc(100dvh-8rem)] overflow-y-auto')
->toContain('data-fab-menu');
});
it('names the FAB menu even when the caller forgets to', function () {
expect((string) $this->blade('<x-fab-menu />'))
->toContain('aria-label="Toggle menu"')
->and(substr_count((string) $this->blade('<x-fab-menu />'), 'aria-label="Toggle menu"'))->toBe(2);
});
// The FAB menu itself and its items: tests/Feature/Components/FabMenuTest.php.