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
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)]))