Andreas Reinhold / reiniandClaude Sonnet 5
c887bcd054
Plan step 36 (containment group): <x-divider> moves its class lists into resources/css/components/divider.css, keyed on data-md-divider, data-md-orientation, data-md-inset/middle and data-md-divider-heading/ -text for the subheader form (DividerTokens.kt; docs/reference/m3 § Divider). Imported from the Containment block of components.css. Hooks renamed: none of divider's own (it had no data-* hooks before), but its rendered attribute order moved data-md-* ahead of role/aria-*, which ToolbarTest.php's regex for a toolbar's vertical divider depended on; fixed in the same commit. form.css picks up the @import './divider.css' its TODO(step 36) marker was waiting on, since form.blade.php renders <x-divider> and divider.css now carries the material.components layer. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
48 lines
3.2 KiB
PHP
48 lines
3.2 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+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-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;/');
|
|
});
|