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

Rewrite list and list-item without Tailwind

Browse Source 
Plan step 36 (containment group, last of its four components): moves
into resources/css/components/list.css (the container: display, the
2px segmented gap) and list-item.css (everything else — anatomy,
states, the segmented item's own background/corner, and the row
interaction pattern list.css used to carry). One commit for both:
list-item.css keys heavily on list's own data-md-list="segmented"
attribute and the two files are designed together.

Kept, now on data-md-* hooks: selectable/selection listbox semantics
(role="listbox"/"option", aria-selected, a trailing check as the
second cue, C-03), a disabled item's link dropped entirely rather than
left focusable (C-02), the segmented row's own state layer no longer
racing its background through an unlayered escape hatch (C-08 doesn't
recur — nothing here is unlayered), leading video/icon/avatar slots,
three-line top alignment and 12px vertical padding (C-15), 16px
leading/trailing gap (C-14), dividers inset 16px (C-16), the segmented
list's surface fill (C-21) and its hover/focus/pressed/selected corner
morph (C-22). The segmented icon size (20px) is now the `size` prop
`<x-icon>` already takes from the parent's @aware(['segmented']),
replacing the CSS override C-26's fix suggested.

data-md-lines="1|2|3" replaces the old line-count classes; data-md-list-item-*
hooks replace every other class list.

Hooks renamed data-list -> data-md-list, data-list-item -> data-md-list-item,
data-dividers -> data-md-dividers, data-selected -> data-md-selected, the
generic data-list-row/-open row pattern's last consumer (list-item)
moved, so list-rows.js drops the transitional dual-hook fallback the
card commit added. table.css now @imports list-item.css, completing
what its own comment already claimed (a row answers a pointer as a
list row does) under the new per-component-import architecture.

Imported from the Containment block of components.css; leaves
tailwind.css, which now carries only dialog.css for this group.

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:37:38 +02:00
co-authored by Claude Sonnet 5
parent 5cb11cd127
commit 9ff5a7a809
10 changed files with 348 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/list-item.blade.php
+31 -43
View File
@@ -7,12 +7,12 @@
`description` under it (body-medium, up to two lines). The leading element is one of `icon`,
`avatar` (an image URL, or initials in primary-container), `image` (a 56px thumbnail) or
`video`, or a `leading` slot (a checkbox, a switch). The trailing element is `trailing` text
(label-small), `icon-right`, or an `end` slot for controls (a menu, a switch). One-, two- and three-line
heights (56, 72, 88px) follow from what is given, 16px between the item and what leads or
trails it, and a three-line item top-aligns rather than centring — M3 aligns an item middle
"by default, top-aligned if the item is 88dp+ or has 3+ lines of text". Its icons are 24px,
or 20px in a `segmented` list, which is M3 Expressive's (ListTokens, androidx Compose
Material 3, Apache-2.0).
(label-small), `icon-right`, or an `end` slot for controls (a menu, a switch). One-, two- and
three-line items (`data-md-lines`, 56, 72, 88px) follow from what is given, 16px between the
item and what leads or trails it, and a three-line item top-aligns rather than centring — M3
aligns an item middle "by default, top-aligned if the item is 88dp+ or has 3+ lines of text".
Its icons are 24px, or 20px in a `segmented` list, which is M3 Expressive's (ListTokens,
androidx Compose Material 3, Apache-2.0).
`video` is M3's leading media in its landscape size — a poster URL, or a `<x-slot:video>`
holding a `<video>` or a thumbnail with a play badge. ListTokens gives it two: 100×56px in a
@@ -27,9 +27,9 @@
(docs/reference/m3/components-actions-communication-containment.md § Lists → Anatomy, Specs).
`link` makes the whole item the link. Otherwise, to make it open something while its trailing
controls keep their own presses, give it `data-list-row` and put `data-list-open` on the one
control that opens — see resources/js/list-rows.js. `selected` (true) is M3's selected item,
in secondary-container; `disabled` greys it to 38%, drops its link and announces it
controls keep their own presses, give it `data-md-list-row` and put `data-md-list-open` on the
one control that opens — see resources/js/list-rows.js. `selected` (true) is M3's selected
item, in secondary-container; `disabled` greys it to 38%, drops its link and announces it
`aria-disabled` — M3's states model treats disabled as not interactive, so a disabled item
answers neither the pointer nor the keyboard.
@@ -81,35 +81,23 @@
// ListTokens.kt:153,156,332,335 — ItemLeading/TrailingIconExpressiveSize = 20dp against the
// baseline 24dp. At 20px the symbol is drawn from the 20 optical cut, not the 24 scaled down.
$iconSize = $segmented ? 'size-5' : 'size-6';
$optical = $segmented ? '20' : '24';
$iconSize = $segmented ? 20 : 24;
@endphp
<div
role="{{ $option ? 'option' : 'listitem' }}"
@if ($option) aria-selected="{{ $selected ? 'true' : 'false' }}" @elseif ($selected) aria-current="true" @endif
data-list-item
@if ($isLink) data-list-row @endif
@if ($selected) data-selected @endif
data-md-list-item
data-md-lines="{{ $lines + 1 }}"
@if ($isLink) data-md-list-row @endif
@if ($selected) data-md-selected @endif
@if ($disabled) aria-disabled="true" @endif
{{ $attributes->class([
'relative flex gap-4 px-4 text-on-surface',
'items-center' => $lines !== 2,
'items-start' => $lines === 2,
'min-h-14 py-2' => $lines === 0,
'min-h-18 py-2' => $lines === 1,
'min-h-22 py-3' => $lines === 2,
'pointer-events-none text-on-surface/38' => $disabled,
]) }}
{{ $attributes }}
>
@isset($leading)
<div class="flex shrink-0 items-center">{{ $leading }}</div>
<div data-md-list-item-leading>{{ $leading }}</div>
@elseif ($hasVideo)
<div @class([
'shrink-0 overflow-hidden rounded-corner-sm bg-surface-container-highest *:size-full *:object-cover',
'h-16 w-28.5' => $videoLarge,
'h-14 w-25' => ! $videoLarge,
])>
<div data-md-list-item-video data-md-size="{{ $videoLarge ? 'lg' : 'sm' }}">
@if ($video instanceof \Illuminate\View\ComponentSlot)
{{ $video }}
@else
@@ -118,48 +106,48 @@
</div>
@elseif ($avatar)
@if ($initials)
<span class="grid size-10 shrink-0 place-items-center rounded-corner-full bg-primary-container type-title-md text-on-primary-container" aria-hidden="true">{{ $avatar }}</span>
<span data-md-list-item-avatar aria-hidden="true">{{ $avatar }}</span>
@else
<img src="{{ $avatar }}" alt="" class="size-10 shrink-0 rounded-corner-full object-cover" />
<img src="{{ $avatar }}" alt="" data-md-list-item-avatar />
@endif
@elseif ($image)
<img src="{{ $image }}" alt="" class="size-14 shrink-0 rounded-corner-sm object-cover" />
<img src="{{ $image }}" alt="" data-md-list-item-image />
@elseif ($icon)
<x-livewire-material::icon :name="$icon" :optical="$optical" :class="\Illuminate\Support\Arr::toCssClasses([$iconSize, 'text-on-surface-variant' => ! $selected && ! $disabled])" />
<x-livewire-material::icon :name="$icon" :size="$iconSize" data-md-list-item-icon />
@endif
<div class="min-w-0 flex-1">
<div data-md-list-item-content>
@if ($overline)
<p @class(['type-label-sm', 'text-on-surface-variant' => ! $selected])>{{ $overline }}</p>
<p data-md-list-item-overline>{{ $overline }}</p>
@endif
@if ($isLink)
<a
href="{{ $link }}"
data-list-open
data-md-list-open
data-md-list-item-title
@if ($external) target="_blank" rel="noopener" @elseif (! $noWireNavigate) wire:navigate @endif
class="block truncate type-body-lg outline-none"
>{{ $title ?? $slot }}</a>
@else
<p class="truncate type-body-lg">{{ $title ?? $slot }}</p>
<p data-md-list-item-title>{{ $title ?? $slot }}</p>
@endif
@if ($description)
<p @class(['line-clamp-2 type-body-md', 'text-on-surface-variant' => ! $selected])>{{ $description }}</p>
<p data-md-list-item-description>{{ $description }}</p>
@endif
</div>
@isset($end)
<div class="flex shrink-0 items-center gap-1">{{ $end }}</div>
<div data-md-list-item-end>{{ $end }}</div>
@endisset
@if ($trailing)
<span @class(['shrink-0 type-label-sm', 'text-on-surface-variant' => ! $selected])>{{ $trailing }}</span>
<span data-md-list-item-trailing>{{ $trailing }}</span>
@endif
@if ($iconRight)
<x-livewire-material::icon :name="$iconRight" :optical="$optical" :class="\Illuminate\Support\Arr::toCssClasses([$iconSize, 'text-on-surface-variant' => ! $selected && ! $disabled])" />
<x-livewire-material::icon :name="$iconRight" :size="$iconSize" data-md-list-item-icon />
@elseif ($check)
<x-livewire-material::icon name="check" :optical="$optical" :class="$iconSize" />
<x-livewire-material::icon name="check" :size="$iconSize" />
@endif
</div>
resources/views/components/list.blade.php
+4 -7
View File
@@ -16,7 +16,7 @@
selection is never colour alone; give the items a leading checkbox or radio instead and pass
`icon-right` to keep the check off.
For keyboard walking between rows, `j`/`k` or arrows, the application can use `data-list`
For keyboard walking between rows, `j`/`k` or arrows, the application can use `data-md-list`
(resources/js/list-rows.js marks rows; a list keyboard arrives with the list-detail pane).
`label` names the list. --}}
@@ -39,13 +39,10 @@
<div
role="{{ $selection === null ? 'list' : 'listbox' }}"
@if ($selection === 'multi') aria-multiselectable="true" @endif
data-list="{{ $segmented ? 'segmented' : 'plain' }}"
@if ($dividers && ! $segmented) data-dividers @endif
data-md-list="{{ $segmented ? 'segmented' : 'plain' }}"
@if ($dividers && ! $segmented) data-md-dividers @endif
@if ($label) aria-label="{{ $label }}" @endif
{{ $attributes->class([
'flex flex-col',
'gap-0.5' => $segmented,
]) }}
{{ $attributes }}
>
{{ $slot }}
</div>