*/ 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 () { $css = ComponentStylesheet::read('fab'); expect(fabAttributes(''))->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(''))->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 $px, string $corner, int $icon) { expect((string) $this->blade(""))->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', '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 () { $svg = trim((string) file_get_contents(__DIR__.'/../../../resources/svg/symbols/filled/add.svg')); $filled = substr($svg, (int) strpos($svg, '><') + 1); expect((string) $this->blade(''))->toContain($filled) ->and((string) $this->blade(''))->toContain($filled); }); it('extends with a label, in the colour itself when filled', function () { expect(fabAttributes('')) ->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(''))->toContain('Upload') ->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 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', '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(''); $css = ComponentStylesheet::read('fab'); expect($html) ->toContain('x-data="materialFab"') ->toContain('x-bind:data-md-collapsed="collapsed ? '' : 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('New share') ->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(''))->not->toContain('materialFab') ->and((string) $this->blade(''))->not->toContain('materialFab') ->and((string) $this->blade(''))->not->toContain('materialFab')->toContain('New share'); }); it('marks its root for the places that draw a nested FAB their own way', function () { expect((string) $this->blade(''))->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 () { // `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(''))->toContain('disabled="disabled"') ->and(ComponentStylesheet::read('fab')->css)->not->toContain(':disabled'); }); // The FAB menu itself and its items: tests/Feature/Components/FabMenuTest.php.