Andreas ReinholdandClaude Opus 5
eac7f6a1de
Its trigger holds two aria-hidden icons and wrote aria-label only when a caller passed `label`, so an unnamed button was the default; `label` now falls back to "Toggle menu" and is always written. The list had no ceiling, so six items ran off a landscape phone — it now scrolls under the FAB, which stays put — and its items rose into place but vanished on close, because the popover took its display away before they could move. Plan step 18, actions.md ACT-21, ACT-32, ACT-33. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
83 lines
3.8 KiB
PHP
83 lines
3.8 KiB
PHP
<?php
|
|
|
|
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"');
|
|
});
|
|
|
|
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);
|
|
})->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'],
|
|
]);
|
|
|
|
it('fills the FAB\'s glyph, as M3 asks twice over', function () {
|
|
$svg = trim((string) file_get_contents(__DIR__.'/../../../resources/svg/symbols/filled/add.svg'));
|
|
$filled = substr($svg, (int) strpos($svg, '><') + 1);
|
|
|
|
expect((string) $this->blade('<x-fab icon="add" aria-label="New" />'))->toContain($filled)
|
|
->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('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">
|
|
<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);
|
|
});
|