Lift the snackbar above a toolbar placed at the bottom
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
co-authored by
Claude Opus 5
Claude Opus 5
parent
579af9e7a9
commit
d0bed0da69
@@ -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);
|
||||
|
||||
|
||||
@@ -224,6 +224,24 @@ it('keeps a toolbar at the bottom clear of the navigation bar', function () {
|
||||
}
|
||||
});
|
||||
|
||||
it('publishes what a toolbar at the bottom covers', function () {
|
||||
$toolbar = ComponentStylesheet::read('toolbar');
|
||||
$rule = fn (string $has): string => ":root:has({$has}), [data-md-scaffold]:has({$has})";
|
||||
$above = fn (string $height): array => ['--material-bottom-toolbar' => "calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + var(--md-sys-measurement-space200) + {$height})"];
|
||||
$group = "[data-md-toolbar-group][data-md-toolbar-place='bottom']:not([data-md-vertical])";
|
||||
|
||||
// A floating toolbar (or its group) sits 16px above the bar or the safe area and is 64px tall;
|
||||
// beside a medium or large FAB, the group is as tall as the FAB. Declared on the scaffold's root
|
||||
// too, the one place the formula sees --material-bottom-bar.
|
||||
expect($toolbar->declarations($rule("[data-md-toolbar-place='bottom']:is([data-md-toolbar], [data-md-toolbar-group]):not([data-md-vertical])")))->toBe($above('64px'))
|
||||
->and($toolbar->declarations($rule("{$group} [data-md-fab][data-md-size='md']")))->toBe($above('80px'))
|
||||
->and($toolbar->declarations($rule("{$group} [data-md-fab][data-md-size='lg']")))->toBe($above('96px'))
|
||||
// A docked one rests on the bar and pads the safe area; rounded, it floats from 840px.
|
||||
->and($toolbar->declarations($rule("[data-md-toolbar][data-md-variant='docked'][data-md-toolbar-place='bottom']")))
|
||||
->toBe(['--material-bottom-toolbar' => 'calc(var(--material-bottom-bar, 0px) + 64px + var(--material-safe-bottom, env(safe-area-inset-bottom)))'])
|
||||
->and($toolbar->declarations($rule("[data-md-toolbar][data-md-variant='docked'][data-md-rounded][data-md-toolbar-place='bottom']"), ['@media (width >= 840px)']))->toBe($above('64px'));
|
||||
});
|
||||
|
||||
it('offers M3\'s three contrast levels, marking the one in force', function () {
|
||||
expect((string) $this->blade('<x-theme-toggle mode="contrast" />'))
|
||||
->toContain('data-md-theme-toggle="contrast"')
|
||||
|
||||
@@ -135,8 +135,9 @@ it('is imported from the navigation block of all.css', function (string $name) {
|
||||
|
||||
it('scopes every element-wide selector to a data-md hook', function (string $name) {
|
||||
// `all.css` bundles every component stylesheet into every page, so a bare `html`, `body`,
|
||||
// `dialog` or `:root` rule would restyle the application's own pages.
|
||||
// `dialog` or `:root` rule would restyle the application's own pages. One that applies only
|
||||
// while a package component is on the page (`:root:has([data-md-toolbar-place…])`) is scoped.
|
||||
$source = (string) preg_replace('~/\*.*?\*/~s', '', ComponentStylesheet::read($name)->css);
|
||||
|
||||
expect($source)->not->toMatch('/(?:^|[,{};]\s*)(?:html|body|dialog|:root)(?![\w-])(?!\[data-md-|:has\(> \[data-md-)/m');
|
||||
expect($source)->not->toMatch('/(?:^|[,{};]\s*)(?:html|body|dialog|:root)(?![\w-])(?!\[data-md-|:has\((?:> )?\[data-md-)/m');
|
||||
})->with('navigation stylesheets');
|
||||
|
||||
@@ -87,8 +87,10 @@ it('keeps the live region in the page, polite, around the snackbar that comes an
|
||||
->and(substr_count($html, 'aria-live'))->toBe(1);
|
||||
});
|
||||
|
||||
it('lifts above a bottom bar, publishing its own height for a FAB to clear', function () {
|
||||
it('lifts above a bottom bar or a toolbar placed at the bottom, publishing its own height for a FAB to clear', function () {
|
||||
// Whichever reaches higher: M3 nudges a snackbar clear of a docked toolbar and never puts one
|
||||
// in front of navigation (toolbar.css publishes --material-bottom-toolbar).
|
||||
expect(ComponentStylesheet::read('toast')->declarations('[data-md-toast]'))->toMatchArray([
|
||||
'bottom' => 'calc(var(--material-bottom-bar, 0px) + var(--md-sys-measurement-space200))',
|
||||
'bottom' => 'calc(max(var(--material-bottom-bar, 0px), var(--material-bottom-toolbar, 0px)) + var(--md-sys-measurement-space200))',
|
||||
]);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user