Andreas Reinhold / reiniandClaude Opus 5
99e73fdc58
Plan step 36 (actions, last of the batch). <x-empty-state> renders data-md-empty-state with data-md-empty-state-illustration/-shape/ -icon/-title/-description/-actions; no class list. empty-state.css draws the secondary-container shape behind the on-secondary-container icon (the icon needs its own stacking context to paint above the shape's absolute position), the title-large title and the 448px body-medium description. The docblock's illustration example moves from a caller class to a caller style, since the shape rule scans the whole file. EmptyStateTest is rewritten on the hooks and ComponentStylesheet. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
54 lines
2.3 KiB
PHP
54 lines
2.3 KiB
PHP
{{-- "You have nothing here yet": an Expressive shape with an icon on it, a title, a line of
|
|
explanation and the action that fills the space.
|
|
|
|
<x-empty-state icon="upload_file" title="No shares yet" description="Files you share appear here.">
|
|
<x-slot:actions><x-button label="Upload files" variant="filled" link="/upload" /></x-slot:actions>
|
|
</x-empty-state>
|
|
|
|
Not an M3 component; built from M3 Expressive's parts — `shape` (any `<x-shape>` name,
|
|
`cookie-9` by default) in secondary-container behind the `icon` in on-secondary-container,
|
|
a title-large `title`, body-medium `description` or slot. For "your filter matched nothing"
|
|
use a plain line of text instead: a picture there is consolation for a typo.
|
|
|
|
An application with its own artwork puts it in the `illustration` slot, which is drawn in place
|
|
of the shape and icon (both props are then unused). The slot sizes itself; its attributes go on
|
|
the element around it, so `style` can set the colour an SVG's `currentColor` takes:
|
|
|
|
<x-empty-state title="No routes yet">
|
|
<x-slot:illustration style="color: var(--md-sys-color-primary)"><svg style="width: 128px; height: 128px" aria-hidden="true">…</svg></x-slot:illustration>
|
|
</x-empty-state>
|
|
|
|
A slot holding only whitespace or comments counts as empty, and the shape and icon stay.
|
|
|
|
Drawn by resources/css/components/empty-state.css from `data-md-empty-state`; no class list. --}}
|
|
|
|
@props([
|
|
'icon' => 'inbox',
|
|
'shape' => 'cookie-9',
|
|
'title' => null,
|
|
'description' => null,
|
|
])
|
|
|
|
<div data-md-empty-state {{ $attributes }}>
|
|
@if (isset($illustration) && $illustration->hasActualContent())
|
|
<div {{ $illustration->attributes }}>{{ $illustration }}</div>
|
|
@else
|
|
<div data-md-empty-state-illustration>
|
|
<x-livewire-material::shape :name="$shape" data-md-empty-state-shape />
|
|
<x-livewire-material::icon :name="$icon" size="48" data-md-empty-state-icon />
|
|
</div>
|
|
@endif
|
|
|
|
@if ($title)
|
|
<h3 data-md-empty-state-title>{{ $title }}</h3>
|
|
@endif
|
|
|
|
@if ($description || $slot->isNotEmpty())
|
|
<div data-md-empty-state-description>{{ $description ?? $slot }}</div>
|
|
@endif
|
|
|
|
@isset($actions)
|
|
<div data-md-empty-state-actions>{{ $actions }}</div>
|
|
@endisset
|
|
</div>
|