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/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 () {
expect((string) $this->blade('<x-theme-toggle mode="contrast" />'))
->toContain('data-md-theme-toggle="contrast"')