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

Add the rail's narrow collapsed width

Browse Source 
Plan step 25 (navigation Missing): NavigationRailCollapsedTokens
.NarrowContainerWidth, 80dp, had no way in — only the default 96.
`<x-navigation-rail width="narrow">` takes it; the collapsed width is now a
variable, so the four rules that each have their own reason to name it follow
without a specificity fight. No label fits under a 56px indicator at 80px, so a
narrow rail's items are their icons alone, with the label taken out of the
drawing and left in the accessibility tree, where it names the destination.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 06:39:31 +02:00
co-authored by Claude Fable 5.1
parent ce1cd6eec0
commit cef350d739
5 changed files with 86 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Feature/Components/NavigationRailTest.php
+26 -2
View File
@@ -63,8 +63,32 @@ it('takes M3\'s optional divider and turns the container fill off', function ()
// Neither reaches a rail open over a scrim, which is a surface over the page (N-22).
->toContain('[data-navigation-rail][data-divider]:not([data-open]) > [data-navigation-rail-panel] {')
->toContain("[data-navigation-rail][data-fill='false']:not([data-open]) > [data-navigation-rail-panel] {")
// A collapsible rail is held to 96px where M3 asks for a navigation bar instead (N-24).
->toMatch("/\\[data-navigation-rail='collapsible'\\] \\{\\s+width: 6rem;/");
// A collapsible rail is held to its collapsed width where M3 asks for a bar instead (N-24).
->toMatch("/\\[data-navigation-rail='collapsible'\\] \\{\\s+width: var\\(--navigation-rail-collapsed-width\\);/");
});
it('takes M3\'s narrow collapsed width, icons alone but still named', function () {
$narrow = (string) $this->blade('<x-navigation-rail width="narrow"><x-slot:header><button>FAB</button></x-slot:header><x-navigation-rail-item label="Inbox" icon="inbox" link="/inbox" /></x-navigation-rail>');
expect($narrow)
->toContain('data-width="narrow"')
// A narrow rail expands to the same 16rem; `width` names one or the other, never both.
->toContain('--navigation-rail-width: 16rem')
// 40px menu button and 56px FAB centred in 80px rather than in 96.
->toContain('rail-collapsed:ps-5')
->toContain('rail-collapsed:px-3')
// The label is still rendered: it is what names the destination.
->toContain('<span data-navigation-label>Inbox</span>')
->and((string) $this->blade('<x-navigation-rail mode="collapsed" width="20rem" />'))
->not->toContain('data-width')
->toContain('--navigation-rail-width: 20rem');
expect(file_get_contents(__DIR__.'/../../../resources/css/components/navigation.css'))
// NavigationRailCollapsedTokens.NarrowContainerWidth, 80dp against the default 96dp.
->toMatch("/\\[data-navigation-rail\\]\\[data-width='narrow'\\] \\{\\s+--navigation-rail-collapsed-width: 5rem;/")
->toMatch('/--navigation-rail-collapsed-width: 6rem;/')
// Out of the drawing, not out of the page.
->toContain("[data-navigation-rail][data-width='narrow'] [data-navigation-rail-item] [data-navigation-label] {");
});
it('flattens a FAB nested in the rail header and morphs its label', function () {