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
@@ -35,8 +35,8 @@
|
||||
<input id="showcase-error-filled" data-md-field-control value="2020-01-01" aria-invalid="true" />
|
||||
</x-field>
|
||||
<x-row gap="space125" wrap align="center">
|
||||
<x-input size="sm" icon="search" placeholder="Filter" aria-label="Filter" class="showcase-w-sm" />
|
||||
<x-input size="xs" placeholder="Find" aria-label="Find" class="showcase-w-xs" />
|
||||
<x-input size="sm" icon="search" placeholder="Filter" aria-label="Filter" style="width: 192px;" />
|
||||
<x-input size="xs" placeholder="Find" aria-label="Find" style="width: 144px;" />
|
||||
</x-row>
|
||||
</x-stack>
|
||||
</x-grid>
|
||||
@@ -94,9 +94,9 @@
|
||||
BLADE,
|
||||
'A checkbox group at expanded' => <<<'BLADE'
|
||||
{{-- M3: from expanded (840px), gather related checkboxes into a contained region instead of one long column. --}}
|
||||
<x-card variant="outlined" data-md-showcase-demo-card data-md-showcase-size="lg">
|
||||
<x-card variant="outlined" style="width: 100%; max-width: 672px;">
|
||||
<fieldset>
|
||||
<legend class="md-type-title-sm md-ink" data-md-showcase-legend>Tell me about</legend>
|
||||
<legend class="md-type-title-sm md-ink" style="margin-bottom: var(--md-sys-measurement-space200);">Tell me about</legend>
|
||||
|
||||
<x-grid :columns="['compact' => 1, 'expanded' => 2]" gap="space200">
|
||||
<x-checkbox label="Downloads" name="notify[]" value="downloads" checked />
|
||||
@@ -112,7 +112,7 @@
|
||||
'Radio buttons' => <<<'BLADE'
|
||||
<x-grid :columns="['compact' => 1, 'medium' => 2]" gap="space300">
|
||||
<x-radio label="Who can open the link" name="showcase-audience" value="password" :options="[['id' => 'anyone', 'name' => 'Anyone with the link'], ['id' => 'password', 'name' => 'Anyone with the password', 'hint' => 'Share the password separately'], ['id' => 'team', 'name' => 'My team only', 'disabled' => true]]" />
|
||||
<x-radio label="Theme" name="showcase-radio-theme" value="system" inline :options="[['id' => 'light', 'name' => 'Light'], ['id' => 'dark', 'name' => 'Dark'], ['id' => 'system', 'name' => 'System']]" hint="Inline from sm" />
|
||||
<x-radio label="Theme" name="showcase-radio-theme" value="system" inline :options="[['id' => 'light', 'name' => 'Light'], ['id' => 'dark', 'name' => 'Dark'], ['id' => 'system', 'name' => 'System']]" hint="Inline from medium" />
|
||||
</x-grid>
|
||||
BLADE,
|
||||
'Switches' => <<<'BLADE'
|
||||
@@ -156,7 +156,7 @@
|
||||
<x-list-item title="design-review.mp4" description="3.4 GB · 7 days left" icon="movie" link="#fields" x-show="'design-review.mp4'.includes(query.toLowerCase())" />
|
||||
</x-list>
|
||||
<x-slot:trailing>
|
||||
<span class="md-type-label-lg" data-md-showcase-avatar>AR</span>
|
||||
<span class="md-type-label-lg" style="display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--md-sys-shape-corner-full); background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);">AR</span>
|
||||
</x-slot:trailing>
|
||||
</x-search>
|
||||
</div>
|
||||
@@ -189,9 +189,9 @@
|
||||
</div>
|
||||
|
||||
{{-- M3's search icon button: search as a secondary action, expanding into the full-screen view. --}}
|
||||
<div data-md-showcase-search-bar>
|
||||
<x-row gap="space100" align="center" style="border-radius: var(--md-sys-shape-corner-full); background-color: var(--md-sys-color-surface-container-high); padding: var(--md-sys-measurement-space50) var(--md-sys-measurement-space100);">
|
||||
<x-button icon="menu" aria-label="Open the menu" />
|
||||
<span class="md-type-title-md md-ink" data-md-showcase-search-bar-title>Shares</span>
|
||||
<span class="md-type-title-md md-ink" style="flex: 1 1 auto;">Shares</span>
|
||||
<x-search trigger="icon" label="Search shares">
|
||||
<x-slot:suggestions>
|
||||
<x-list>
|
||||
@@ -200,11 +200,11 @@
|
||||
</x-slot:suggestions>
|
||||
<x-slot:empty>No shares match.</x-slot:empty>
|
||||
</x-search>
|
||||
</div>
|
||||
</x-row>
|
||||
</x-grid>
|
||||
BLADE,
|
||||
'A form' => <<<'BLADE'
|
||||
<x-card variant="outlined" data-md-showcase-demo-card data-md-showcase-size="md">
|
||||
<x-card variant="outlined" style="width: 100%; max-width: 576px;">
|
||||
<x-form x-on:submit.prevent="materialToast('Share created', { type: 'success' })" separator>
|
||||
<x-input label="Share name" required />
|
||||
<x-textarea label="Message for recipients" />
|
||||
|
||||
Reference in New Issue
Block a user