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
UPGRADE.md
+4 -1
View File
@@ -100,7 +100,10 @@ over a colour, use the role directly.
- `<x-section-nav>` with five or more sections is a scrollable tab bar, not a grid. The tab bar is - `<x-section-nav>` with five or more sections is a scrollable tab bar, not a grid. The tab bar is
10px taller; the focus ring sits outside. 10px taller; the focus ring sits outside.
- The navigation bar's horizontal label is `label-md`; `place="bottom"` toolbars sit above - The navigation bar's horizontal label is `label-md`; `place="bottom"` toolbars sit above
`--material-bottom-bar`; a standard toolbar's icon buttons are `primary`. `--material-bottom-bar`; a standard toolbar's icon buttons are `primary`. An application that
set `--material-bottom-bar` to lift the snackbar over its own bottom toolbar removes it: the
toolbar now reads it to place itself, and publishes `--material-bottom-toolbar`, which the
snackbar clears and the page pads its end with.
- The centred app bar headline is a grid column; the `search` variant bounds its own width, so - The centred app bar headline is a grid column; the `search` variant bounds its own width, so
drop hand-written `max-w-*` wrappers. drop hand-written `max-w-*` wrappers.
- `<x-app-shell>` is renamed `<x-scaffold>`, with no alias; it is a column with a nested row - `<x-app-shell>` is renamed `<x-scaffold>`, with no alias; it is a column with a nested row
resources/boost/skills/livewire-material-development/SKILL.md
+4
View File
@@ -117,6 +117,8 @@ Every component that meets the edge of the screen (app bar, navigation bar and r
`--material-snackbar-height` is the height of the snackbar on screen, written on `<html>` by `<x-toast>` while one shows and removed when it goes. `<x-button fab>` reads it, so the FAB sits above the snackbar rather than under it, as M3 requires; so does an `<x-fab>` in `<x-scaffold>`'s `fab` slot, which places it. `--material-snackbar-height` is the height of the snackbar on screen, written on `<html>` by `<x-toast>` while one shows and removed when it goes. `<x-button fab>` reads it, so the FAB sits above the snackbar rather than under it, as M3 requires; so does an `<x-fab>` in `<x-scaffold>`'s `fab` slot, which places it.
`--material-bottom-toolbar` is the distance from the window's bottom edge to the top of a toolbar at `place="bottom"`, unset while there is none: the snackbar clears it, and a page without `<x-scaffold>` pads its end with it (see `<x-toolbar>`).
`--material-bottom-extra` (default `0px`) is the height of anything the application docks on top of the phone's navigation bar in `<x-scaffold>` (an offline banner): the scaffold adds it to `--material-bottom-bar` (64px + the bottom inset), so the snackbar, a `fab` button, the scaffold's FAB and the page's bottom padding clear it too. Set it while the docked element shows, and remove it when it goes; place the docked element itself directly above the bar, at `bottom: calc(4rem + var(--material-safe-bottom, env(safe-area-inset-bottom)))`, on a compact window (below `medium`) only. `--material-bottom-extra` (default `0px`) is the height of anything the application docks on top of the phone's navigation bar in `<x-scaffold>` (an offline banner): the scaffold adds it to `--material-bottom-bar` (64px + the bottom inset), so the snackbar, a `fab` button, the scaffold's FAB and the page's bottom padding clear it too. Set it while the docked element shows, and remove it when it goes; place the docked element itself directly above the bar, at `bottom: calc(4rem + var(--material-safe-bottom, env(safe-area-inset-bottom)))`, on a compact window (below `medium`) only.
## Toasts ## Toasts
@@ -1027,6 +1029,8 @@ M3 Expressive toolbar, `role="toolbar"` (arrow keys move between controls). `var
A docked toolbar and a navigation bar occupy the same screen region and must never be on screen together: show the bar on a primary page and the toolbar on a secondary or contextual one. A `place="bottom"` toolbar clears `--material-bottom-bar` if a bar is there anyway, so nothing is buried. A docked toolbar and a navigation bar occupy the same screen region and must never be on screen together: show the bar on a primary page and the toolbar on a secondary or contextual one. A `place="bottom"` toolbar clears `--material-bottom-bar` if a bar is there anyway, so nothing is buried.
A `place="bottom"` toolbar publishes `--material-bottom-toolbar`: the distance from the window's bottom edge to its top, bottom safe area and navigation bar included. The snackbar lifts above it by itself; pad the end of the page so its last line clears the toolbar: `padding-block-end: calc(var(--material-bottom-toolbar, 0px) + var(--md-sys-measurement-space200))`. Never set `--material-bottom-bar` for a toolbar: the toolbar reads that variable to place itself.
Large screens: `rounded` gives a *docked* toolbar M3's web/large-screen form — from `expanded` (840px) fully rounded and spanning its container (at `place="bottom"` it lifts 16px off the window's edges); below `expanded` it stays the square full-width bar M3 requires. Divide groups of controls with `<x-divider vertical />` (`<x-divider />` in a vertical toolbar); inside a toolbar it stands as tall as the icon buttons. A floating toolbar is fully rounded already and has no large-screen form: M3 lets it show more controls there, or splits the actions into two toolbars at opposite edges. Large screens: `rounded` gives a *docked* toolbar M3's web/large-screen form — from `expanded` (840px) fully rounded and spanning its container (at `place="bottom"` it lifts 16px off the window's edges); below `expanded` it stays the square full-width bar M3 requires. Divide groups of controls with `<x-divider vertical />` (`<x-divider />` in a vertical toolbar); inside a toolbar it stands as tall as the icon buttons. A floating toolbar is fully rounded already and has no large-screen form: M3 lets it show more controls there, or splits the actions into two toolbars at opposite edges.
```blade ```blade
resources/css/components/toast.css
+5 -3
View File
@@ -10,8 +10,10 @@
* the text through `[data-md-toast-wrap]`, bound the same way — M3's "two lines with longer * the text through `[data-md-toast-wrap]`, bound the same way — M3's "two lines with longer
* action" configuration. * action" configuration.
* *
* It lifts above a bottom bar through `--material-bottom-bar`; `data-md-position="bottom-start"` * It lifts above a bottom bar through `--material-bottom-bar`, and above a toolbar placed at the
* moves it to the start edge, with M3's margin growing from `medium`. resources/js/snackbar.js * bottom through the `--material-bottom-toolbar` toolbar.css publishes — whichever reaches higher,
* as M3 nudges a snackbar clear of a docked toolbar and never in front of navigation;
* `data-md-position="bottom-start"` moves it to the start edge, with M3's margin growing from `medium`. resources/js/snackbar.js
* publishes the snackbar's own height as `--material-snackbar-height`, so a FAB (fab.css) can * publishes the snackbar's own height as `--material-snackbar-height`, so a FAB (fab.css) can
* lift clear of it — M3 puts a snackbar above a FAB, never in front of or behind one (ACT-17). * lift clear of it — M3 puts a snackbar above a FAB, never in front of or behind one (ACT-17).
* Below `medium` it is full width; from there it hugs its line length, which an application's own * Below `medium` it is full width; from there it hugs its line length, which an application's own
@@ -37,7 +39,7 @@
position: fixed; position: fixed;
z-index: 50; z-index: 50;
inset-inline: var(--md-sys-measurement-space200); inset-inline: var(--md-sys-measurement-space200);
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));
display: flex; display: flex;
justify-content: center; justify-content: center;
pointer-events: none; pointer-events: none;
resources/css/components/toolbar.css
+40
View File
@@ -190,4 +190,44 @@
width: auto; width: auto;
} }
} }
/* What a toolbar at the bottom covers, published as --material-bottom-toolbar: the distance from
* the window's bottom edge to the toolbar's top, each formula the placement above plus the
* height. The snackbar clears it (toast.css) — M3 nudges a snackbar "upward to avoid overlapping
* FABs/docked toolbars" and never puts one "in front of … navigation"
* (docs/reference/m3/components-actions-communication-containment.md § Snackbar) — and a page
* pads its end with it, so its last line never hides behind the toolbar.
*
* Declared on the root and again on <x-scaffold>'s root: a custom property resolves its var()s
* where it is declared, and --material-bottom-bar is only set on the scaffold's root, so only
* there does the formula see the bar. A floating toolbar is 64px, beside an 80px (`md`) or
* 96px (`lg`) FAB as tall as the FAB; a docked one is 64px plus the bottom safe area it pads,
* until `rounded` lifts it off the edge from `expanded`. A vertical toolbar, which belongs at
* the end edge, publishes nothing. */
:root:has([data-md-toolbar-place='bottom']:is([data-md-toolbar], [data-md-toolbar-group]):not([data-md-vertical])),
[data-md-scaffold]:has([data-md-toolbar-place='bottom']:is([data-md-toolbar], [data-md-toolbar-group]):not([data-md-vertical])) {
--material-bottom-toolbar: calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + var(--md-sys-measurement-space200) + 64px);
}
:root:has([data-md-toolbar-group][data-md-toolbar-place='bottom']:not([data-md-vertical]) [data-md-fab][data-md-size='md']),
[data-md-scaffold]:has([data-md-toolbar-group][data-md-toolbar-place='bottom']:not([data-md-vertical]) [data-md-fab][data-md-size='md']) {
--material-bottom-toolbar: calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + var(--md-sys-measurement-space200) + 80px);
}
:root:has([data-md-toolbar-group][data-md-toolbar-place='bottom']:not([data-md-vertical]) [data-md-fab][data-md-size='lg']),
[data-md-scaffold]:has([data-md-toolbar-group][data-md-toolbar-place='bottom']:not([data-md-vertical]) [data-md-fab][data-md-size='lg']) {
--material-bottom-toolbar: calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + var(--md-sys-measurement-space200) + 96px);
}
:root:has([data-md-toolbar][data-md-variant='docked'][data-md-toolbar-place='bottom']),
[data-md-scaffold]:has([data-md-toolbar][data-md-variant='docked'][data-md-toolbar-place='bottom']) {
--material-bottom-toolbar: calc(var(--material-bottom-bar, 0px) + 64px + var(--material-safe-bottom, env(safe-area-inset-bottom)));
}
@media (width >= 840px) {
:root:has([data-md-toolbar][data-md-variant='docked'][data-md-rounded][data-md-toolbar-place='bottom']),
[data-md-scaffold]:has([data-md-toolbar][data-md-variant='docked'][data-md-rounded][data-md-toolbar-place='bottom']) {
--material-bottom-toolbar: calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + var(--md-sys-measurement-space200) + 64px);
}
}
} }
resources/views/components/toolbar.blade.php
+3 -1
View File
@@ -25,7 +25,9 @@
A docked toolbar and a navigation bar occupy the same region of the screen and M3 says never to A docked toolbar and a navigation bar occupy the same region of the screen and M3 says never to
show both at once: the bar belongs on a primary page, the toolbar on a secondary or contextual show both at once: the bar belongs on a primary page, the toolbar on a secondary or contextual
one. Either way a toolbar placed at `bottom` clears `--material-bottom-bar`, so it is never one. Either way a toolbar placed at `bottom` clears `--material-bottom-bar`, so it is never
buried under `<x-scaffold>`'s bar. buried under `<x-scaffold>`'s bar. It publishes what it covers in turn, as
`--material-bottom-toolbar` (the distance from the window's bottom edge to its top): the
snackbar lifts above it, and a page pads its end with it.
Put `<x-button icon="…" tooltip="…" />` controls in the slot (`:selected` for toggles). It is a Put `<x-button icon="…" tooltip="…" />` controls in the slot (`:selected` for toggles). It is a
`role="toolbar"`: the arrow keys move between its controls (resources/js/toolbar.js, `role="toolbar"`: the arrow keys move between its controls (resources/js/toolbar.js,
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(); ->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 () { it('rounds a docked toolbar and its divider from 840px, clear of the window\'s edges', function () {
$page = toolbarScaffoldProbe()->resize(800, 800); $page = toolbarScaffoldProbe()->resize(800, 800);
tests/Feature/Components/AppBarTest.php
+18
View File
@@ -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 () { it('offers M3\'s three contrast levels, marking the one in force', function () {
expect((string) $this->blade('<x-theme-toggle mode="contrast" />')) expect((string) $this->blade('<x-theme-toggle mode="contrast" />'))
->toContain('data-md-theme-toggle="contrast"') ->toContain('data-md-theme-toggle="contrast"')
tests/Feature/Components/NavigationStylesheetsTest.php
+3 -2
View File
@@ -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) { 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`, // `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); $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'); })->with('navigation stylesheets');
tests/Feature/Components/ToastTest.php
+4 -2
View File
@@ -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); ->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([ 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))',
]); ]);
}); });