Andreas Reinhold / reiniandClaude Opus 5
9eb06323aa
Plan step 35: <x-supporting-pane>, following the reference's placement table - below the focus pane below expanded, beside it from 840px at a fixed 360px (412px from large) or the two-thirds split. Below expanded compact="sheet" docks the supporting pane as a bottom sheet whose drag handle opens it; always on the trailing side, so focus order matches the panes on screen, and mirrored in RTL. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
73 lines
4.4 KiB
PHP
73 lines
4.4 KiB
PHP
<?php
|
|
|
|
it('draws the focus pane first and the supporting pane after it, fixed and below by default', function () {
|
|
$html = (string) $this->blade(<<<'BLADE'
|
|
<x-supporting-pane>
|
|
<x-slot:main><article>MAIN</article></x-slot:main>
|
|
<x-slot:supporting><ul>SUPPORTING</ul></x-slot:supporting>
|
|
</x-supporting-pane>
|
|
BLADE);
|
|
|
|
expect(layoutRoot($html))->toMatchArray([
|
|
'<' => 'div',
|
|
'data-md-supporting-pane' => 'data-md-supporting-pane',
|
|
'data-md-width' => 'fixed',
|
|
'data-md-compact' => 'below',
|
|
])
|
|
->and($html)->toMatch('/<div data-md-supporting-pane-main><article>MAIN<\/article><\/div>\s*<aside\s+data-md-supporting-pane-supporting\s*>\s*<div data-md-supporting-pane-body id="[^"]+"><ul>SUPPORTING<\/ul><\/div>\s*<\/aside>/s')
|
|
->not->toContain('data-md-supporting-pane-handle')
|
|
->not->toContain('x-data');
|
|
});
|
|
|
|
it('takes the default slot as the focus pane', function () {
|
|
expect((string) $this->blade('<x-supporting-pane>MAIN<x-slot:supporting>SIDE</x-slot:supporting></x-supporting-pane>'))
|
|
->toMatch('/<div data-md-supporting-pane-main>\s*MAIN\s*<\/div>/');
|
|
});
|
|
|
|
it('splits the window two-thirds to one-third, or keeps the fixed pane for anything else', function () {
|
|
expect(layoutRoot((string) $this->blade('<x-supporting-pane width="split" />'))['data-md-width'])->toBe('split')
|
|
->and(layoutRoot((string) $this->blade('<x-supporting-pane width="half" />'))['data-md-width'])->toBe('fixed');
|
|
});
|
|
|
|
it('names the supporting pane with its label', function () {
|
|
expect((string) $this->blade('<x-supporting-pane label="Comments" />'))->toMatch('/<aside\s+data-md-supporting-pane-supporting\s+aria-label="Comments"/');
|
|
});
|
|
|
|
it('docks the supporting pane as a bottom sheet below expanded, opened by its handle', function () {
|
|
$html = (string) $this->blade('<x-supporting-pane compact="sheet" label="Comments">MAIN<x-slot:supporting>SIDE</x-slot:supporting></x-supporting-pane>');
|
|
|
|
preg_match('/aria-controls="([^"]+)"/', $html, $controls);
|
|
|
|
expect(layoutRoot($html)['data-md-compact'])->toBe('sheet')
|
|
->and($html)->toContain('x-data="{ sheetOpen: false }"')
|
|
->toContain("x-bind:data-md-open=\"sheetOpen ? '' : null\"")
|
|
->toContain('x-on:keydown.escape="if (sheetOpen && $refs.handle.checkVisibility()) { sheetOpen = false; $refs.handle.focus() }"')
|
|
->toMatch('/<button\s+type="button"\s+class="md-state-layer md-focus-ring"\s+data-md-supporting-pane-handle\s+aria-expanded="false"/')
|
|
->toContain('x-bind:aria-expanded="sheetOpen.toString()"')
|
|
->toMatch('/<span data-md-supporting-pane-grip aria-hidden="true"><\/span>\s*<span class="md-type-title-sm" data-md-supporting-pane-label>Comments<\/span>/')
|
|
->toContain('<div data-md-supporting-pane-body id="'.$controls[1].'">SIDE</div>')
|
|
->and((string) $this->blade('<x-supporting-pane compact="sheet" />'))->toMatch('/data-md-supporting-pane-handle[^>]*aria-label="Show more"/s')
|
|
->and(layoutRoot((string) $this->blade('<x-supporting-pane compact="drawer" />'))['data-md-compact'])->toBe('below');
|
|
});
|
|
|
|
it('takes the element, the visibility props and the caller\'s class and style', function () {
|
|
expect(layoutRoot((string) $this->blade('<x-supporting-pane as="main" hide-from="extra-large" class="editor" style="min-height: 20rem" />')))
|
|
->toMatchArray([
|
|
'<' => 'main',
|
|
'data-md-hide-from' => 'extra-large',
|
|
'class' => 'editor',
|
|
'style' => 'min-height: 20rem;',
|
|
]);
|
|
});
|
|
|
|
it('places the supporting pane at M3\'s widths from expanded, in the layout layer', function () {
|
|
$css = (string) file_get_contents(__DIR__.'/../../../resources/css/layout/supporting-pane.css');
|
|
|
|
expect($css)->toContain('@layer material.layout')
|
|
->toContain("@media (width >= 840px) {\n grid-template-columns: minmax(0, 1fr) 360px;")
|
|
->toContain("@media (width >= 1200px) {\n grid-template-columns: minmax(0, 1fr) 412px;")
|
|
->toContain("[data-md-supporting-pane][data-md-width='split'] {\n grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);")
|
|
->toContain('inset-block-end: max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom)));')
|
|
->and((string) file_get_contents(__DIR__.'/../../../resources/css/layout.css'))->toContain("@import './layout/supporting-pane.css';");
|
|
});
|