From c887bcd0548854c60db38cc16c4d0a983c3fbba0 Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Mon, 14 Sep 2026 20:25:31 +0200 Subject: [PATCH] Rewrite the divider without Tailwind MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Plan step 36 (containment group): moves its class lists into resources/css/components/divider.css, keyed on data-md-divider, data-md-orientation, data-md-inset/middle and data-md-divider-heading/ -text for the subheader form (DividerTokens.kt; docs/reference/m3 § Divider). Imported from the Containment block of components.css. Hooks renamed: none of divider's own (it had no data-* hooks before), but its rendered attribute order moved data-md-* ahead of role/aria-*, which ToolbarTest.php's regex for a toolbar's vertical divider depended on; fixed in the same commit. form.css picks up the @import './divider.css' its TODO(step 36) marker was waiting on, since form.blade.php renders and divider.css now carries the material.components layer. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9 --- resources/css/components.css | 1 + resources/css/components/divider.css | 75 +++++++++++++++++++ resources/css/components/form.css | 2 +- resources/views/components/divider.blade.php | 41 +++++----- .../Components/ContainmentStylesheetsTest.php | 2 +- tests/Feature/Components/DividerTest.php | 20 +++-- tests/Feature/Components/ToolbarTest.php | 2 +- 7 files changed, 116 insertions(+), 27 deletions(-) create mode 100644 resources/css/components/divider.css diff --git a/resources/css/components.css b/resources/css/components.css index 41f99dd7..48216f2d 100644 --- a/resources/css/components.css +++ b/resources/css/components.css @@ -56,5 +56,6 @@ @import './components/timepicker.css'; /* Containment */ +@import './components/divider.css'; /* Navigation */ diff --git a/resources/css/components/divider.css b/resources/css/components/divider.css new file mode 100644 index 00000000..e421b3e3 --- /dev/null +++ b/resources/css/components/divider.css @@ -0,0 +1,75 @@ +/* + * : M3's divider (DividerTokens.kt, androidx Compose Material 3, Apache-2.0) — a single + * 1px outline-variant line, full-width by default, `data-md-inset` 16px from the start or + * `data-md-middle` 16px from both ends (docs/reference/m3/components-actions-communication-containment.md + * § Divider → Specs: "Divider inset left margin 16dp", "Divider middle-inset left/right margin + * 16dp"). A vertical divider (`data-md-orientation="vertical"`) stretches the height of its row + * instead of drawing a width. + * + * `data-md-divider-heading` draws the divider with a subheader, M3's way to head a group in a list + * or a menu: the words lead, 4px of gap to the rule that runs on from them, 8px short of the end + * and 8px above the next row (the same section's "Space between divider & supporting text 4dp", + * "Divider right margin 8dp", "Divider bottom margin 8dp"). The label, `data-md-divider-text`, is + * the rich tooltip's subhead type — title-small in on-surface-variant — since the divider's own + * page names no type role for it. + */ + +@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; + +@layer material.components { + [data-md-divider] { + flex-shrink: 0; + background-color: var(--md-sys-color-outline-variant); + } + + [data-md-divider][data-md-orientation='horizontal'] { + width: auto; + height: 1px; + } + + [data-md-divider][data-md-orientation='vertical'] { + width: 1px; + align-self: stretch; + } + + [data-md-divider][data-md-orientation='horizontal'][data-md-inset] { + margin-inline-start: var(--md-sys-measurement-space200); + } + + [data-md-divider][data-md-orientation='horizontal'][data-md-middle] { + margin-inline: var(--md-sys-measurement-space200); + } + + [data-md-divider][data-md-orientation='vertical'][data-md-middle] { + margin-block: var(--md-sys-measurement-space100); + } + + [data-md-divider-heading] { + display: flex; + flex-shrink: 0; + align-items: center; + gap: var(--md-sys-measurement-space50); + padding-bottom: var(--md-sys-measurement-space100); + } + + [data-md-divider-heading][data-md-inset] { + margin-inline-start: var(--md-sys-measurement-space200); + } + + [data-md-divider-heading][data-md-middle] { + margin-inline: var(--md-sys-measurement-space200); + } + + [data-md-divider-text] { + flex-shrink: 0; + color: var(--md-sys-color-on-surface-variant); + font: var(--md-sys-typescale-title-sm); + letter-spacing: var(--md-sys-typescale-title-sm-tracking); + } + + [data-md-divider-heading] [data-md-divider] { + flex: 1 1 0%; + min-width: 0; + margin-inline-end: var(--md-sys-measurement-space100); + } +} diff --git a/resources/css/components/form.css b/resources/css/components/form.css index 80747a2f..eb10110b 100644 --- a/resources/css/components/form.css +++ b/resources/css/components/form.css @@ -17,7 +17,7 @@ @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; -/* TODO(step 36): @import './divider.css' once leaves Tailwind (containment stream). */ +@import './divider.css'; @layer material.components { [data-md-form] { diff --git a/resources/views/components/divider.blade.php b/resources/views/components/divider.blade.php index c77dc6bb..d863bac2 100644 --- a/resources/views/components/divider.blade.php +++ b/resources/views/components/divider.blade.php @@ -13,7 +13,11 @@ page names none (docs/reference/m3/components-actions-communication-containment.md § Divider → Specs, § Tooltips → Specs). The words stay readable text that names the group after them; only the rule is the separator, and `decorative` hides the rule and leaves the - words. `text` is for a horizontal divider; a vertical one ignores it. --}} + words. `text` is for a horizontal divider; a vertical one ignores it. + + `data-md-divider` is the rule itself, `data-md-orientation="horizontal"|"vertical"` and + `data-md-inset`/`data-md-middle` the geometry; `data-md-divider-heading` wraps a subheader's + label and its rule (resources/css/components/divider.css draws all four). --}} @props([ 'vertical' => false, @@ -23,28 +27,31 @@ 'text' => null, ]) +@php + $orientation = $vertical ? 'vertical' : 'horizontal'; +@endphp + @if (filled($text) && ! $vertical) -
class([ - 'flex shrink-0 items-center gap-1 pb-2', - 'ms-4' => $inset, - 'mx-4' => $middle, - ]) }}> - {{ $text }} +
merge(array_filter([ + 'data-md-divider-heading' => true, + 'data-md-inset' => $inset ? true : null, + 'data-md-middle' => $middle ? true : null, + ], fn ($value): bool => $value !== null)) }}> + {{ $text }}
@else @endif diff --git a/tests/Feature/Components/ContainmentStylesheetsTest.php b/tests/Feature/Components/ContainmentStylesheetsTest.php index f3621925..6af726e4 100644 --- a/tests/Feature/Components/ContainmentStylesheetsTest.php +++ b/tests/Feature/Components/ContainmentStylesheetsTest.php @@ -16,7 +16,7 @@ use NoNameWeb\LivewireMaterial\Tests\Support\ViewClasses; * follow. It starts empty: this file lands before any containment component is rewritten. */ dataset('containment components', [ - // + 'divider', ]); /** diff --git a/tests/Feature/Components/DividerTest.php b/tests/Feature/Components/DividerTest.php index 3d7f8940..45757047 100644 --- a/tests/Feature/Components/DividerTest.php +++ b/tests/Feature/Components/DividerTest.php @@ -1,9 +1,15 @@ blade(''))->toContain('role="separator"')->toContain('aria-orientation="horizontal"')->toContain('h-px')->toContain('bg-outline-variant') - ->and((string) $this->blade(''))->toContain('aria-orientation="vertical"')->toContain('w-px') - ->and((string) $this->blade(''))->toContain('ms-4') + expect((string) $this->blade('')) + ->toContain('data-md-divider') + ->toContain('data-md-orientation="horizontal"') + ->toContain('role="separator"') + ->toContain('aria-orientation="horizontal"') + ->and((string) $this->blade('')) + ->toContain('data-md-orientation="vertical"') + ->toContain('aria-orientation="vertical"') + ->and((string) $this->blade(''))->toContain('data-md-inset') ->and((string) $this->blade(''))->toContain('aria-hidden="true"')->not->toContain('role="separator"'); }); @@ -11,11 +17,11 @@ it('heads a group with a subheader, the rule running on from the words', functio $html = (string) $this->blade(''); expect($html) - ->toContain('flex shrink-0 items-center gap-1 pb-2') - ->toContain('Recent') - ->toMatch('/role="separator" aria-orientation="horizontal"\s+class="me-2 h-px min-w-0 flex-1 bg-outline-variant"/') + ->toContain('data-md-divider-heading') + ->toContain('Recent') + ->toMatch('/data-md-divider\s+data-md-orientation="horizontal"\s+role="separator" aria-orientation="horizontal"/') ->and(strpos($html, 'Recent'))->toBeLessThan(strpos($html, 'role="separator"')) - ->and((string) $this->blade(''))->toContain('flex shrink-0 items-center gap-1 pb-2 ms-4') + ->and((string) $this->blade(''))->toContain('data-md-divider-heading')->toContain('data-md-inset') ->and((string) $this->blade('')) ->toContain('>Recent') ->toContain('aria-hidden="true"') diff --git a/tests/Feature/Components/ToolbarTest.php b/tests/Feature/Components/ToolbarTest.php index 8bd2e268..152f7658 100644 --- a/tests/Feature/Components/ToolbarTest.php +++ b/tests/Feature/Components/ToolbarTest.php @@ -14,7 +14,7 @@ it('gives a docked toolbar the rounded large-screen form on request, and only a expect($docked) ->toMatch('/role="toolbar"[^>]*data-variant="docked"\s+data-rounded/') // The divider between two groups is the toolbar's child, where toolbar.css stands it up. - ->toMatch('/role="toolbar".*aria-label="Undo".*]*>\s*<\/div>.*aria-label="Bold"/s') + ->toMatch('/role="toolbar".*aria-label="Undo".*]*>\s*<\/div>.*aria-label="Bold"/s') ->and((string) $this->blade('')) ->toContain('data-variant="floating"') ->not->toContain('data-rounded')