Andreas Reinhold / reiniandClaude Sonnet 5
c887bcd054
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
58 lines
2.7 KiB
PHP
58 lines
2.7 KiB
PHP
{{-- An M3 divider: a thin outline-variant line between groups of content (DividerTokens).
|
|
|
|
Horizontal by default; `vertical` stands it between items in a row (give the row a height).
|
|
`inset` indents it from the start by 16px, as under a list's leading icon; `middle` from both
|
|
ends. It is `role="separator"`; with `decorative` it is hidden from assistive tech.
|
|
|
|
`text` is the divider with a subheader, as M3 draws it to head a group in a list or a menu:
|
|
the label at the start and the rule running on from it. The divider specs table gives the
|
|
geometry — "space between divider & supporting text 4dp", "divider right margin 8dp",
|
|
"divider bottom margin 8dp" — so the rule starts 4px after the words, stops 8px short of the
|
|
end and leaves 8px under the row. The label is M3's subhead: title-small in
|
|
on-surface-variant, the type the rich tooltip's specs give a subhead, since the divider's own
|
|
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.
|
|
|
|
`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,
|
|
'inset' => false,
|
|
'middle' => false,
|
|
'decorative' => false,
|
|
'text' => null,
|
|
])
|
|
|
|
@php
|
|
$orientation = $vertical ? 'vertical' : 'horizontal';
|
|
@endphp
|
|
|
|
@if (filled($text) && ! $vertical)
|
|
<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
|
|
></div>
|
|
</div>
|
|
@else
|
|
<div
|
|
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
|