noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add the pane layout component

Browse Source 
Plan step 35: <x-pane>, a content region with M3's margins (16px below
medium, 24px from it) drawn once however panes and layouts nest, a width
cap, and an optional pane app bar - <x-app-bar> as a direct child of the
pane with title, subtitle, actions, a back link or action, a leading
slot, and the section navigation under it.

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
2026-09-14 14:51:04 +02:00
co-authored by Claude Opus 5
parent e99c5993d8
commit b4f1e005de
7 changed files with 300 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Browser/LayoutTest.php
+28
View File
@@ -142,3 +142,31 @@ it('draws a surface in its role, padding and corner, and hides it below a breakp
->assertScript(layoutStyle('#surface', 'borderTopWidth')." === '1px'")
->assertNoJavaScriptErrors();
});
it('keeps M3\'s margin in a pane, once, with its app bar across the whole pane', function () {
$body = <<<'BLADE'
<x-pane id="pane" title="Settings">
<p id="text">Body</p>
<x-pane id="inner"><p>Nested</p></x-pane>
<x-surface id="card"><x-pane id="on-surface"><p id="surface-text">On a surface</p></x-pane></x-surface>
</x-pane>
<x-pane id="narrow" width="narrow"><p>Narrow</p></x-pane>
BLADE;
layoutPage($body, 599)
->assertScript(layoutRect('#text', 'left').' === 16')
->assertScript(layoutRect('#pane [data-md-pane-bar]', 'width').' === '.layoutRect('#pane', 'width'))
->assertScript(layoutStyle('#inner [data-md-pane-body]', 'paddingLeft')." === '0px'");
layoutPage($body, 600)
->assertScript(layoutRect('#text', 'left').' === 24')
->assertScript(layoutRect('#pane [data-md-pane-bar]', 'left').' === 0')
->assertScript(layoutStyle('#inner [data-md-pane-body]', 'paddingLeft')." === '0px'")
// A surface is a new edge, so a pane on it keeps its margin again.
->assertScript(layoutRect('#surface-text', 'left').' - '.layoutRect('#card', 'left').' === 24');
layoutPage($body, 1200)
->assertScript(layoutRect('#narrow', 'width').' === 640')
->assertScript(layoutRect('#narrow', 'left').' === 280')
->assertNoJavaScriptErrors();
});