Write the showcase examples without showcase-only hooks
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
co-authored by
Claude Opus 5
Claude Opus 5
parent
cd47aa4b0f
commit
ebdcdb82b5
@@ -4,22 +4,22 @@
|
||||
<x-stack gap="space300" style="width: 100%;">
|
||||
<x-stack gap="space100" style="max-width: 400px;">
|
||||
<p class="md-type-label-lg md-ink-variant">Compact: icon over label</p>
|
||||
<div data-md-showcase-nav-demo="bar">
|
||||
<div data-md-showcase-nav-page class="md-type-body-md md-ink-variant">The page</div>
|
||||
<x-surface level="surface" corner="lg" outlined style="display: flex; flex-direction: column; height: 224px; overflow: hidden;">
|
||||
<p class="md-type-body-md md-ink-variant" style="flex: 1 1 auto; padding: var(--md-sys-measurement-space200);">The page</p>
|
||||
<x-navigation-bar>
|
||||
<x-navigation-bar-item label="Shares" icon="folder_shared" link="#navigation" no-wire-navigate active />
|
||||
<x-navigation-bar-item label="Upload" icon="upload" link="#navigation" no-wire-navigate />
|
||||
<x-navigation-bar-item label="Inbox" icon="inbox" link="#navigation" no-wire-navigate badge="3" />
|
||||
<x-navigation-bar-item label="Account" icon="account_circle" link="#navigation" no-wire-navigate :badge="true" badge-label="Needs attention" />
|
||||
</x-navigation-bar>
|
||||
</div>
|
||||
</x-surface>
|
||||
</x-stack>
|
||||
|
||||
<x-stack gap="space100" style="max-width: 800px;">
|
||||
<p class="md-type-label-lg md-ink-variant">From 600px wide: icon beside label, centred</p>
|
||||
<div data-md-showcase-nav-scroll>
|
||||
<div data-md-showcase-nav-demo="bar-wide">
|
||||
<div data-md-showcase-nav-page class="md-type-body-md md-ink-variant">The page</div>
|
||||
<x-surface level="surface" corner="lg" outlined style="overflow-x: auto;">
|
||||
<div style="display: flex; flex-direction: column; height: 224px; min-width: 600px;">
|
||||
<p class="md-type-body-md md-ink-variant" style="flex: 1 1 auto; padding: var(--md-sys-measurement-space200);">The page</p>
|
||||
<x-navigation-bar>
|
||||
<x-navigation-bar-item label="Shares" icon="folder_shared" link="#navigation" no-wire-navigate active />
|
||||
<x-navigation-bar-item label="Upload" icon="upload" link="#navigation" no-wire-navigate />
|
||||
@@ -27,26 +27,26 @@
|
||||
<x-navigation-bar-item label="Account" icon="account_circle" link="#navigation" no-wire-navigate />
|
||||
</x-navigation-bar>
|
||||
</div>
|
||||
</div>
|
||||
</x-surface>
|
||||
</x-stack>
|
||||
|
||||
<x-stack gap="space100" style="max-width: 400px;">
|
||||
<p class="md-type-label-lg md-ink-variant">Hide on scroll: scroll the page down, then up</p>
|
||||
<div data-md-showcase-nav-demo="bar">
|
||||
<div data-md-showcase-nav-page class="md-type-body-md md-ink-variant">The bar follows the window's scrolling, not this box's: scroll the showcase down and it leaves, scroll up and it springs back. It stays while a snackbar or a bottom sheet is on screen.</div>
|
||||
<x-surface level="surface" corner="lg" outlined style="display: flex; flex-direction: column; height: 224px; overflow: hidden;">
|
||||
<p class="md-type-body-md md-ink-variant" style="flex: 1 1 auto; padding: var(--md-sys-measurement-space200);">The bar follows the window's scrolling, not this box's: scroll the showcase down and it leaves, scroll up and it springs back. It stays while a snackbar or a bottom sheet is on screen.</p>
|
||||
<x-navigation-bar hide-on-scroll>
|
||||
<x-navigation-bar-item label="Shares" icon="folder_shared" link="#navigation" no-wire-navigate active />
|
||||
<x-navigation-bar-item label="Upload" icon="upload" link="#navigation" no-wire-navigate />
|
||||
<x-navigation-bar-item label="Inbox" icon="inbox" link="#navigation" no-wire-navigate badge="3" />
|
||||
</x-navigation-bar>
|
||||
</div>
|
||||
</x-surface>
|
||||
</x-stack>
|
||||
|
||||
<x-stack gap="space100" style="max-width: 800px;">
|
||||
<p class="md-type-label-lg md-ink-variant">Tall (80px): icon over label whatever the width</p>
|
||||
<div data-md-showcase-nav-scroll>
|
||||
<div data-md-showcase-nav-demo="bar-wide">
|
||||
<div data-md-showcase-nav-page class="md-type-body-md md-ink-variant">The page</div>
|
||||
<x-surface level="surface" corner="lg" outlined style="overflow-x: auto;">
|
||||
<div style="display: flex; flex-direction: column; height: 224px; min-width: 600px;">
|
||||
<p class="md-type-body-md md-ink-variant" style="flex: 1 1 auto; padding: var(--md-sys-measurement-space200);">The page</p>
|
||||
<x-navigation-bar tall>
|
||||
<x-navigation-bar-item label="Shares" icon="folder_shared" link="#navigation" no-wire-navigate active />
|
||||
<x-navigation-bar-item label="Upload" icon="upload" link="#navigation" no-wire-navigate />
|
||||
@@ -54,13 +54,13 @@
|
||||
<x-navigation-bar-item label="Account" icon="account_circle" link="#navigation" no-wire-navigate />
|
||||
</x-navigation-bar>
|
||||
</div>
|
||||
</div>
|
||||
</x-surface>
|
||||
</x-stack>
|
||||
</x-stack>
|
||||
BLADE,
|
||||
'Collapsed, narrow (centred) and expanded rails' => <<<'BLADE'
|
||||
<x-row gap="space300" wrap align="start" style="width: 100%;">
|
||||
<div data-md-showcase-nav-demo="rail">
|
||||
<x-surface corner="lg" outlined style="display: flex; height: 576px; overflow: hidden;">
|
||||
<x-navigation-rail mode="collapsed" label="Collapsed example" divider>
|
||||
<x-slot:header>
|
||||
<x-fab label="Compose" icon="edit" />
|
||||
@@ -78,9 +78,9 @@
|
||||
<x-navigation-rail-item label="Settings" icon="settings" link="#navigation" no-wire-navigate />
|
||||
</x-slot:footer>
|
||||
</x-navigation-rail>
|
||||
</div>
|
||||
</x-surface>
|
||||
|
||||
<div data-md-showcase-nav-demo="rail">
|
||||
<x-surface corner="lg" outlined style="display: flex; height: 576px; overflow: hidden;">
|
||||
<x-navigation-rail mode="collapsed" width="narrow" align="center" label="Narrow example" divider>
|
||||
<x-slot:header>
|
||||
<x-fab label="Compose" icon="edit" />
|
||||
@@ -94,9 +94,9 @@
|
||||
<x-navigation-rail-item label="Settings" icon="settings" link="#navigation" no-wire-navigate />
|
||||
</x-slot:footer>
|
||||
</x-navigation-rail>
|
||||
</div>
|
||||
</x-surface>
|
||||
|
||||
<div data-md-showcase-nav-demo="rail">
|
||||
<x-surface corner="lg" outlined style="display: flex; height: 576px; overflow: hidden;">
|
||||
<x-navigation-rail mode="expanded" label="Expanded example">
|
||||
<x-slot:header>
|
||||
<x-fab label="Compose" icon="edit" />
|
||||
@@ -114,11 +114,11 @@
|
||||
<x-navigation-rail-item label="Settings" icon="settings" link="#navigation" no-wire-navigate />
|
||||
</x-slot:footer>
|
||||
</x-navigation-rail>
|
||||
</div>
|
||||
</x-surface>
|
||||
</x-row>
|
||||
BLADE,
|
||||
'Collapsible rail' => <<<'BLADE'
|
||||
<div data-md-showcase-nav-demo="rail-wide">
|
||||
<x-surface corner="lg" outlined style="display: flex; width: 100%; height: 480px; overflow: hidden;">
|
||||
<x-navigation-rail label="Collapsible example">
|
||||
<x-slot:brand>
|
||||
<span class="md-type-title-lg md-truncate" style="display: block;">Mail</span>
|
||||
@@ -133,13 +133,13 @@
|
||||
<x-navigation-rail-item label="Sent" icon="send" link="#navigation" no-wire-navigate />
|
||||
</x-navigation-rail>
|
||||
|
||||
<div data-md-showcase-nav-content class="md-type-body-md md-ink-variant">
|
||||
<x-surface level="surface-container-low" padding="space300" class="md-type-body-md md-ink-variant" style="flex: 1 1 auto; min-width: 0;">
|
||||
The menu button collapses and expands the rail, and the FAB morphs into an extended FAB with it. The choice is remembered and applied before the next page paints — every collapsible rail follows it, <code><x-scaffold></code>'s from <code>expanded</code> (840px) too.
|
||||
</div>
|
||||
</div>
|
||||
</x-surface>
|
||||
</x-surface>
|
||||
BLADE,
|
||||
'Rail that hides when collapsed' => <<<'BLADE'
|
||||
<div data-md-showcase-nav-demo="rail-wide">
|
||||
<x-surface corner="lg" outlined style="display: flex; width: 100%; height: 480px; overflow: hidden;">
|
||||
<x-navigation-rail label="Immersive example" hide-when-collapsed>
|
||||
<x-slot:brand>
|
||||
<span class="md-type-title-lg md-truncate" style="display: block;">Studio</span>
|
||||
@@ -150,11 +150,13 @@
|
||||
<x-navigation-rail-item label="Exports" icon="download" link="#navigation" no-wire-navigate />
|
||||
</x-navigation-rail>
|
||||
|
||||
<x-stack gap="space200" data-md-showcase-nav-content class="md-type-body-md md-ink-variant">
|
||||
<p>M3's other expanded behaviour: collapsing this rail takes it out of the layout instead of narrowing it to 96px, so an immersive page gets the whole window. The only way back is a menu button of the application's own — its own button then docks it again.</p>
|
||||
<x-button icon="menu" label="Open navigation" x-on:click="$store.rail.show()" />
|
||||
</x-stack>
|
||||
</div>
|
||||
<x-surface level="surface-container-low" padding="space300" style="flex: 1 1 auto; min-width: 0;">
|
||||
<x-stack gap="space200" class="md-type-body-md md-ink-variant">
|
||||
<p>M3's other expanded behaviour: collapsing this rail takes it out of the layout instead of narrowing it to 96px, so an immersive page gets the whole window. The only way back is a menu button of the application's own — its own button then docks it again.</p>
|
||||
<x-button icon="menu" label="Open navigation" x-on:click="$store.rail.show()" />
|
||||
</x-stack>
|
||||
</x-surface>
|
||||
</x-surface>
|
||||
BLADE,
|
||||
];
|
||||
@endphp
|
||||
|
||||
Reference in New Issue
Block a user