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

Take disabled off the FAB, and fix its extended metrics

Browse Source 
M3 is explicit twice over — never disable a FAB, remove it instead — and the
prop painted the full disabled treatment with nothing warning against it. It is
gone; hiding the FAB is the documented answer. The extended FAB's icon-to-label
gap goes to M3's 16dp at md and 20dp at lg, the small one takes the baseline's
80dp minimum width, and the root gains a `data-fab` hook for a place that draws
a nested FAB its own way. Plan step 18, actions.md ACT-08, ACT-16, ACT-31.

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
2026-09-14 06:05:04 +02:00
co-authored by Claude Opus 5
parent 9828c9258a
commit deb7ff8ab5
3 changed files with 33 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Feature/Components/FabTest.php
+21 -1
View File
@@ -27,12 +27,32 @@ it('fills the FAB\'s glyph, as M3 asks twice over', function () {
it('extends with a label', function () {
expect((string) $this->blade('<x-fab icon="upload" label="Upload" size="md" color="tertiary" variant="filled" />'))
->toContain('h-20 min-w-20 gap-3 px-[26px] rounded-corner-lg-increased type-title-lg')
->toContain('h-20 min-w-20 gap-4 px-[26px] rounded-corner-lg-increased type-title-lg')
->toContain('bg-tertiary text-on-tertiary')
->toContain('<span>Upload</span>')
->not->toContain('aria-label');
});
it('gives the extended FAB M3\'s gaps and its 80px minimum width', function (string $size, string $classes) {
expect((string) $this->blade("<x-fab icon=\"add\" label=\"New\" size=\"{$size}\" />"))->toContain($classes);
})->with([
'sm' => ['sm', 'h-14 min-w-20 gap-2'],
'md' => ['md', 'h-20 min-w-20 gap-4'],
'lg' => ['lg', 'h-24 min-w-24 gap-5'],
]);
it('marks its root for the places that draw a nested FAB their own way', function () {
expect((string) $this->blade('<x-fab icon="add" aria-label="New" />'))->toContain('data-fab');
});
it('cannot be disabled, because M3 says to remove a FAB instead', function () {
$html = (string) $this->blade('<x-fab icon="add" aria-label="New" disabled />');
// `disabled` is no longer a prop, so it falls through as a plain attribute rather than
// painting M3's disabled treatment.
expect($html)->not->toContain('disabled:bg-on-surface/10')->not->toContain('disabled:shadow-none');
});
it('opens a FAB menu of end-aligned actions above it', function () {
$html = (string) $this->blade(<<<'BLADE'
<x-fab-menu label="New" color="secondary">