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

Wrap a fixed tab's long label to a second line

Browse Source 
Plan step 46, M3 § Tabs: "Labels: single row by default; may wrap to a
max second line if needed with truncation, or use scrollable tabs to
give longer titles more room." In fixed tabs (<x-tabs>, <x-section-nav>
up to four sections) the label's text, now its own data-md-tab-text in
both views, wraps and truncates at two lines. The tab's 48px (64px
stacked) is a minimum, the bar stretches its tabs to one height, and the
content stretches with them, so the indicator stays on the divider.
Scrollable tabs keep one row. SealShare's "Two-Factor Auth" and
"Appearance" showed an ellipsis at 600px.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 16:10:13 +02:00
co-authored by Claude Opus 5
parent 0a028b158f
commit 5b05e52e1c
6 changed files with 152 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Browser/BarsTest.php
+42 -2
View File
@@ -54,7 +54,7 @@ class BarsProbe extends Component
<x-theme-toggle mode="cycle" id="cycle" />
<x-theme-toggle mode="picker" />
<x-section-nav :items="[['title' => 'Profile', 'url' => '#profile', 'active' => true], ['title' => 'Security', 'url' => '#security'], ['title' => 'Advanced notification settings', 'url' => '#notifications']]" no-wire-navigate />
<x-section-nav :items="[['title' => 'Profile', 'url' => '#profile', 'active' => true], ['title' => 'Security', 'url' => '#security'], ['title' => 'Advanced notification settings', 'url' => '#notifications'], ['title' => 'Appearance', 'url' => '#appearance']]" no-wire-navigate />
<div style="height: 200vh"></div>
</div>
@@ -192,11 +192,51 @@ it('shares the row width equally between the section nav\'s items, whatever thei
$widths = "[...document.querySelectorAll('[data-md-section-nav] [data-md-tabs-bar] > li')].map((li) => Math.round(li.getBoundingClientRect().width))";
barsProbe()
->assertScript("{$widths}.length === 3")
->assertScript("{$widths}.length === 4")
->assertScript("new Set({$widths}).size === 1")
->assertNoJavaScriptErrors();
});
/**
* Plan step 46, M3 § Tabs: "Labels: single row by default; may wrap to a max second line if needed
* with truncation". Four sections are fixed tabs; at a 600px window a long title no longer fits its
* share, so it takes a second line (SealShare's "Two-Factor Auth" showed an ellipsis on one) inside
* its tab, the row's tabs keep one height, and the chosen tab's indicator stays on the divider.
*/
it('wraps a long section title to a second line in a fixed row, keeping the tabs one height and the indicator on the divider', function () {
$tabs = "[...document.querySelectorAll('[data-md-section-nav] [data-md-tab]')]";
$long = "document.querySelector('[data-md-section-nav] [data-md-tab][href=\"#notifications\"]')";
barsProbe()
->resize(600, 800)
->assertScript("getComputedStyle(document.querySelector('[data-md-section-nav] nav')).display !== 'none'")
->assertScript("{$tabs}.length === 4 && ! document.querySelector('[data-md-section-nav] [data-md-tabs-bar]').hasAttribute('data-md-scrollable')")
// Two lines of the label's own line height, not one truncated row.
->assertScript("(() => { const text = {$long}.querySelector('[data-md-tab-text]'); return Math.round(text.getBoundingClientRect().height / parseFloat(getComputedStyle(text).lineHeight)) === 2; })()")
// Inside its tab, both ways.
->assertScript("(() => { const tab = {$long}.getBoundingClientRect(); const text = {$long}.querySelector('[data-md-tab-text]').getBoundingClientRect(); return text.left >= tab.left - 0.5 && text.right <= tab.right + 0.5 && text.top >= tab.top - 0.5 && text.bottom <= tab.bottom + 0.5; })()")
// One height for the row, at least M3's 48px.
->assertScript("new Set({$tabs}.map((tab) => Math.round(tab.getBoundingClientRect().height))).size === 1 && {$tabs}[0].getBoundingClientRect().height >= 48")
// The chosen tab's indicator: shown, under its content, on the divider, within its tab.
->assertScript(<<<'JS'
(() => {
const tab = document.querySelector('[data-md-section-nav] [data-md-tab][aria-current="page"]');
const bar = tab.closest('[data-md-tabs-bar]');
const indicator = tab.querySelector('[data-md-tab-indicator]');
const box = tab.getBoundingClientRect();
const content = tab.querySelector('[data-md-tab-content]').getBoundingClientRect();
const line = indicator.getBoundingClientRect();
const divider = bar.getBoundingClientRect().bottom - parseFloat(getComputedStyle(bar).borderBottomWidth);
return getComputedStyle(indicator).opacity === '1'
&& line.top >= content.bottom - 0.5
&& Math.abs(line.bottom - divider) <= 1
&& line.left >= box.left - 0.5 && line.right <= box.right + 0.5;
})()
JS)
->assertNoJavaScriptErrors();
});
class AppBarOverflowProbe extends Component
{
public int $stars = 0;