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

Lay out the section nav's list items as flex rows again

Browse Source 
Plan step 36, navigation review. The rewrite kept `min-w-0` from the
view's `<li class="flex min-w-0">` but dropped `flex`, so tabs.css's
`li > [data-md-tab] { flex: 1 1 0% }` no longer applied inside the
section nav. The header also called body-large "the tab bar's own"
type, which is title-small.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 01:09:55 +02:00
co-authored by Claude Opus 5
parent 348803484a
commit ed92e916b9
2 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components/section-nav.css
+5 -3
View File
@@ -15,10 +15,11 @@
* Reuses `<x-tabs>`'s own hooks and stylesheet rather than a tab bar of its own: a link marked * 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-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 * `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 * this bar's own list items — flex rows, so tabs.css's `li > [data-md-tab]` share of the width
* `<x-tabs>`'s own layout does not otherwise need. The picker's trigger is not one of M3's controls * applies, and `min-inline-size: 0`, so a long title still truncates — which `<x-tabs>`'s buttons,
* direct children of the bar, never 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 * — 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 * for everywhere, in 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). * md-ink md-text-start`, since it is prose on a plain button rather than a component's own type).
*/ */
@@ -65,6 +66,7 @@
} }
[data-md-section-nav] [data-md-tabs-bar] > li { [data-md-section-nav] [data-md-tabs-bar] > li {
display: flex;
min-inline-size: 0; min-inline-size: 0;
} }
} }
tests/Feature/Components/TabsTest.php
+4 -1
View File
@@ -156,7 +156,10 @@ it('draws section navigation as secondary tabs and a picker', function () {
expect($css->declarations('[data-md-section-nav-picker]', ['@media (width >= 600px)'])) expect($css->declarations('[data-md-section-nav-picker]', ['@media (width >= 600px)']))
->toBe(['display' => 'none']) ->toBe(['display' => 'none'])
->and($css->declarations('[data-md-section-nav] > nav', ['@media (width < 600px)'])) ->and($css->declarations('[data-md-section-nav] > nav', ['@media (width < 600px)']))
->toBe(['display' => 'none']); ->toBe(['display' => 'none'])
// Each link's list item is a flex row, so tabs.css's `li > [data-md-tab]` shares its width.
->and($css->declarations('[data-md-section-nav] [data-md-tabs-bar] > li'))
->toBe(['display' => 'flex', 'min-inline-size' => '0']);
}); });
it('marks the section whose url is the request\'s, and scrolls many sections', function () { it('marks the section whose url is the request\'s, and scrolls many sections', function () {