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

Head a group with M3's divider-with-subheader

Browse Source 
Plan step 23, containment.md § Missing ("Divider: the divider-with-text /
subheader configuration"). `<x-divider text="…">` draws the label at the
start and the rule running on from it, with the divider specs table's
geometry: 4dp between the words and the rule, 8dp right margin, 8dp
bottom margin. The label is M3's subhead — title-small in
on-surface-variant, the only subhead type M3 publishes (the rich
tooltip's specs), since the divider page names none. The words stay text
naming the group; only the rule is the separator.

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-14 07:15:33 +02:00
co-authored by Claude Opus 5
parent bb9473b0b2
commit a54f79a085
4 changed files with 71 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Feature/Components/DividerTest.php
+18
View File
@@ -6,3 +6,21 @@ it('separates horizontally or vertically, inset on request', function () {
->and((string) $this->blade('<x-divider inset />'))->toContain('ms-4')
->and((string) $this->blade('<x-divider decorative />'))->toContain('aria-hidden="true"')->not->toContain('role="separator"');
});
it('heads a group with a subheader, the rule running on from the words', function () {
$html = (string) $this->blade('<x-divider text="Recent" />');
expect($html)
->toContain('flex shrink-0 items-center gap-1 pb-2')
->toContain('<span class="shrink-0 type-title-sm text-on-surface-variant">Recent</span>')
->toMatch('/role="separator" aria-orientation="horizontal"\s+class="me-2 h-px min-w-0 flex-1 bg-outline-variant"/')
->and(strpos($html, 'Recent'))->toBeLessThan(strpos($html, 'role="separator"'))
->and((string) $this->blade('<x-divider text="Recent" inset />'))->toContain('flex shrink-0 items-center gap-1 pb-2 ms-4')
->and((string) $this->blade('<x-divider text="Recent" decorative />'))
->toContain('>Recent</span>')
->toContain('aria-hidden="true"')
->not->toContain('role="separator"')
->and((string) $this->blade('<x-divider text="Recent" vertical />'))
->not->toContain('Recent')
->toContain('aria-orientation="vertical"');
});