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

Rewrite the divider without Tailwind

Browse Source 
Plan step 36 (containment group): <x-divider> 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
<x-divider> and divider.css now carries the material.components layer.

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-14 20:25:31 +02:00
co-authored by Claude Sonnet 5
parent 72a4f477d5
commit c887bcd054
7 changed files with 116 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/divider.blade.php
+24 -17
View File
@@ -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)
<div {{ $attributes->class([
'flex shrink-0 items-center gap-1 pb-2',
'ms-4' => $inset,
'mx-4' => $middle,
]) }}>
<span class="shrink-0 type-title-sm text-on-surface-variant">{{ $text }}</span>
<div {{ $attributes->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)) }}>
<span data-md-divider-text>{{ $text }}</span>
<div
data-md-divider
data-md-orientation="horizontal"
@if ($decorative) aria-hidden="true" @else role="separator" aria-orientation="horizontal" @endif
class="me-2 h-px min-w-0 flex-1 bg-outline-variant"
></div>
</div>
@else
<div
@if ($decorative) aria-hidden="true" @else role="separator" aria-orientation="{{ $vertical ? 'vertical' : 'horizontal' }}" @endif
{{ $attributes->class([
'shrink-0 bg-outline-variant',
'h-px w-auto' => ! $vertical,
'w-px self-stretch' => $vertical,
'ms-4' => $inset && ! $vertical,
'mx-4' => $middle && ! $vertical,
'my-2' => $middle && $vertical,
]) }}
data-md-divider
data-md-orientation="{{ $orientation }}"
@if ($decorative) aria-hidden="true" @else role="separator" aria-orientation="{{ $orientation }}" @endif
{{ $attributes->merge(array_filter([
'data-md-inset' => $inset && ! $vertical ? true : null,
'data-md-middle' => $middle ? true : null,
], fn ($value): bool => $value !== null)) }}
></div>
@endif