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

Draw the FAB without Tailwind

Browse Source 
Plan step 36. <x-fab> renders data-md-fab with data-md-size,
data-md-color, data-md-variant, data-md-extended and, collapsing on
scroll, data-md-collapse-on-scroll with a bound data-md-collapsed; it
passes its glyph's size to <x-icon>. fab.css draws FabBaseline/Medium/
LargeTokens and ExtendedFab*Tokens per size, the container and filled
colours, elevation 3 and 4 on hover, the state layer and focus ring,
and the collapse morph that leaves actions.css.

data-fab becomes data-md-fab, also in navigation.css (the rail flattens
a nested FAB) and toolbar.css (a docked toolbar's FAB), with their tests.
The actions browser test gains the owed collapse-on-scroll test.

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 15:06:45 +02:00
co-authored by Claude Opus 5
parent 2a4dcead3d
commit 1cf4f16c95
11 changed files with 357 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Browser/ActionsTest.php
+21
View File
@@ -465,6 +465,27 @@ it('closes a FAB menu when an item\'s action runs, and opens and closes it clean
->assertScript(focused("getAttribute('aria-label') === 'New'"));
});
it('collapses an extended FAB to a FAB while the page scrolls down, and extends it on the way back', function () {
$fab = "document.querySelector('#buttons [data-md-collapse-on-scroll]')";
// Reduced motion takes the spring's duration to zero, so the width is final at once.
$page = visit('/material/buttons', ['reducedMotion' => 'reduce'])
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined'")
->assertScript("! {$fab}.hasAttribute('data-md-collapsed') && {$fab}.getBoundingClientRect().width > 56");
$page->script('window.scrollTo(0, 600)');
$page->assertScript("{$fab}.hasAttribute('data-md-collapsed')")
->assertScript("Math.round({$fab}.getBoundingClientRect().width) === 56")
// Clipped, not removed: the collapsed FAB keeps the extended one's name.
->assertScript("{$fab}.textContent.trim() === 'Compose'");
$page->script('window.scrollTo(0, 200)');
$page->assertScript("! {$fab}.hasAttribute('data-md-collapsed')")
->assertScript("{$fab}.getBoundingClientRect().width > 56");
});
it('takes a press on a small connected segment at its 48px edge, past what it draws', function () {
// M3: "XS and S connected button groups have a 48dp target area and a 48dp minimum width".
showcase()->assertScript(<<<'JS'
tests/Feature/Components/ActionStylesheetsTest.php
+1
View File
@@ -18,6 +18,7 @@ dataset('action components', [
'group',
'button-group',
'split-button',
'fab',
]);
it('draws the component from a stylesheet shaped like every package stylesheet', function (string $name) {
tests/Feature/Components/AppBarTest.php
+1 -1
View File
@@ -168,7 +168,7 @@ it('sets a FAB at the end of a docked toolbar, resting flat on it', function ()
expect(file_get_contents(__DIR__.'/../../../resources/css/components/toolbar.css'))
->toMatch('/\[data-toolbar-fab\] \{\s+display: flex;\s+margin-inline-start: auto;/')
// A nested FAB rests at elevation 0.
->toMatch('/\[data-toolbar-fab\] \[data-fab\],\s+\[data-toolbar-fab\] \[data-fab\]:hover \{\s+box-shadow: none;/');
->toMatch('/\[data-toolbar-fab\] \[data-md-fab\],\s+\[data-toolbar-fab\] \[data-md-fab\]:hover \{\s+box-shadow: none;/');
});
it('centres a headline on a three-column row and curves the search container', function () {
tests/Feature/Components/FabTest.php
+86 -32
View File
@@ -1,20 +1,54 @@
<?php
use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
/**
* The attributes of the rendered FAB, by name.
*
* @return array<string, string>
*/
function fabAttributes(string $blade): array
{
preg_match('/<(?:button|a)\b([^>]*)>/', (string) test()->blade($blade), $tag);
preg_match_all('/([\w:.-]+)(?:="([^"]*)")?/', $tag[1] ?? '', $pairs, PREG_SET_ORDER);
return collect($pairs)->mapWithKeys(fn (array $pair): array => [$pair[1] => $pair[2] ?? ''])->all();
}
it('draws a FAB in its container colour, named by its tooltip', function () {
expect((string) $this->blade('<x-fab icon="add" tooltip="New share" />'))
->toContain('size-14 rounded-corner-lg')
->toContain('bg-primary-container text-on-primary-container')
->toContain('shadow-elevation-3')
->toContain('aria-label="New share"')
->toContain('popover="manual"');
$css = ComponentStylesheet::read('fab');
expect(fabAttributes('<x-fab icon="add" tooltip="New share" />'))->toMatchArray([
'data-md-fab' => 'data-md-fab',
'data-md-size' => 'sm',
'data-md-color' => 'primary',
'data-md-variant' => 'container',
'type' => 'button',
'aria-label' => 'New share',
])
->not->toHaveKey('data-md-extended')
->and((string) $this->blade('<x-fab icon="add" tooltip="New share" />'))->toContain('popover="manual"')
->and($css->declarations('[data-md-fab]'))->toMatchArray([
'background-color' => 'var(--md-fab-container)',
'color' => 'var(--md-fab-on-container)',
'box-shadow' => 'var(--md-sys-elevation-3)',
'block-size' => 'var(--md-fab-size)',
'border-radius' => 'var(--md-fab-corner)',
])
->and($css->declarations('[data-md-fab]:hover', ['@media (hover: hover)']))->toBe(['box-shadow' => 'var(--md-sys-elevation-4)'])
->and($css->declarations('[data-md-fab]:not([data-md-extended])'))->toBe(['inline-size' => 'var(--md-fab-size)']);
});
it('sizes a FAB at 56, 80 and 96px', function (string $size, string $classes, string $icon) {
expect((string) $this->blade("<x-fab icon=\"add\" size=\"{$size}\" aria-label=\"Add\" />"))->toContain($classes)->toContain($icon);
it('sizes a FAB at 56, 80 and 96px', function (string $size, string $px, string $corner, int $icon) {
expect((string) $this->blade("<x-fab icon=\"add\" size=\"{$size}\" aria-label=\"Add\" />"))->toContain("data-md-size=\"{$size}\"")->toContain("--md-icon-size: {$icon}px")
->and(ComponentStylesheet::read('fab')->declarations("[data-md-fab][data-md-size='{$size}']"))->toMatchArray([
'--md-fab-size' => $px,
'--md-fab-corner' => "var(--md-sys-shape-corner-{$corner})",
]);
})->with([
'sm' => ['sm', 'size-14 rounded-corner-lg', 'size-6'],
'md' => ['md', 'size-20 rounded-corner-lg-increased', 'size-7'],
'lg' => ['lg', 'size-24 rounded-corner-xl', 'size-8'],
'sm' => ['sm', '56px', 'lg', 24],
'md' => ['md', '80px', 'lg-increased', 28],
'lg' => ['lg', '96px', 'xl', 32],
]);
it('fills the FAB\'s glyph, as M3 asks twice over', function () {
@@ -25,32 +59,53 @@ it('fills the FAB\'s glyph, as M3 asks twice over', function () {
->and((string) $this->blade('<x-fab-menu label="New" />'))->toContain($filled);
});
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-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('extends with a label, in the colour itself when filled', function () {
expect(fabAttributes('<x-fab icon="upload" label="Upload" size="md" color="tertiary" variant="filled" />'))
->toMatchArray(['data-md-size' => 'md', 'data-md-color' => 'tertiary', 'data-md-variant' => 'filled', 'data-md-extended' => 'data-md-extended'])
->not->toHaveKey('aria-label')
->and((string) $this->blade('<x-fab icon="upload" label="Upload" />'))->toContain('<span>Upload</span>')
->and(ComponentStylesheet::read('fab')->declarations("[data-md-fab][data-md-variant='filled']"))->toBe([
'background-color' => 'var(--md-fab-color)',
'color' => 'var(--md-fab-on-color)',
])
->and(ComponentStylesheet::read('fab')->declarations("[data-md-fab][data-md-color='tertiary']"))->toMatchArray([
'--md-fab-color' => 'var(--md-sys-color-tertiary)',
'--md-fab-container' => 'var(--md-sys-color-tertiary-container)',
]);
});
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);
it('gives the extended FAB M3\'s gaps and its minimum width', function (string $size, string $gap, string $padding, string $type, string $minimum) {
$css = ComponentStylesheet::read('fab');
expect($css->declarations("[data-md-fab][data-md-extended][data-md-size='{$size}']"))->toMatchArray([
'gap' => $gap,
'padding-inline' => $padding,
'font' => "var(--md-sys-typescale-{$type})",
])
->and($css->declarations("[data-md-fab][data-md-size='{$size}']"))->toMatchArray(['--md-fab-extended-min' => $minimum])
->and($css->declarations('[data-md-fab][data-md-extended]'))->toBe(['min-inline-size' => 'var(--md-fab-extended-min)']);
})->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'],
'sm' => ['sm', 'var(--md-sys-measurement-space100)', 'var(--md-sys-measurement-space200)', 'title-md', '80px'],
'md' => ['md', 'var(--md-sys-measurement-space200)', '26px', 'title-lg', '80px'],
'lg' => ['lg', '20px', '28px', 'headline-sm', '96px'],
]);
it('collapses an extended FAB to a FAB on scroll when asked', function () {
$html = (string) $this->blade('<x-fab icon="add" label="New share" size="lg" collapse-on-scroll />');
$css = ComponentStylesheet::read('fab');
expect($html)
->toContain('x-data="materialFab"')
->toContain('x-bind:data-collapsed="collapsed ? &#039;&#039; : null"')
->toContain('data-fab-collapsible')
->toContain('data-fab-size="lg"')
->toContain('x-bind:data-md-collapsed="collapsed ? &#039;&#039; : null"')
->toContain('data-md-collapse-on-scroll')
->toContain('data-md-size="lg"')
// The label is clipped, never removed, so the collapsed FAB keeps its name.
->toContain('<span data-fab-label><span>New share</span></span>');
->toContain('<span data-md-fab-label><span>New share</span></span>')
->and($css->declarations('[data-md-fab][data-md-collapse-on-scroll][data-md-collapsed]'))->toBe(['min-inline-size' => 'var(--md-fab-size)', 'gap' => '0'])
->and($css->declarations('[data-md-fab][data-md-collapse-on-scroll][data-md-collapsed] [data-md-fab-label]'))->toBe(['grid-template-columns' => '0fr', 'opacity' => '0'])
->and($css->declarations("[data-md-fab][data-md-collapse-on-scroll][data-md-size='lg'][data-md-collapsed]"))->toBe(['padding-inline' => 'var(--md-sys-measurement-space400)'])
// Width and gap on the spatial spring, colour and shadow on the effects spring.
->and($css->declarations('[data-md-fab][data-md-collapse-on-scroll]')['transition-property'])->toBe('min-inline-size, padding-inline, gap, box-shadow, background-color, color');
// A plain FAB has nothing to collapse, and an extended FAB without a glyph would collapse to nothing.
expect((string) $this->blade('<x-fab icon="add" aria-label="New" collapse-on-scroll />'))->not->toContain('materialFab')
@@ -59,15 +114,14 @@ 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-fab');
expect((string) $this->blade('<x-fab icon="add" aria-label="New" />'))->toContain('data-md-fab')->not->toContain('class=');
});
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');
// `disabled` is not a prop, so it falls through as a plain attribute, and the stylesheet
// draws no disabled treatment for it.
expect((string) $this->blade('<x-fab icon="add" aria-label="New" disabled />'))->toContain('disabled="disabled"')
->and(ComponentStylesheet::read('fab')->css)->not->toContain(':disabled');
});
it('opens a FAB menu of end-aligned actions above it', function () {
tests/Feature/Components/NavigationRailTest.php
+4 -4
View File
@@ -132,14 +132,14 @@ it('hides a collapsible or adaptive rail entirely when told to, and only those',
});
it('flattens a FAB nested in the rail header and morphs its label', function () {
// Both rules hang off `data-fab` on <x-fab>'s root, and both are unlayered, because what they
// Both rules hang off `data-md-fab` on <x-fab>'s root, and both are unlayered, because what they
// beat — the FAB's shadow, its gap, an extended FAB's minimum width — are utilities.
expect(file_get_contents(__DIR__.'/../../../resources/css/components/navigation.css'))
// A nested FAB rests at elevation 0, not the 3 a standalone one has (N-03).
->toContain('[data-navigation-rail-header] [data-fab],')
->toContain('[data-navigation-rail-header] [data-fab]:hover {')
->toContain('[data-navigation-rail-header] [data-md-fab],')
->toContain('[data-navigation-rail-header] [data-md-fab]:hover {')
// One FAB whose label springs shut, not two swapped by display (N-23).
->toContain('[data-navigation-rail-header] [data-fab] > span {')
->toContain('[data-navigation-rail-header] [data-md-fab] > span {')
->toMatch('/@variant rail-collapsed \{\s+min-width: 0;\s+aspect-ratio: 1;\s+gap: 0;/');
});