Andreas Reinhold / reiniandClaude Sonnet 5
9c134b2dc7
Plan step 36 (navigation group, second stream): <x-toolbar>'s class
lists move into resources/css/components/toolbar.css, keyed on
data-md-toolbar (data-md-variant/-vertical/-vibrant/-rounded/
-toolbar-place) and data-md-toolbar-group/-toolbar-fab. The docked
form with a FAB (N-02's --material-bottom-bar clearance), the vertical
24dp margin (N-12), the standard toolbar's primary icon buttons
(N-13), and the rounded large-screen form with dividers from 840px
were all already correct; only their hooks, units and layer needed to
change. The file no longer sits outside every layer: button.css and
fab.css now draw their own ink through data-md-* attributes rather
than a Tailwind utility, so a toolbar's more specific selector always
beats their single base color/background-color/box-shadow declaration
without needing to escape the cascade layers.
Sizes stay px (64px row, 40px divider); spacing goes through the
measurement tokens where one matches the value (4px leading/trailing
gap, 16/32px docked spread, 8px floating ends, 16/24px placed
margins).
Hooks renamed: every unprefixed data-toolbar* attribute to data-md-*,
updated in tests/Feature/Components/{AppBarTest,ToolbarTest}.php and
tests/Browser/BarsTest.php. toolbar.js needed no change: it reads the
bar through $root and role="toolbar", not by hook name.
Carry-over from the app-bar step: layout/pane.css now imports
app-bar.css and button.css for the pane's own top app bar and back
button, now that both are rewritten. That import crosses into
material.components for the first time from a layout file, so
tests/Feature/StylesheetsTest.php's two layout-shape checks now skip
non-`layout/` files reached through it — each already covered by its
own group's stylesheet test.
Added the owed browser tests (docs/plans/material-3-browser-tests.md):
a docked toolbar clear of the navigation bar below medium, and the
rounded form with its divider height from 840px, clear of the
window's edges.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
56 lines
3.3 KiB
PHP
56 lines
3.3 KiB
PHP
<?php
|
|
|
|
use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
|
|
|
|
// The toolbar's first tests live in AppBarTest.php, beside the app bar they were written with.
|
|
|
|
it('gives a docked toolbar the rounded large-screen form on request, and only a docked one', function () {
|
|
$docked = (string) $this->blade(<<<'BLADE'
|
|
<x-toolbar variant="docked" rounded label="Formatting">
|
|
<x-button icon="undo" tooltip="Undo" />
|
|
<x-divider vertical />
|
|
<x-button icon="format_bold" tooltip="Bold" />
|
|
</x-toolbar>
|
|
BLADE);
|
|
|
|
expect($docked)
|
|
->toMatch('/role="toolbar"[^>]*data-md-variant="docked"\s+data-md-rounded/')
|
|
// The divider between two groups is the toolbar's child, where toolbar.css stands it up.
|
|
->toMatch('/role="toolbar".*aria-label="Undo".*<div\s+data-md-divider\s+data-md-orientation="vertical"\s+role="separator" aria-orientation="vertical"[^>]*>\s*<\/div>.*aria-label="Bold"/s')
|
|
->and((string) $this->blade('<x-toolbar rounded><x-button icon="undo" tooltip="Undo" /></x-toolbar>'))
|
|
->toContain('data-md-variant="floating"')
|
|
->not->toContain('data-md-rounded')
|
|
->and((string) $this->blade('<x-toolbar variant="docked"><x-button icon="undo" tooltip="Undo" /></x-toolbar>'))
|
|
->not->toContain('data-md-rounded');
|
|
});
|
|
|
|
it('rounds a docked toolbar from expanded only, and lifts a placed one off the window\'s edges', function () {
|
|
$css = ComponentStylesheet::read('toolbar');
|
|
|
|
expect($css->declarations('[data-md-toolbar][data-md-variant=\'docked\'][data-md-rounded]', ['@media (width >= 840px)']))
|
|
// "On web and large screens, the docked toolbar can be rounded" (toolbars/guidelines).
|
|
->toBe(['min-height' => '64px', 'padding-bottom' => '0', 'border-radius' => 'var(--md-sys-shape-corner-full)'])
|
|
// 16dp from each side, M3's minimum outside padding; 16px above a bottom bar.
|
|
->and($css->declarations('[data-md-toolbar][data-md-variant=\'docked\'][data-md-rounded][data-md-toolbar-place=\'bottom\']', ['@media (width >= 840px)']))
|
|
->toBe([
|
|
'right' => 'calc(var(--md-sys-measurement-space200) + var(--material-safe-right, env(safe-area-inset-right)))',
|
|
'bottom' => 'calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + var(--md-sys-measurement-space200))',
|
|
'left' => 'calc(var(--md-sys-measurement-space200) + var(--material-safe-left, env(safe-area-inset-left)))',
|
|
'width' => 'auto',
|
|
]);
|
|
|
|
preg_match('/@media \(width >= 840px\) \{(.*)\}\s*\}\s*$/s', $css->css, $expanded);
|
|
|
|
// Nothing outside the query rounds a docked toolbar: below expanded it stays square.
|
|
expect(str_replace($expanded[0] ?? '', '', $css->css))->not->toContain('[data-md-rounded]');
|
|
});
|
|
|
|
it('stands a divider in a toolbar as tall as the buttons it separates', function () {
|
|
$css = ComponentStylesheet::read('toolbar');
|
|
|
|
expect($css->declarations('[data-md-toolbar]:not([data-md-vertical]) > [role=\'separator\'][aria-orientation=\'vertical\']'))
|
|
->toBe(['align-self' => 'center', 'height' => '40px'])
|
|
->and($css->declarations('[data-md-toolbar][data-md-vertical] > [role=\'separator\'][aria-orientation=\'horizontal\']'))
|
|
->toBe(['align-self' => 'center', 'width' => '40px']);
|
|
});
|