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

Draw the section navigation without Tailwind

Browse Source 
Plan step 36 (navigation group, third batch): <x-section-nav>'s class
lists move into resources/css/components/section-nav.css, keyed on
data-md-section-nav (data-md-section-nav-picker, its own trigger and
label) and <x-tabs>'s own hooks, reused whole rather than copied
(N-16's fix keeps the real scrollable tab bar it landed): the bar's
outline-variant divider, active indicator and aria-current colouring
are tabs.css's rules, not this file's. The picker's trigger takes the
shared md-focus-ring class and the fixed md-type-body-lg/md-ink/
md-text-start text classes for its own body-large type, since it is
prose on a plain button rather than a component's own type; icons
take a size prop instead of a size class.

Hooks renamed: data-section-nav to data-md-section-nav,
data-section-picker to data-md-section-nav-picker, updated in
TabsTest.php (which carries section-nav's render tests) and
tests/Browser/BarsTest.php.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 00:40:39 +02:00
co-authored by Claude Sonnet 5
parent ed93222d22
commit f1cd6e4eb4
6 changed files with 100 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components.css
+1
View File
@@ -78,3 +78,4 @@
@import './components/navigation-rail.css';
@import './components/navigation-rail-item.css';
@import './components/navigation-rail-section.css';
@import './components/section-nav.css';
resources/css/components/section-nav.css
+70
View File
@@ -0,0 +1,70 @@
/*
* <x-section-nav>: the navigation inside one area of an application — M3's secondary tabs from
* `medium` (600px), five or more of them the scrollable tab bar M3's own accessibility page
* blesses rather than a grid that would break the tab bar's divider and strand the upper rows'
* indicators against nothing (docs/audits/m3-alignment/navigation.md N-16); below `medium`, where a
* row of them never fits, a button naming the current section opens the same list as a menu.
*
* [data-md-section-nav] min-inline-size: 0
* [data-md-section-nav-picker] hidden from medium
* [data-md-section-nav-trigger] 48px, an outlined field-like button
* [data-md-section-nav-trigger-label] the current section's title, truncated
* nav hidden below medium
* [data-md-tabs-bar] tabs.css, reused whole
*
* Reuses `<x-tabs>`'s own hooks and stylesheet rather than a tab bar of its own: a link marked
* `aria-current="page"` takes the same active indicator and colour tabs.css already draws for
* `aria-selected="true"` (N-21), so nothing here repeats a rule tabs.css owns; the only addition is
* `min-inline-size: 0` on this bar's own items, so a long title still truncates inside the row
* `<x-tabs>`'s own layout does not otherwise need. The picker's trigger is not one of M3's controls
* — an outlined field-like button naming the current section, 48px tall to meet the target M3 asks
* for everywhere, at the tab bar's own body-large type (a text class on the view, `md-type-body-lg
* md-ink md-text-start`, since it is prose on a plain button rather than a component's own type).
*/
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@import './tabs.css';
@import './icon.css';
@import './menu.css';
@import './menu-item.css';
@import './badge.css';
@layer material.components {
[data-md-section-nav] {
min-inline-size: 0;
}
[data-md-section-nav-picker] {
@media (width >= 600px) {
display: none;
}
}
[data-md-section-nav] > nav {
@media (width < 600px) {
display: none;
}
}
[data-md-section-nav-trigger] {
display: flex;
align-items: center;
gap: 12px;
block-size: var(--md-sys-measurement-space600);
inline-size: min(320px, calc(100vw - 32px));
cursor: pointer;
border: 1px solid var(--md-sys-color-outline);
border-radius: var(--md-sys-shape-corner-xs);
padding-inline: var(--md-sys-measurement-space200);
}
[data-md-section-nav-trigger-label] {
min-inline-size: 0;
flex: 1 1 0%;
}
[data-md-section-nav] [data-md-tabs-bar] > li {
min-inline-size: 0;
}
}
resources/views/components/section-nav.blade.php
+10 -10
View File
@@ -40,17 +40,17 @@
$scrollable = count($items) >= 5;
@endphp
<div {{ $attributes->class(['min-w-0']) }} data-section-nav>
<div {{ $attributes }} data-md-section-nav>
@if ($current)
<div class="medium:hidden" data-section-picker>
<div data-md-section-nav-picker>
<x-livewire-material::menu :$label position="bottom-start">
<x-slot:trigger>
<button type="button" class="focus-ring flex h-12 w-[min(20rem,calc(100vw-2rem))] cursor-pointer items-center gap-3 rounded-corner-xs border border-outline px-4 text-start type-body-lg text-on-surface">
<button type="button" data-md-section-nav-trigger class="md-focus-ring md-type-body-lg md-ink md-text-start">
@isset($current['icon'])
<x-livewire-material::icon :name="$current['icon']" optical="20" class="size-5 text-on-surface-variant" />
<x-livewire-material::icon :name="$current['icon']" :size="20" class="md-ink-variant" />
@endisset
<span class="min-w-0 flex-1 truncate">{{ $current['title'] }}</span>
<x-livewire-material::icon name="arrow_drop_down" class="size-6 text-on-surface-variant" />
<span data-md-section-nav-trigger-label class="md-truncate">{{ $current['title'] }}</span>
<x-livewire-material::icon name="arrow_drop_down" class="md-ink-variant" />
</button>
</x-slot:trigger>
@@ -61,12 +61,12 @@
</div>
@endif
<nav aria-label="{{ $label }}" class="max-medium:hidden">
<nav aria-label="{{ $label }}">
<ul data-md-tabs-bar data-md-variant="secondary" @if ($scrollable) data-md-scrollable @endif>
@foreach ($items as $item)
@php($on = $isCurrent($item))
<li class="flex min-w-0">
<li>
<a
href="{{ $item['url'] }}"
data-md-tab
@@ -75,9 +75,9 @@
>
<span data-md-tab-content>
@isset($item['icon'])
<x-livewire-material::icon :name="$item['icon']" :filled="$on" optical="20" class="size-5" />
<x-livewire-material::icon :name="$item['icon']" :filled="$on" :size="20" />
@endisset
<span class="truncate">{{ $item['title'] }}</span>
<span class="md-truncate">{{ $item['title'] }}</span>
@if (filled($item['badge'] ?? null))
<x-livewire-material::badge :value="$item['badge']" />
@endif
tests/Browser/BarsTest.php
+5 -5
View File
@@ -138,12 +138,12 @@ it('switches the theme from a toggle, a cycle and a picker', function () {
it('turns section tabs into a picker on a phone', function () {
barsProbe()
->resize(400, 800)
->assertScript("getComputedStyle(document.querySelector('[data-section-nav] nav')).display === 'none'")
->click('[data-section-picker] button')
->assertScript("document.querySelector('[data-section-picker] [popover]').matches(':popover-open')")
->assertScript("getComputedStyle(document.querySelector('[data-md-section-nav] nav')).display === 'none'")
->click('[data-md-section-nav-picker] button')
->assertScript("document.querySelector('[data-md-section-nav-picker] [popover]').matches(':popover-open')")
// A menu of places: the current section is the page, not a checked choice.
->assertAttribute('[data-section-picker] [role="menuitem"][href="#profile"]', 'aria-current', 'page')
->assertScript("! document.querySelector('[data-section-picker] [role=\"menuitem\"][href=\"#security\"]').hasAttribute('aria-current')");
->assertAttribute('[data-md-section-nav-picker] [role="menuitem"][href="#profile"]', 'aria-current', 'page')
->assertScript("! document.querySelector('[data-md-section-nav-picker] [role=\"menuitem\"][href=\"#security\"]').hasAttribute('aria-current')");
});
class AppBarOverflowProbe extends Component
tests/Feature/Components/NavigationStylesheetsTest.php
+3
View File
@@ -20,6 +20,8 @@ use NoNameWeb\LivewireMaterial\Tests\Support\ViewClasses;
* published that variable through a Tailwind utility, which no layered rule could outrank; now
* scaffold.css sets it in `material.layout`, which this file's `material.components` always beats,
* so the whole stylesheet fits one `@layer material.components` block like every other entry here.
* `section-nav` renders `<x-tabs>`'s hooks rather than `<x-tabs>` itself (it reuses its stylesheet
* whole, tabs.css, N-16), so `navigationViews()` need not special-case it the way it does 'tabs'.
*/
dataset('navigation components', [
'app-bar',
@@ -30,6 +32,7 @@ dataset('navigation components', [
'navigation-rail',
'navigation-rail-item',
'navigation-rail-section',
'section-nav',
]);
/**
tests/Feature/Components/TabsTest.php
+11 -4
View File
@@ -110,16 +110,23 @@ it('draws section navigation as secondary tabs and a picker', function () {
expect($html)
->toContain('aria-label="Settings"')
->toContain('data-section-picker')
->toContain('data-md-section-nav-picker')
->toContain('data-md-variant="secondary"')
->toContain('max-medium:hidden')
->toMatch('/href="\/settings\/security"\s+data-md-tab\s+aria-current="page"\s+wire:navigate/')
->not->toMatch('/href="\/settings\/profile"\s+data-md-tab\s+aria-current/')
// The picker is a menu of places: the current one is the page, not a checked choice,
// and a section's badge shows there as well as on its tab.
->not->toContain('role="menuitemcheckbox"')
->toMatch('/role="menuitem"[^>]*aria-current="page"[^>]*href="\/settings\/security"/')
->toMatch('/data-section-picker.*Security.*>\s*1\s*<.*<nav/s');
->toMatch('/data-md-section-nav-picker.*Security.*>\s*1\s*<.*<nav/s');
// The picker shows only below medium, the tab bar only from it (N-16's compact fallback).
$css = ComponentStylesheet::read('section-nav');
expect($css->declarations('[data-md-section-nav-picker]', ['@media (width >= 600px)']))
->toBe(['display' => 'none'])
->and($css->declarations('[data-md-section-nav] > nav', ['@media (width < 600px)']))
->toBe(['display' => 'none']);
});
it('marks the section whose url is the request\'s, and scrolls many sections', function () {
@@ -131,7 +138,7 @@ it('marks the section whose url is the request\'s, and scrolls many sections', f
// Five or more sections are M3's scrollable tabs, not a grid of wrapped rows (N-16).
->toMatch('/<ul data-md-tabs-bar data-md-variant="secondary"\s+data-md-scrollable\s*>/')
->not->toContain('grid-cols-')
->toMatch('/data-md-tab\s+aria-current="page"\s*>\s*<span data-md-tab-content>\s*<span class="truncate">S3/')
->toMatch('/data-md-tab\s+aria-current="page"\s*>\s*<span data-md-tab-content>\s*<span class="md-truncate">S3/')
->not->toContain('wire:navigate')
// Four still share the row.
->and((string) $this->blade('<x-section-nav :items="$items" no-wire-navigate />', ['items' => array_slice($items, 0, 4)]))