diff --git a/UPGRADE.md b/UPGRADE.md index b7532ba0..79d737c4 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -100,7 +100,10 @@ over a colour, use the role directly. - `` with five or more sections is a scrollable tab bar, not a grid. The tab bar is 10px taller; the focus ring sits outside. - 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 drop hand-written `max-w-*` wrappers. - `` is renamed ``, with no alias; it is a column with a nested row diff --git a/resources/boost/skills/livewire-material-development/SKILL.md b/resources/boost/skills/livewire-material-development/SKILL.md index a7358d84..073fa8de 100644 --- a/resources/boost/skills/livewire-material-development/SKILL.md +++ b/resources/boost/skills/livewire-material-development/SKILL.md @@ -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 `` by `` while one shows and removed when it goes. `` reads it, so the FAB sits above the snackbar rather than under it, as M3 requires; so does an `` in ``'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 `` pads its end with it (see ``). + `--material-bottom-extra` (default `0px`) is the height of anything the application docks on top of the phone's navigation bar in `` (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 @@ -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 `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 `` (`` 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 diff --git a/resources/css/components/toast.css b/resources/css/components/toast.css index 8239511e..ebce72e9 100644 --- a/resources/css/components/toast.css +++ b/resources/css/components/toast.css @@ -10,8 +10,10 @@ * the text through `[data-md-toast-wrap]`, bound the same way — M3's "two lines with longer * action" configuration. * - * It lifts above a bottom bar through `--material-bottom-bar`; `data-md-position="bottom-start"` - * moves it to the start edge, with M3's margin growing from `medium`. resources/js/snackbar.js + * It lifts above a bottom bar through `--material-bottom-bar`, and above a toolbar placed at the + * 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 * 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 @@ -37,7 +39,7 @@ position: fixed; z-index: 50; 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; justify-content: center; pointer-events: none; diff --git a/resources/css/components/toolbar.css b/resources/css/components/toolbar.css index a1fdedb7..5e7257ba 100644 --- a/resources/css/components/toolbar.css +++ b/resources/css/components/toolbar.css @@ -190,4 +190,44 @@ 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 '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); + } + } } diff --git a/resources/views/components/toolbar.blade.php b/resources/views/components/toolbar.blade.php index 7eb2be87..a81636bb 100644 --- a/resources/views/components/toolbar.blade.php +++ b/resources/views/components/toolbar.blade.php @@ -25,7 +25,9 @@ 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 one. Either way a toolbar placed at `bottom` clears `--material-bottom-bar`, so it is never - buried under ``'s bar. + buried under ``'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 `` controls in the slot (`:selected` for toggles). It is a `role="toolbar"`: the arrow keys move between its controls (resources/js/toolbar.js, diff --git a/tests/Browser/BarsTest.php b/tests/Browser/BarsTest.php index 56845c27..a4be42bc 100644 --- a/tests/Browser/BarsTest.php +++ b/tests/Browser/BarsTest.php @@ -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' + + + + + @vite(config('livewire-material.showcase.vite')) + @livewireStyles + + + + + + + @livewireScripts + + + 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); diff --git a/tests/Feature/Components/AppBarTest.php b/tests/Feature/Components/AppBarTest.php index 5722a4b1..249fc88b 100644 --- a/tests/Feature/Components/AppBarTest.php +++ b/tests/Feature/Components/AppBarTest.php @@ -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('')) ->toContain('data-md-theme-toggle="contrast"') diff --git a/tests/Feature/Components/NavigationStylesheetsTest.php b/tests/Feature/Components/NavigationStylesheetsTest.php index 6dbcc8ab..29f47138 100644 --- a/tests/Feature/Components/NavigationStylesheetsTest.php +++ b/tests/Feature/Components/NavigationStylesheetsTest.php @@ -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'); diff --git a/tests/Feature/Components/ToastTest.php b/tests/Feature/Components/ToastTest.php index 24651549..08b7ebc5 100644 --- a/tests/Feature/Components/ToastTest.php +++ b/tests/Feature/Components/ToastTest.php @@ -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))', ]); });