Draw the FAB's state layer and focus ring from the classes
Plan step 36 ("Interaction is the shared classes", the user, 2026-09-14).
fab.css hand-rolled the same declarations as foundation/interaction.css's
md-state-layer and md-focus-ring; it now renders those classes and keeps
only its own hover elevation, colour and motion. Every FAB size draws at
56px or more, so it needs no md-touch-target.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
co-authored by
Claude Opus 5
parent
bfd368e463
commit
ea12f9d75b
@@ -114,7 +114,15 @@ it('collapses an extended FAB to a FAB on scroll when asked', function () {
|
||||
});
|
||||
|
||||
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-md-fab')->not->toContain('class=');
|
||||
expect((string) $this->blade('<x-fab icon="add" aria-label="New" />'))->toContain('data-md-fab')
|
||||
->toContain('class="md-state-layer md-focus-ring"');
|
||||
});
|
||||
|
||||
it('draws its state layer and focus ring from the foundation\'s shared classes, not its own', function () {
|
||||
$css = ComponentStylesheet::read('fab');
|
||||
|
||||
expect($css->has('[data-md-fab]::before'))->toBeFalse()
|
||||
->and($css->has('[data-md-fab]:focus-visible'))->toBeFalse();
|
||||
});
|
||||
|
||||
it('cannot be disabled, because M3 says to remove a FAB instead', function () {
|
||||
|
||||
Reference in New Issue
Block a user