Sweep up navigation's last data-navigation-* references
Plan step 36 (navigation group, second batch, cleanup). Every leftover data-navigation-*, data-tall, data-hide-on-scroll, data-hidden, data-width, data-align, data-divider, data-fill and component-level data-open reference outside the rewritten stylesheets and views moves to data-md-*, in the files the two component commits left alone: tests/Feature/Components/ScaffoldTest.php (the scaffold's own rewrite is a later batch, but it renders the bar and the rail today and asserts their hooks); tests/Browser/NavigationTest.php, ShowcaseTest.php and ColourProfilesTest.php (selectors only — document-level attributes, data-rail, data-rail-auto and data-app-shell*, keep their names). NavigationTest.php also gets the browser tests the plan owed this group (docs/plans/material-3-browser-tests.md § Navigation): a tall bar's vertical layout at a width where the short bar would go horizontal; hide-on-scroll never firing while a pinned snackbar is on screen; a narrow rail's 80px width and centred destinations; a rail that hides when collapsed leaving the layout and coming back only through an application's own menu button. resources/css/components/navigation.css and its import in tailwind.css are deleted now that nothing imports the file any more (the previous commit's message said this already happened there; it did not — this is where it actually lands). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
25549374ec
commit
cbd7d01c62
@@ -73,7 +73,7 @@ it('previews a profile from the picker and the showcase menu, and keeps it throu
|
||||
->click('[data-scheme-preview="teal"]')
|
||||
->assertScript("document.documentElement.getAttribute('data-scheme') === 'teal'");
|
||||
|
||||
$page->click('[data-navigation-rail-panel] a[href$="/material/buttons"]')
|
||||
$page->click('[data-md-navigation-rail-panel] a[href$="/material/buttons"]')
|
||||
->assertScript("location.pathname.endsWith('/material/buttons')")
|
||||
->assertScript("document.documentElement.getAttribute('data-scheme') === 'teal'")
|
||||
->assertNoJavaScriptErrors();
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
use Illuminate\Support\Facades\Blade;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
const RAIL = "document.querySelector('[data-navigation-rail]')";
|
||||
const RAIL_PANEL = "document.querySelector('[data-navigation-rail-panel]')";
|
||||
const RAIL = "document.querySelector('[data-md-navigation-rail]')";
|
||||
const RAIL_PANEL = "document.querySelector('[data-md-navigation-rail-panel]')";
|
||||
const BOTTOM_BAR = "document.querySelector('[data-app-shell-bar]')";
|
||||
|
||||
function navigationReady(mixed $page): mixed
|
||||
@@ -20,7 +20,7 @@ function shellPage(int $width = 1280, int $height = 900, string $path = '/materi
|
||||
// of its queries are M3 window size classes: `expanded` (840px) says the rail is standard
|
||||
// rather than modal, `large` (1200px) that it starts expanded rather than collapsed.
|
||||
return navigationReady(visit($path)->resize($width, $height))
|
||||
->assertScript("window.eval(\"(() => { const rail = document.querySelector('[data-navigation-rail]'); if (! rail || rail.dataset.navigationRail !== 'adaptive') return true; const state = Alpine.\$data(rail); return state.wide === window.matchMedia('(width >= 840px)').matches && state.roomy === window.matchMedia('(width >= 1200px)').matches; })()\")");
|
||||
->assertScript("window.eval(\"(() => { const rail = document.querySelector('[data-md-navigation-rail]'); if (! rail || rail.dataset.mdNavigationRail !== 'adaptive') return true; const state = Alpine.\$data(rail); return state.wide === window.matchMedia('(width >= 840px)').matches && state.roomy === window.matchMedia('(width >= 1200px)').matches; })()\")");
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -46,7 +46,7 @@ function firstPaintProbe(): void
|
||||
<script>
|
||||
window.firstPaint = {
|
||||
rail: document.documentElement.getAttribute('data-rail'),
|
||||
width: getComputedStyle(document.querySelector('[data-navigation-rail]')).width,
|
||||
width: getComputedStyle(document.querySelector('[data-md-navigation-rail]')).width,
|
||||
alpine: typeof window.Alpine,
|
||||
};
|
||||
</script>
|
||||
@@ -67,10 +67,10 @@ it('shows the navigation bar on a compact window and marks the current destinati
|
||||
shellPage(599, 860)
|
||||
->assertScript('getComputedStyle('.BOTTOM_BAR.").display !== 'none'")
|
||||
->assertScript('getComputedStyle('.RAIL_PANEL.").display === 'none'")
|
||||
->assertScript(BOTTOM_BAR.".querySelectorAll('[data-navigation-bar-item]').length === 4")
|
||||
->assertScript(BOTTOM_BAR.".querySelectorAll('[data-md-navigation-bar-item]').length === 4")
|
||||
->assertScript(BOTTOM_BAR.".querySelector('[aria-current=\"page\"]').textContent.includes('Inbox')")
|
||||
->assertScript('getComputedStyle('.BOTTOM_BAR.".querySelector('[aria-current=\"page\"] [data-navigation-indicator]')).backgroundImage !== 'none'")
|
||||
->assertScript('getComputedStyle('.BOTTOM_BAR.".querySelector('[data-navigation-bar-item]:not([aria-current]) [data-navigation-indicator]')).backgroundImage === 'none'")
|
||||
->assertScript('getComputedStyle('.BOTTOM_BAR.".querySelector('[aria-current=\"page\"] [data-md-navigation-indicator]')).backgroundImage !== 'none'")
|
||||
->assertScript('getComputedStyle('.BOTTOM_BAR.".querySelector('[data-md-navigation-bar-item]:not([aria-current]) [data-md-navigation-indicator]')).backgroundImage === 'none'")
|
||||
->assertNoJavaScriptErrors();
|
||||
});
|
||||
|
||||
@@ -83,9 +83,9 @@ it('collapses the rail across the medium class, icon over label, from its first
|
||||
shellPage(839)
|
||||
->assertScript(railWidth(96))
|
||||
->assertScript('getComputedStyle('.BOTTOM_BAR.").display === 'none'")
|
||||
->assertScript("getComputedStyle(document.querySelector('[data-navigation-rail-item]')).flexDirection === 'column'")
|
||||
->assertScript("getComputedStyle(document.querySelector('[data-navigation-rail-heading]')).display === 'none'")
|
||||
->assertAttribute('[data-navigation-rail-menu]', 'aria-expanded', 'false');
|
||||
->assertScript("getComputedStyle(document.querySelector('[data-md-navigation-rail-item]')).flexDirection === 'column'")
|
||||
->assertScript("getComputedStyle(document.querySelector('[data-md-navigation-rail-heading]')).display === 'none'")
|
||||
->assertAttribute('[data-md-navigation-rail-menu]', 'aria-expanded', 'false');
|
||||
});
|
||||
|
||||
it('starts the rail collapsed across the expanded class and expands it in the layout', function () {
|
||||
@@ -100,17 +100,17 @@ it('starts the rail collapsed across the expanded class and expands it in the la
|
||||
$page = shellPage(840)
|
||||
->assertScript(railWidth(96))
|
||||
->assertScript('getComputedStyle('.BOTTOM_BAR.").display === 'none'")
|
||||
->assertAttribute('[data-navigation-rail-menu]', 'aria-expanded', 'false');
|
||||
->assertAttribute('[data-md-navigation-rail-menu]', 'aria-expanded', 'false');
|
||||
|
||||
$page->click('[data-navigation-rail-menu]')
|
||||
$page->click('[data-md-navigation-rail-menu]')
|
||||
->assertScript(railWidth(256))
|
||||
->assertScript('! '.RAIL.".hasAttribute('data-open')")
|
||||
->assertScript("getComputedStyle(document.querySelector('[data-navigation-rail-scrim]')).display === 'none'")
|
||||
->assertScript('! '.RAIL.".hasAttribute('data-md-open')")
|
||||
->assertScript("getComputedStyle(document.querySelector('[data-md-navigation-rail-scrim]')).display === 'none'")
|
||||
->assertScript("document.getElementById('content').closest('[aria-hidden=\"true\"]') === null")
|
||||
->assertScript("document.documentElement.getAttribute('data-rail') === 'expanded'")
|
||||
->assertScript("! document.documentElement.hasAttribute('data-rail-auto')")
|
||||
->assertScript("localStorage.getItem('material-rail') === 'expanded'")
|
||||
->assertAttribute('[data-navigation-rail-menu]', 'aria-expanded', 'true')
|
||||
->assertAttribute('[data-md-navigation-rail-menu]', 'aria-expanded', 'true')
|
||||
->assertNoJavaScriptErrors();
|
||||
|
||||
// The choice outlives the reload, and holds to the top of the class.
|
||||
@@ -126,12 +126,12 @@ it('expands the rail from large, and keeps it collapsed across a reload from the
|
||||
$page = shellPage(1200, 900, '/rail-probe')
|
||||
->assertScript(railWidth(256))
|
||||
->assertScript("window.eval('window.firstPaint.width') === '256px'")
|
||||
->assertAttribute('[data-navigation-rail-menu]', 'aria-expanded', 'true');
|
||||
->assertAttribute('[data-md-navigation-rail-menu]', 'aria-expanded', 'true');
|
||||
|
||||
$page->click('[data-navigation-rail-menu]')
|
||||
$page->click('[data-md-navigation-rail-menu]')
|
||||
->assertScript("document.documentElement.getAttribute('data-rail') === 'collapsed'")
|
||||
->assertScript("localStorage.getItem('material-rail') === 'collapsed'")
|
||||
->assertAttribute('[data-navigation-rail-menu]', 'aria-expanded', 'false')
|
||||
->assertAttribute('[data-md-navigation-rail-menu]', 'aria-expanded', 'false')
|
||||
->assertScript(railWidth(96));
|
||||
|
||||
navigationReady($page->refresh())
|
||||
@@ -152,7 +152,7 @@ it('expands the rail by default at extra-large', function () {
|
||||
shellPage(1600, 900)
|
||||
->assertScript(railWidth(256))
|
||||
->assertScript('getComputedStyle('.BOTTOM_BAR.").display === 'none'")
|
||||
->assertAttribute('[data-navigation-rail-menu]', 'aria-expanded', 'true')
|
||||
->assertAttribute('[data-md-navigation-rail-menu]', 'aria-expanded', 'true')
|
||||
->assertNoJavaScriptErrors();
|
||||
});
|
||||
|
||||
@@ -160,26 +160,26 @@ it('opens the modal rail from its menu button below expanded, holding focus unti
|
||||
$page = shellPage(839);
|
||||
|
||||
// From the keyboard: WebKit neither focuses a button on click nor returns focus to one that never had it.
|
||||
$page->script("document.querySelector('[data-navigation-rail-menu]').focus()");
|
||||
$page->keys('[data-navigation-rail-menu]', 'Enter')
|
||||
->assertScript(RAIL.".hasAttribute('data-open')")
|
||||
$page->script("document.querySelector('[data-md-navigation-rail-menu]').focus()");
|
||||
$page->keys('[data-md-navigation-rail-menu]', 'Enter')
|
||||
->assertScript(RAIL.".hasAttribute('data-md-open')")
|
||||
->assertScript('Math.round('.RAIL_PANEL.'.getBoundingClientRect().width) === 256')
|
||||
->assertScript(railWidth(96))
|
||||
->assertScript("getComputedStyle(document.querySelector('[data-navigation-rail-heading]')).display !== 'none'")
|
||||
->assertScript("getComputedStyle(document.querySelector('[data-md-navigation-rail-heading]')).display !== 'none'")
|
||||
->assertScript(RAIL_PANEL.'.contains(document.activeElement)')
|
||||
->assertScript("document.getElementById('content').closest('[aria-hidden=\"true\"]') !== null")
|
||||
->assertAttribute('[data-navigation-rail-menu]', 'aria-expanded', 'true');
|
||||
->assertAttribute('[data-md-navigation-rail-menu]', 'aria-expanded', 'true');
|
||||
|
||||
$page->keys(':focus', 'Escape')
|
||||
->assertScript('! '.RAIL.".hasAttribute('data-open')")
|
||||
->assertScript('! '.RAIL.".hasAttribute('data-md-open')")
|
||||
->assertScript("document.getElementById('content').closest('[aria-hidden=\"true\"]') === null")
|
||||
->assertScript("document.activeElement === document.querySelector('[data-navigation-rail-menu]')");
|
||||
->assertScript("document.activeElement === document.querySelector('[data-md-navigation-rail-menu]')");
|
||||
|
||||
$page->keys('[data-navigation-rail-menu]', 'Enter')
|
||||
->assertScript(RAIL.".hasAttribute('data-open')");
|
||||
$page->keys('[data-md-navigation-rail-menu]', 'Enter')
|
||||
->assertScript(RAIL.".hasAttribute('data-md-open')");
|
||||
|
||||
$page->click('[data-navigation-rail-scrim]')
|
||||
->assertScript('! '.RAIL.".hasAttribute('data-open')")
|
||||
$page->click('[data-md-navigation-rail-scrim]')
|
||||
->assertScript('! '.RAIL.".hasAttribute('data-md-open')")
|
||||
->assertScript("localStorage.getItem('material-rail') === null");
|
||||
});
|
||||
|
||||
@@ -187,32 +187,32 @@ it('slides the modal rail in on a compact window from the app bar\'s menu button
|
||||
$page = shellPage(599, 860);
|
||||
|
||||
$page->click('@shell-menu')
|
||||
->assertScript(RAIL.".hasAttribute('data-open')")
|
||||
->assertScript(RAIL.".hasAttribute('data-md-open')")
|
||||
->assertScript('getComputedStyle('.RAIL_PANEL.").display === 'flex'")
|
||||
->assertScript('Math.round('.RAIL_PANEL.'.getBoundingClientRect().left) === 0')
|
||||
->assertScript(RAIL_PANEL.'.contains(document.activeElement)');
|
||||
|
||||
$page->keys(':focus', 'Escape')
|
||||
->assertScript('! '.RAIL.".hasAttribute('data-open')")
|
||||
->assertScript('! '.RAIL.".hasAttribute('data-md-open')")
|
||||
->assertScript('getComputedStyle('.RAIL_PANEL.").display === 'none'");
|
||||
});
|
||||
|
||||
it('keeps the rail and the theme through wire:navigate and moves aria-current', function () {
|
||||
$page = shellPage(1200);
|
||||
|
||||
$page->click('[data-navigation-rail-menu]')
|
||||
$page->click('[data-md-navigation-rail-menu]')
|
||||
->assertScript("document.documentElement.getAttribute('data-rail') === 'collapsed'");
|
||||
|
||||
$page->script("window.eval(\"Alpine.store('theme').set('dark'); window.samePage = true\")");
|
||||
|
||||
$page->click('[data-navigation-rail-panel] a[href$="/material/shell/starred"]')
|
||||
$page->click('[data-md-navigation-rail-panel] a[href$="/material/shell/starred"]')
|
||||
->assertSeeIn('@shell-page', 'This is the starred page.')
|
||||
->assertScript("window.eval('window.samePage') === true")
|
||||
->assertScript("document.documentElement.getAttribute('data-rail') === 'collapsed'")
|
||||
->assertScript("document.documentElement.getAttribute('data-theme') === 'dark'")
|
||||
->assertScript(railWidth(96))
|
||||
->assertScript("document.querySelector('[data-navigation-rail-panel] [aria-current=\"page\"]').getAttribute('href').endsWith('/material/shell/starred')")
|
||||
->assertScript("document.querySelectorAll('[data-navigation-rail-panel] [aria-current=\"page\"]').length === 1")
|
||||
->assertScript("document.querySelector('[data-md-navigation-rail-panel] [aria-current=\"page\"]').getAttribute('href').endsWith('/material/shell/starred')")
|
||||
->assertScript("document.querySelectorAll('[data-md-navigation-rail-panel] [aria-current=\"page\"]').length === 1")
|
||||
->assertNoJavaScriptErrors();
|
||||
});
|
||||
|
||||
@@ -258,3 +258,114 @@ it('lifts the snackbar and the page above something docked on the phone\'s bar',
|
||||
$page->assertScript("{$snackbarBottom} === 120")
|
||||
->assertScript("{$contentPadding} === 104");
|
||||
});
|
||||
|
||||
/**
|
||||
* A page for the navigation bar and rail props the shell's own adaptive rail never exercises:
|
||||
* `tall`, `hide-on-scroll` (with a pinned snackbar), a narrow centred rail, and a rail that hides
|
||||
* when collapsed. A wide, fixed viewport throughout, so none of M3's breakpoints interfere with
|
||||
* what each example's own props already decide (docs/plans/material-3-browser-tests.md § Navigation).
|
||||
*/
|
||||
function navigationExtrasProbe(): mixed
|
||||
{
|
||||
Route::middleware('web')->get('/navigation-extras-probe', fn () => Blade::render(<<<'BLADE'
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<x-theme-script />
|
||||
@vite(config('livewire-material.showcase.vite'))
|
||||
@livewireStyles
|
||||
</head>
|
||||
<body>
|
||||
<div id="tall-bar">
|
||||
<x-navigation-bar tall>
|
||||
<x-navigation-bar-item label="Inbox" icon="inbox" link="#a" no-wire-navigate active />
|
||||
<x-navigation-bar-item label="Sent" icon="send" link="#b" no-wire-navigate />
|
||||
</x-navigation-bar>
|
||||
</div>
|
||||
|
||||
<div id="hide-bar">
|
||||
<x-navigation-bar hide-on-scroll>
|
||||
<x-navigation-bar-item label="Inbox" icon="inbox" link="#a" no-wire-navigate active />
|
||||
<x-navigation-bar-item label="Sent" icon="send" link="#b" no-wire-navigate />
|
||||
</x-navigation-bar>
|
||||
</div>
|
||||
|
||||
<div id="narrow-rail" style="display: flex">
|
||||
<x-navigation-rail mode="collapsed" width="narrow" align="center">
|
||||
<x-navigation-rail-item label="Inbox" icon="inbox" link="#a" no-wire-navigate active />
|
||||
<x-navigation-rail-item label="Starred" icon="star" link="#b" no-wire-navigate />
|
||||
<x-navigation-rail-item label="Sent" icon="send" link="#c" no-wire-navigate />
|
||||
</x-navigation-rail>
|
||||
</div>
|
||||
|
||||
<div id="hiding-rail" style="display: flex">
|
||||
<x-navigation-rail hide-when-collapsed>
|
||||
<x-navigation-rail-item label="Canvas" icon="brush" link="#a" no-wire-navigate active />
|
||||
<x-navigation-rail-item label="Layers" icon="layers" link="#b" no-wire-navigate />
|
||||
</x-navigation-rail>
|
||||
<button type="button" id="open-hiding-rail" x-data x-on:click="$store.rail.show()">Open navigation</button>
|
||||
</div>
|
||||
|
||||
<div style="height: 250vh"></div>
|
||||
|
||||
<x-toast />
|
||||
@livewireScripts
|
||||
</body>
|
||||
</html>
|
||||
BLADE));
|
||||
|
||||
return navigationReady(visit('/navigation-extras-probe')->resize(1000, 900));
|
||||
}
|
||||
|
||||
it('draws the tall navigation bar, icon over label at every width', function () {
|
||||
$page = navigationExtrasProbe();
|
||||
|
||||
$page->assertScript("Math.round(document.querySelector('#tall-bar [data-md-navigation-bar-items]').getBoundingClientRect().height) === 80")
|
||||
->assertScript("getComputedStyle(document.querySelector('#tall-bar [data-md-navigation-pill]')).flexDirection === 'column'")
|
||||
->assertNoJavaScriptErrors();
|
||||
});
|
||||
|
||||
it('hides the bar on a scroll down and never while a pinned snackbar is on screen', function () {
|
||||
$page = navigationExtrasProbe();
|
||||
$hidden = "document.querySelector('#hide-bar [data-md-navigation-bar]').hasAttribute('data-md-hidden')";
|
||||
|
||||
$page->script('window.scrollTo(0, 400)');
|
||||
$page->assertScript("{$hidden} === true")
|
||||
->assertNoJavaScriptErrors();
|
||||
|
||||
// Back to the top brings it back, as a fresh scroll-down would; pin a snackbar first.
|
||||
$page->script('window.scrollTo(0, 0)');
|
||||
$page->assertScript("{$hidden} === false");
|
||||
|
||||
$page->script("materialToast('Pinned', { sticky: true })")
|
||||
->assertScript("document.querySelector('[data-md-toast-snackbar]')?.textContent.includes('Pinned')");
|
||||
|
||||
$page->script('window.scrollTo(0, 400)');
|
||||
$page->assertScript("{$hidden} === false")
|
||||
->assertNoJavaScriptErrors();
|
||||
});
|
||||
|
||||
it('draws the narrow collapsed width and centres the destinations', function () {
|
||||
$page = navigationExtrasProbe();
|
||||
|
||||
$page->assertScript("Math.round(document.querySelector('#narrow-rail [data-md-navigation-rail]').getBoundingClientRect().width) === 80")
|
||||
->assertScript("getComputedStyle(document.querySelector('#narrow-rail [data-md-navigation-rail-destinations]')).justifyContent === 'safe center'")
|
||||
->assertNoJavaScriptErrors();
|
||||
});
|
||||
|
||||
it('takes a rail out of the layout entirely when it hides collapsed, and back over the page', function () {
|
||||
$page = navigationExtrasProbe();
|
||||
$rail = "document.querySelector('#hiding-rail [data-md-navigation-rail]')";
|
||||
$railWidth = "Math.round({$rail}.getBoundingClientRect().width)";
|
||||
|
||||
$page->assertScript("{$railWidth} > 200")
|
||||
->click('#hiding-rail [data-md-navigation-rail-menu]')
|
||||
->assertScript("{$railWidth} === 0")
|
||||
->assertScript("! {$rail}.hasAttribute('data-md-open')");
|
||||
|
||||
// The only way back: an application's own menu button calling $store.rail.show().
|
||||
$page->click('#open-hiding-rail')
|
||||
->assertScript("{$rail}.hasAttribute('data-md-open')")
|
||||
->assertScript("getComputedStyle(document.querySelector('#hiding-rail [data-md-navigation-rail-panel]')).display === 'flex'")
|
||||
->assertNoJavaScriptErrors();
|
||||
});
|
||||
|
||||
@@ -10,9 +10,9 @@ it('moves between sections through the rail and the next-section link, keeping t
|
||||
$page = visit('/material')->waitForEvent('networkidle')
|
||||
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
|
||||
|
||||
$page->click('[data-navigation-rail-panel] a[href$="/material/buttons"]')
|
||||
$page->click('[data-md-navigation-rail-panel] a[href$="/material/buttons"]')
|
||||
->assertSee('Variants')
|
||||
->assertScript("document.querySelector('[data-navigation-rail-panel] [aria-current=\"page\"]').getAttribute('href').endsWith('/material/buttons')")
|
||||
->assertScript("document.querySelector('[data-md-navigation-rail-panel] [aria-current=\"page\"]').getAttribute('href').endsWith('/material/buttons')")
|
||||
->assertScript("document.title === 'Buttons · Livewire Material'");
|
||||
|
||||
$page->click('[data-test="next-section"]')
|
||||
|
||||
Reference in New Issue
Block a user