Write the showcase examples' layout tags as an application does
Plan step 38 review: nine sections' examples wrapped their components in <x-livewire-material::stack>, ::row and ::grid (148 tags) beside an unprefixed <x-button>, while bars, containment and the layout pages wrote <x-stack>. The code sample is what an application copies, and the example component rewrites only unprefixed tags to a configured prefix, so the namespaced ones taught a second form and escaped it. Every example now writes <x-stack>, <x-row> and <x-grid>; a test rejects a namespaced tag inside an example heredoc. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
co-authored by
Claude Opus 5
Claude Opus 5
parent
5fb8fc6b8f
commit
3fb0a404db
@@ -16,26 +16,26 @@
|
||||
<x-badge value="Beta" tonal color="plain" data-md-showcase-badge-plain />
|
||||
BLADE,
|
||||
'Snackbars' => <<<'BLADE'
|
||||
<x-livewire-material::row gap="space200" wrap align="center" x-data>
|
||||
<x-row gap="space200" wrap align="center" x-data>
|
||||
<x-button label="Saved" variant="tonal" x-on:click="materialToast('Settings saved', { type: 'success' })" />
|
||||
<x-button label="With a description" variant="tonal" x-on:click="materialToast('Upload failed', { type: 'error', description: 'The file is larger than 4 GB.' })" />
|
||||
<x-button label="With an action" variant="tonal" x-on:click="materialToast('Share deleted', { action: { label: 'Undo', handler: () => materialToast('Share restored', { type: 'info' }) } })" />
|
||||
<x-button label="Until dismissed" variant="tonal" x-on:click="materialToast('Your storage is almost full', { type: 'warning', timeout: 0 })" />
|
||||
<x-button label="Sticky, with an event" variant="tonal" x-on:click="materialToast('A new version is ready', { type: 'info', sticky: true, action: { label: 'Reload', event: 'showcase:reload' } })" x-on:showcase:reload.window="materialToast('Reloading…')" />
|
||||
</x-livewire-material::row>
|
||||
</x-row>
|
||||
BLADE,
|
||||
'Two lines, and the keyboard shortcut that reaches them' => <<<'BLADE'
|
||||
<x-livewire-material::stack gap="space200" x-data>
|
||||
<x-livewire-material::row gap="space200" wrap align="center">
|
||||
<x-stack gap="space200" x-data>
|
||||
<x-row gap="space200" wrap align="center">
|
||||
<x-button label="Two lines" variant="tonal" x-on:click="materialToast('Upload paused', { description: 'The connection dropped at 64%. It carries on when you are back.' })" />
|
||||
<x-button label="Two lines, with an action" variant="tonal" x-on:click="materialToast('Upload paused', { description: 'The connection dropped at 64%. It carries on when you are back.', action: { label: 'Retry now', handler: () => materialToast('Retrying…') } })" />
|
||||
</x-livewire-material::row>
|
||||
</x-row>
|
||||
|
||||
<p class="md-type-body-md md-ink-variant">
|
||||
A description makes the snackbar 68px, M3's two-line height; below <code>medium</code> the action wraps under the text.
|
||||
Press <kbd class="md-type-label-md" data-md-showcase-kbd>Alt</kbd> + <kbd class="md-type-label-md" data-md-showcase-kbd>G</kbd> to move the focus to a snackbar that has an action.
|
||||
</p>
|
||||
</x-livewire-material::stack>
|
||||
</x-stack>
|
||||
BLADE,
|
||||
'Plain tooltips' => <<<'BLADE'
|
||||
<x-button icon="content_copy" tooltip="Copy link" />
|
||||
@@ -57,7 +57,7 @@
|
||||
</x-rich-tooltip>
|
||||
BLADE,
|
||||
'Alerts' => <<<'BLADE'
|
||||
<x-livewire-material::stack gap="space200">
|
||||
<x-stack gap="space200">
|
||||
<x-alert title="Storage almost full" description="3.8 GB of 4 GB used. Old shares are deleted when they expire." color="warning" />
|
||||
<x-alert description="Links are shown only once. Copy yours before you leave the page." dismissible />
|
||||
<x-alert title="Upload failed" color="error">
|
||||
@@ -65,27 +65,27 @@
|
||||
<x-slot:actions><x-button label="Try again" /></x-slot:actions>
|
||||
</x-alert>
|
||||
<x-alert description="Settings saved." color="success" />
|
||||
</x-livewire-material::stack>
|
||||
</x-stack>
|
||||
BLADE,
|
||||
'Stats' => <<<'BLADE'
|
||||
<x-livewire-material::grid :columns="['compact' => 1, 'medium' => 2, 'expanded' => 4]" gap="space200">
|
||||
<x-grid :columns="['compact' => 1, 'medium' => 2, 'expanded' => 4]" gap="space200">
|
||||
<x-stat title="Shares" value="1,204" icon="link" description="12 this week" />
|
||||
<x-stat title="Files" value="8,317" icon="description" />
|
||||
<x-stat title="Stored" value="3.2 GB" icon="hard_drive" description="of 4 GB" />
|
||||
<x-stat title="Downloads" value="42,019" icon="download" />
|
||||
</x-livewire-material::grid>
|
||||
</x-grid>
|
||||
BLADE,
|
||||
'Empty state' => <<<'BLADE'
|
||||
<x-livewire-material::stack gap="space200">
|
||||
<x-stack gap="space200">
|
||||
<x-empty-state icon="upload_file" title="No shares yet" description="Files you share appear here, with their links and when they expire.">
|
||||
<x-slot:actions>
|
||||
<x-button label="Upload files" icon="upload" variant="filled" />
|
||||
</x-slot:actions>
|
||||
</x-empty-state>
|
||||
</x-livewire-material::stack>
|
||||
</x-stack>
|
||||
BLADE,
|
||||
'Empty state with an illustration' => <<<'BLADE'
|
||||
<x-livewire-material::stack gap="space200">
|
||||
<x-stack gap="space200">
|
||||
<x-empty-state title="No routes yet" description="Draw a route on the map, or import one from a GPX file.">
|
||||
<x-slot:illustration style="color: var(--md-sys-color-primary)">
|
||||
<svg style="width: 128px; height: 128px" viewBox="0 0 120 120" fill="none" aria-hidden="true">
|
||||
@@ -100,7 +100,7 @@
|
||||
<x-button label="Draw a route" icon="route" variant="filled" />
|
||||
</x-slot:actions>
|
||||
</x-empty-state>
|
||||
</x-livewire-material::stack>
|
||||
</x-stack>
|
||||
BLADE,
|
||||
];
|
||||
@endphp
|
||||
|
||||
Reference in New Issue
Block a user