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

Lift the snackbar above a toolbar placed at the bottom

Browse Source 
SealShare's only navigation is a floating toolbar at place="bottom". In
1.x it set --material-bottom-bar to lift the snackbar over it; in 2.0.0
the toolbar reads that variable to place itself, so an application can
no longer set it, and the snackbar landed on the toolbar. M3 nudges a
snackbar "upward to avoid overlapping FABs/docked toolbars" and never
puts one in front of navigation.

A bottom-placed toolbar now publishes --material-bottom-toolbar, the
distance from the window's bottom edge to its top: floating 64px (as
tall as an md or lg FAB beside it), docked 64px plus the safe area it
pads, rounded docked floating from 840px. It is declared on :root and
again on the scaffold's root, the only place its formula sees the bar.
The snackbar clears whichever of the bar and the toolbar reaches higher,
and a page pads its end with it. Two Chromium tests, both failing on the
old formula: a docked toolbar on a scaffold's navigation bar, and a
floating toolbar without a scaffold (plan step 46).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 10:47:50 +02:00
co-authored by Claude Opus 5
parent 579af9e7a9
commit d0bed0da69
9 changed files with 124 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Browser/BarsTest.php
+43
View File
@@ -342,6 +342,49 @@ it('keeps a docked toolbar clear of the navigation bar below medium', function (
->assertNoJavaScriptErrors();
});
it('lifts a snackbar above a docked toolbar that sits on the navigation bar', function () {
$page = toolbarScaffoldProbe()->resize(599, 800);
$page->script("materialToast('Link copied', { timeout: 10000 })");
$page->wait(1);
// M3 nudges a snackbar "upward to avoid overlapping FABs/docked toolbars": the toolbar publishes
// --material-bottom-toolbar on the scaffold's root, where it sees the bar under it.
$page->assertScript("document.querySelector('[data-md-toast-snackbar]').getBoundingClientRect().bottom <= document.querySelector('#toolbar').getBoundingClientRect().top")
->assertScript("document.querySelector('#toolbar').getBoundingClientRect().bottom <= document.querySelector('[data-md-scaffold-bar]').getBoundingClientRect().top")
->assertNoJavaScriptErrors();
});
it('lifts a snackbar above a floating toolbar placed at the bottom, without a scaffold', function () {
Route::middleware('web')->get('/floating-toolbar-probe', fn () => Blade::render(<<<'BLADE'
<!DOCTYPE html>
<html>
<head>
<x-theme-script />
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body>
<x-toolbar place="bottom" label="Main" id="floating">
<x-button icon="upload" aria-label="Upload" />
</x-toolbar>
<x-toast />
@livewireScripts
</body>
</html>
BLADE));
$page = visit('/floating-toolbar-probe')->resize(393, 800)->waitForEvent('networkidle')
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
$page->script("materialToast('Link copied', { timeout: 10000 })");
$page->wait(1);
// 16px apart: the snackbar's own margin above what the toolbar covers.
$page->assertScript("Math.round(document.querySelector('#floating').getBoundingClientRect().top - document.querySelector('[data-md-toast-snackbar]').getBoundingClientRect().bottom) === 16")
->assertNoJavaScriptErrors();
});
it('rounds a docked toolbar and its divider from 840px, clear of the window\'s edges', function () {
$page = toolbarScaffoldProbe()->resize(800, 800);