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:
co-authored by
Claude Opus 5
parent
5fb8fc6b8f
commit
3fb0a404db
@@ -77,7 +77,7 @@
|
||||
</x-button-group>
|
||||
BLADE,
|
||||
'A connected group that owns its selection' => <<<'BLADE'
|
||||
<x-livewire-material::stack gap="space300" x-data="{ view: 'week', marks: ['bold'] }">
|
||||
<x-stack gap="space300" x-data="{ view: 'week', marks: ['bold'] }">
|
||||
<x-button-group connected selection="single" required label="View" x-model="view">
|
||||
<x-button label="Day" value="day" variant="tonal" :selected="false" />
|
||||
<x-button label="Week" value="week" variant="tonal" :selected="true" />
|
||||
@@ -94,7 +94,7 @@
|
||||
View: <code x-text="view"></code> · marks: <code x-text="marks.join(', ') || 'none'"></code>.
|
||||
The shape follows at once; the colours come from each button's own <code>:selected</code>, which a Livewire render brings back.
|
||||
</p>
|
||||
</x-livewire-material::stack>
|
||||
</x-stack>
|
||||
BLADE,
|
||||
'Square groups (hold a button down)' => <<<'BLADE'
|
||||
<x-button-group label="Square standard" size="md" shape="square">
|
||||
@@ -109,16 +109,16 @@
|
||||
<x-button icon="format_underlined" aria-label="Underline" variant="tonal" :selected="false" />
|
||||
</x-button-group>
|
||||
|
||||
<x-livewire-material::stack x-data="{ density: 'cosy' }">
|
||||
<x-stack x-data="{ density: 'cosy' }">
|
||||
<x-group label="Density" name="showcase-density" shape="square" x-model="density" inline :options="[
|
||||
['id' => 'compact', 'name' => 'Compact'],
|
||||
['id' => 'cosy', 'name' => 'Cosy'],
|
||||
['id' => 'roomy', 'name' => 'Roomy'],
|
||||
]" />
|
||||
</x-livewire-material::stack>
|
||||
</x-stack>
|
||||
BLADE,
|
||||
'A choice as a connected group' => <<<'BLADE'
|
||||
<x-livewire-material::grid :columns="['compact' => 1, 'medium' => 2]" gap="space300" x-data="{ theme: 'system', days: ['mon'] }">
|
||||
<x-grid :columns="['compact' => 1, 'medium' => 2]" gap="space300" x-data="{ theme: 'system', days: ['mon'] }">
|
||||
<x-group label="Theme" name="showcase-theme" x-model="theme" :options="[
|
||||
['id' => 'light', 'name' => 'Light', 'icon' => 'light_mode'],
|
||||
['id' => 'dark', 'name' => 'Dark', 'icon' => 'dark_mode'],
|
||||
@@ -131,7 +131,7 @@
|
||||
['id' => 'wed', 'name' => 'Wed'],
|
||||
['id' => 'thu', 'name' => 'Thu', 'disabled' => true],
|
||||
]" />
|
||||
</x-livewire-material::grid>
|
||||
</x-grid>
|
||||
BLADE,
|
||||
'Split buttons' => <<<'BLADE'
|
||||
<x-split-button label="Download all" icon="download" menu-label="Download options">
|
||||
|
||||
Reference in New Issue
Block a user