Add the supporting-pane canonical layout
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
This commit is contained in:
Andreas Reinhold / reini
co-authored by
Claude Opus 5
Claude Opus 5
parent
b5c5be1fd7
commit
9eb06323aa
@@ -312,3 +312,77 @@ it('selects from Alpine through x-model, with the layout\'s own back row', funct
|
||||
->assertScript(listDetailVisible(LIST_PANE))
|
||||
->assertScript("document.activeElement === document.querySelector('#pick')");
|
||||
});
|
||||
|
||||
const SUPPORTING_MAIN = '[data-md-supporting-pane-main]';
|
||||
const SUPPORTING_SIDE = '[data-md-supporting-pane-supporting]';
|
||||
|
||||
function supportingPanePage(int $width, string $attributes = '', string $dir = 'ltr'): mixed
|
||||
{
|
||||
$body = <<<BLADE
|
||||
<x-supporting-pane label="Comments" {$attributes}>
|
||||
<x-slot:main><article id="main" style="block-size: 1400px">The proposal</article></x-slot:main>
|
||||
<x-slot:supporting><p id="comment">Friday works for me.</p><button type="button" id="reply">Reply</button></x-slot:supporting>
|
||||
</x-supporting-pane>
|
||||
BLADE;
|
||||
|
||||
return layoutPage($body, $width, 800, $dir);
|
||||
}
|
||||
|
||||
it('puts the supporting pane under the focus pane below expanded', function () {
|
||||
foreach ([599 => 16, 600 => 24, 839 => 24] as $width => $margin) {
|
||||
supportingPanePage($width)
|
||||
->assertScript(layoutRect(SUPPORTING_SIDE, 'top').' >= '.layoutRect(SUPPORTING_MAIN, 'bottom'))
|
||||
->assertScript(layoutRect(SUPPORTING_SIDE, 'width').' === '.layoutRect(SUPPORTING_MAIN, 'width'))
|
||||
->assertScript(layoutRect(SUPPORTING_MAIN, 'left')." === {$margin}")
|
||||
->assertScript(layoutRect(SUPPORTING_SIDE, 'top').' - '.layoutRect(SUPPORTING_MAIN, 'bottom')." === {$margin}");
|
||||
}
|
||||
});
|
||||
|
||||
it('puts the supporting pane beside the focus pane from expanded, at M3\'s widths or the two-thirds split', function () {
|
||||
foreach ([840 => 360, 1199 => 360, 1200 => 412] as $width => $side) {
|
||||
supportingPanePage($width)
|
||||
->assertScript(layoutRect(SUPPORTING_SIDE, 'top').' === '.layoutRect(SUPPORTING_MAIN, 'top'))
|
||||
->assertScript(layoutRect(SUPPORTING_SIDE, 'width')." === {$side}")
|
||||
->assertScript(layoutRect(SUPPORTING_SIDE, 'right')." === {$width} - 24")
|
||||
->assertScript(layoutRect(SUPPORTING_SIDE, 'left').' - '.layoutRect(SUPPORTING_MAIN, 'right').' === 24');
|
||||
}
|
||||
|
||||
supportingPanePage(1200, 'width="split"')
|
||||
->assertScript('Math.abs('.layoutRect(SUPPORTING_MAIN, 'width').' - 2 * '.layoutRect(SUPPORTING_SIDE, 'width').') <= 1');
|
||||
|
||||
supportingPanePage(1200, '', 'rtl')
|
||||
->assertScript(layoutRect(SUPPORTING_SIDE, 'left').' === 24')
|
||||
->assertScript(layoutRect(SUPPORTING_SIDE, 'right').' < '.layoutRect(SUPPORTING_MAIN, 'left'));
|
||||
});
|
||||
|
||||
it('docks the supporting pane as a bottom sheet below expanded, opened and closed by its handle', function () {
|
||||
$handle = '[data-md-supporting-pane-handle]';
|
||||
|
||||
$page = supportingPanePage(599, 'compact="sheet"')
|
||||
->assertScript("document.querySelector('{$handle}').checkVisibility()")
|
||||
->assertAttribute($handle, 'aria-expanded', 'false')
|
||||
->assertScript("! document.querySelector('#comment').checkVisibility()")
|
||||
// Docked to the bottom of the window while the focus pane scrolls under it.
|
||||
->assertScript(layoutRect(SUPPORTING_SIDE, 'bottom').' === window.innerHeight')
|
||||
->assertScript(layoutStyle(SUPPORTING_SIDE, 'borderTopLeftRadius')." === '28px'");
|
||||
|
||||
$page->click($handle)
|
||||
->assertAttribute($handle, 'aria-expanded', 'true')
|
||||
->assertScript("document.querySelector('#comment').checkVisibility()")
|
||||
->assertScript(layoutRect(SUPPORTING_SIDE, 'bottom').' === window.innerHeight');
|
||||
|
||||
$page->keys('#reply', 'Escape')
|
||||
->assertAttribute($handle, 'aria-expanded', 'false')
|
||||
->assertScript("! document.querySelector('#comment').checkVisibility()")
|
||||
->assertScript("document.activeElement === document.querySelector('{$handle}')");
|
||||
|
||||
// Scrolled to the end, the sheet has its own room and covers nothing of the focus pane.
|
||||
$page->script('window.scrollTo(0, document.documentElement.scrollHeight)');
|
||||
$page->assertScript(layoutRect(SUPPORTING_SIDE, 'top').' >= '.layoutRect(SUPPORTING_MAIN, 'bottom'));
|
||||
|
||||
supportingPanePage(840, 'compact="sheet"')
|
||||
->assertScript("! document.querySelector('{$handle}').checkVisibility()")
|
||||
->assertScript("document.querySelector('#comment').checkVisibility()")
|
||||
->assertScript(layoutRect(SUPPORTING_SIDE, 'width').' === 360')
|
||||
->assertNoJavaScriptErrors();
|
||||
});
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
<?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';");
|
||||
});
|
||||
Reference in New Issue
Block a user