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

Write the showcase examples without showcase-only hooks

Browse Source 
Plan step 38 review: the component sections' code samples, which an
application copies, carried 60 data-md-showcase-* hooks that only
showcase.css draws (a sized loading indicator, the plain badge's own
colours, a bordered bar frame, the navigation demos' frames, a table's
scroll wrapper...), so a copied sample did nothing in the application.
They now write what an application has: <x-surface outlined corner>
for a frame and a line, <x-row> for the FAB menu's corner, and an
inline style from the tokens for a size, a scroll box or a colour,
as the Containment batch already did. The side sheet demo takes
align="stretch", which holds in both of <x-row stack-below>'s modes,
instead of a hook that undid align="start" once stacked. The menu
icon colours go through icon-class with two unlayered application-like
classes, which the sample's comment names, and the fields' and date
picker's widths are inline styles now that style reaches their roots.
The radio hint said "from sm"; it is medium.

showcase.css keeps only the frame and the foundation specimens; its
header describes the file instead of the batches that wrote it. The
tests reject a showcase hook or a class outside md-* and the named
application classes in any example, a showcase.css selector outside
its own hooks, and a hook no showcase view renders.

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
2026-09-15 06:21:18 +02:00
co-authored by Claude Opus 5
parent cd47aa4b0f
commit ebdcdb82b5
15 changed files with 152 additions and 374 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/showcase/sections/carousel.blade.php
+5 -5
View File
@@ -13,7 +13,7 @@
['Heart', 'heart', 'background-color: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-primary);'],
] as [$name, $shape, $colours])
<x-carousel-item :label="$name">
<div data-md-showcase-carousel-swatch style="{{ $colours }}">
<div style="display: grid; place-items: center; width: 100%; height: 100%; {{ $colours }}">
<x-shape :name="$shape" size="144" />
</div>
</x-carousel-item>
@@ -30,7 +30,7 @@
['Ghost', 'ghostish', 'background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);'],
] as [$name, $shape, $colours])
<x-carousel-item :label="$name">
<div data-md-showcase-carousel-swatch style="{{ $colours }}">
<div style="display: grid; place-items: center; width: 100%; height: 100%; {{ $colours }}">
<x-shape :name="$shape" size="192" />
</div>
</x-carousel-item>
@@ -48,7 +48,7 @@
['oval', 'background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);'],
] as [$shape, $colours])
<x-carousel-item>
<div data-md-showcase-carousel-swatch style="{{ $colours }}">
<div style="display: grid; place-items: center; width: 100%; height: 100%; {{ $colours }}">
<x-shape :name="$shape" size="96" />
</div>
</x-carousel-item>
@@ -66,7 +66,7 @@
['16/9', 'very-sunny', 'background-color: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary);'],
] as [$aspect, $shape, $colours])
<x-carousel-item :aspect="$aspect" :label="$aspect">
<div data-md-showcase-carousel-swatch style="{{ $colours }}">
<div style="display: grid; place-items: center; width: 100%; height: 100%; {{ $colours }}">
<x-shape :name="$shape" size="80" />
</div>
</x-carousel-item>
@@ -81,7 +81,7 @@
['Night', 'puffy-diamond', 'background: linear-gradient(to bottom right, var(--md-sys-color-inverse-surface), var(--md-sys-color-primary)); color: var(--md-sys-color-inverse-primary);'],
] as [$name, $shape, $colours])
<x-carousel-item :label="$name">
<div data-md-showcase-carousel-swatch style="{{ $colours }}">
<div style="display: grid; place-items: center; width: 100%; height: 100%; {{ $colours }}">
<x-shape :name="$shape" size="160" />
</div>
</x-carousel-item>