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

Hide a disabled fab button on a compact window, as M3 removes a FAB

Browse Source 
`<x-button fab>` is an extended FAB below `medium` and a filled button
from there, but a disabled one was still drawn as the FAB below
`medium`: the compact FAB's rule set no state of its own, so the button
stood greyed out and fixed over the content. M3 never disables a FAB:
"if its action is unavailable, remove the FAB entirely".

A `fab` given `disabled` (a `<button disabled>`, or a link's
`aria-disabled="true"`) now renders `data-md-unavailable`, and
button.css draws it `display: none` below `medium`, which also takes it
out of the accessibility tree and the Tab order; from `medium` it is
the disabled filled button it was. The mark comes from the prop, not
from `:disabled`, because a `spinner` puts `disabled` on its button
while the action runs, and that FAB is busy rather than unavailable:
hidden, it would vanish instead of showing its loading indicator. The
docblocks and the skill's button table say so.

A browser test renders an enabled fab with a slow spinner action, a
disabled one and a disabled link on a 393px window: the disabled two
are not rendered, the busy one stays on screen with its indicator, and
at 600px both disabled ones are the disabled button again; it fails
without the change in Chrome, Firefox and Safari (and in Chrome with
`:disabled` alone as the condition, on the busy FAB). A feature test
reads the mark and the rule.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Andreas Reinhold / reini
2026-09-17 07:00:40 +02:00
co-authored by Claude Opus 5
parent cf63f11bfb
commit 6d4487feb3
6 changed files with 104 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Feature/Components/ButtonTest.php
+9
View File
@@ -265,6 +265,15 @@ it('is a FAB on a compact window and a filled button from medium, in one element
->and($fab['bottom'])->toBe('calc(var(--material-bottom-bar, 0px) + var(--material-snackbar-height, 0px) + var(--md-sys-measurement-space200))');
});
it('marks a disabled fab button unavailable, which is not drawn below medium, and nothing else', function () {
expect(buttonAttributes('<x-button label="New share" icon="add" fab disabled />'))->toMatchArray(['data-md-unavailable' => 'data-md-unavailable', 'disabled' => 'disabled'])
->and(buttonAttributes('<x-button label="New share" icon="add" link="/shares/new" fab disabled />'))->toMatchArray(['data-md-unavailable' => 'data-md-unavailable', 'aria-disabled' => 'true'])
// A spinner disables the button only while its action runs: busy, not unavailable.
->and(buttonAttributes('<x-button label="New share" icon="add" fab wire:click="create" spinner />'))->not->toHaveKey('data-md-unavailable')
->and(buttonAttributes('<x-button label="Delete" disabled />'))->not->toHaveKey('data-md-unavailable')
->and(buttonCss()->declarations('[data-md-button][data-md-compact-fab][data-md-unavailable]', ['@media (width < 600px)']))->toBe(['display' => 'none']);
});
it('submits a form when asked', function () {
$this->blade('<x-button label="Save" type="submit" />')
->assertSee('type="submit"', false);