Andreas Reinhold / reiniandClaude Opus 5
f33fb8be64
Plan step 25, item 8 (navigation Missing: "Toolbar, large-screen treatments"). M3's toolbar guidelines (Adaptive design, Resizing) say it of the docked toolbar: "On web and large screens, the docked toolbar can be rounded. Dividers can be used to organize large amounts of items", and it can be placed in different parts of the page. `rounded` does that from expanded (840px): fully rounded, spanning its container, lifted 16px off the window's edges at place="bottom"; below expanded it stays the square full-width bar. An <x-divider vertical /> between groups of controls stands as tall as the icon buttons inside any toolbar. The floating toolbar is already fully rounded and gets no new form. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
48 lines
3.1 KiB
PHP
48 lines
3.1 KiB
PHP
<?php
|
|
|
|
// 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-variant="docked"\s+data-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+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-variant="floating"')
|
|
->not->toContain('data-rounded')
|
|
->and((string) $this->blade('<x-toolbar variant="docked"><x-button icon="undo" tooltip="Undo" /></x-toolbar>'))
|
|
->not->toContain('data-rounded');
|
|
});
|
|
|
|
it('rounds a docked toolbar from expanded only, and lifts a placed one off the window\'s edges', function () {
|
|
$css = file_get_contents(__DIR__.'/../../../resources/css/components/toolbar.css');
|
|
|
|
preg_match('/@media \(width >= 52\.5rem\) \{(.*)\}\s*$/s', $css, $expanded);
|
|
|
|
expect($expanded[1] ?? '')
|
|
// "On web and large screens, the docked toolbar can be rounded" (toolbars/guidelines).
|
|
->toMatch('/\[data-toolbar\]\[data-variant="docked"\]\[data-rounded\] \{[^}]*border-radius: var\(--md-sys-shape-corner-full\);/')
|
|
->toMatch('/\[data-toolbar\]\[data-variant="docked"\]\[data-rounded\] \{[^}]*padding-bottom: 0;/')
|
|
// 16dp from each side, M3's minimum outside padding; 16px above a bottom bar.
|
|
->toMatch('/\[data-rounded\]\[data-toolbar-place="bottom"\] \{[^}]*right: calc\(1rem \+ var\(--material-safe-right, env\(safe-area-inset-right\)\)\);/')
|
|
->toMatch('/\[data-rounded\]\[data-toolbar-place="bottom"\] \{[^}]*left: calc\(1rem \+ var\(--material-safe-left, env\(safe-area-inset-left\)\)\);/')
|
|
->toMatch('/\[data-rounded\]\[data-toolbar-place="bottom"\] \{[^}]*bottom: calc\(max\(var\(--material-bottom-bar, 0px\), var\(--material-safe-bottom, env\(safe-area-inset-bottom\)\)\) \+ 1rem\);/')
|
|
// Nothing outside the query rounds a docked toolbar: below expanded it stays square.
|
|
->and(str_replace($expanded[0] ?? '', '', $css))
|
|
->not->toContain('[data-rounded]');
|
|
});
|
|
|
|
it('stands a divider in a toolbar as tall as the buttons it separates', function () {
|
|
expect(file_get_contents(__DIR__.'/../../../resources/css/components/toolbar.css'))
|
|
->toMatch('/\[data-toolbar\]:not\(\[data-vertical\]\) > \[role="separator"\]\[aria-orientation="vertical"\] \{\s+align-self: center;\s+height: 2\.5rem;/')
|
|
->toMatch('/\[data-toolbar\]\[data-vertical\] > \[role="separator"\]\[aria-orientation="horizontal"\] \{\s+align-self: center;\s+width: 2\.5rem;/');
|
|
});
|