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
@@ -2,7 +2,7 @@
|
||||
$examples = [
|
||||
'Top app bars' => <<<'BLADE'
|
||||
<x-stack gap="space200" style="width: 100%;">
|
||||
<div data-md-showcase-bar-frame>
|
||||
<x-surface corner="lg" outlined style="overflow: hidden;">
|
||||
<x-app-bar title="Shares" :sticky="false">
|
||||
<x-slot:navigation><x-button icon="menu" tooltip="Open navigation" /></x-slot:navigation>
|
||||
<x-slot:actions>
|
||||
@@ -10,10 +10,10 @@
|
||||
<x-button icon="filter_list" tooltip="Filter" />
|
||||
</x-slot:actions>
|
||||
</x-app-bar>
|
||||
</div>
|
||||
</x-surface>
|
||||
|
||||
{{-- Resize the window: two icon buttons below 600px, four from there, the rest in "More options". --}}
|
||||
<div data-md-showcase-bar-frame>
|
||||
<x-surface corner="lg" outlined style="overflow: hidden;">
|
||||
<x-app-bar title="holiday-photos" :sticky="false" :actions="[
|
||||
['label' => 'Share', 'icon' => 'share'],
|
||||
['label' => 'Download', 'icon' => 'download'],
|
||||
@@ -23,37 +23,37 @@
|
||||
]">
|
||||
<x-slot:navigation><x-button icon="arrow_back" tooltip="Back" /></x-slot:navigation>
|
||||
</x-app-bar>
|
||||
</div>
|
||||
</x-surface>
|
||||
|
||||
<div data-md-showcase-bar-frame>
|
||||
<x-surface corner="lg" outlined style="overflow: hidden;">
|
||||
<x-app-bar variant="center" title="holiday-photos.zip" subtitle="248 MB · expires in 3 days" :sticky="false">
|
||||
<x-slot:navigation><x-button icon="arrow_back" tooltip="Back" /></x-slot:navigation>
|
||||
<x-slot:actions><x-button icon="share" tooltip="Share" /></x-slot:actions>
|
||||
</x-app-bar>
|
||||
</div>
|
||||
</x-surface>
|
||||
|
||||
<div data-md-showcase-bar-frame>
|
||||
<x-surface corner="lg" outlined style="overflow: hidden;">
|
||||
<x-app-bar variant="medium" title="Recipients" subtitle="3 people" :sticky="false">
|
||||
<x-slot:navigation><x-button icon="arrow_back" tooltip="Back" /></x-slot:navigation>
|
||||
<x-slot:actions><x-button icon="person_add" tooltip="Add recipient" /></x-slot:actions>
|
||||
</x-app-bar>
|
||||
</div>
|
||||
</x-surface>
|
||||
|
||||
<div data-md-showcase-bar-frame>
|
||||
<x-surface corner="lg" outlined style="overflow: hidden;">
|
||||
<x-app-bar variant="large" title="Settings" :sticky="false">
|
||||
<x-slot:navigation><x-button icon="arrow_back" tooltip="Back" /></x-slot:navigation>
|
||||
</x-app-bar>
|
||||
</div>
|
||||
</x-surface>
|
||||
|
||||
<div data-md-showcase-bar-frame="visible">
|
||||
<x-surface corner="lg" outlined>
|
||||
<x-app-bar variant="search" :sticky="false" style="border-radius: var(--md-sys-shape-corner-lg);">
|
||||
<x-slot:navigation><x-button icon="menu" tooltip="Open navigation" /></x-slot:navigation>
|
||||
<x-search placeholder="Search shares" docked />
|
||||
<x-slot:actions>
|
||||
<span data-md-showcase-avatar class="md-type-label-lg">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:actions>
|
||||
</x-app-bar>
|
||||
</div>
|
||||
</x-surface>
|
||||
</x-stack>
|
||||
BLADE,
|
||||
'Toolbars' => <<<'BLADE'
|
||||
@@ -78,16 +78,16 @@
|
||||
<x-button icon="zoom_in" tooltip-right="Zoom in" />
|
||||
</x-toolbar>
|
||||
|
||||
<div data-md-showcase-bar-frame>
|
||||
<x-surface corner="lg" outlined style="width: 100%; overflow: hidden;">
|
||||
<x-toolbar variant="docked" label="Selection">
|
||||
<x-button icon="download" tooltip="Download" />
|
||||
<x-button icon="share" tooltip="Share" />
|
||||
<x-button icon="drive_file_move" tooltip="Move" />
|
||||
<x-button icon="delete" tooltip="Delete" />
|
||||
</x-toolbar>
|
||||
</div>
|
||||
</x-surface>
|
||||
|
||||
<div data-md-showcase-bar-frame>
|
||||
<x-surface corner="lg" outlined style="width: 100%; overflow: hidden;">
|
||||
<x-toolbar variant="docked" label="Editing">
|
||||
<x-button icon="check_box" tooltip="Select" />
|
||||
<x-button icon="brush" tooltip="Draw" />
|
||||
@@ -95,10 +95,10 @@
|
||||
<x-button icon="image" tooltip="Add image" />
|
||||
<x-slot:fab><x-fab icon="add" tooltip="New note" color="secondary" /></x-slot:fab>
|
||||
</x-toolbar>
|
||||
</div>
|
||||
</x-surface>
|
||||
|
||||
{{-- M3's docked toolbar on a large screen: rounded from 840px, its groups of controls divided. Narrower, it is the square docked bar. --}}
|
||||
<div data-md-showcase-bar-frame="rounded">
|
||||
<x-surface level="surface" corner="lg" padding="space200" style="width: 100%;">
|
||||
<x-toolbar variant="docked" rounded label="Text formatting">
|
||||
<x-button icon="undo" tooltip="Undo" />
|
||||
<x-button icon="redo" tooltip="Redo" />
|
||||
@@ -108,7 +108,7 @@
|
||||
<x-divider vertical />
|
||||
<x-button icon="link" tooltip="Insert link" />
|
||||
</x-toolbar>
|
||||
</div>
|
||||
</x-surface>
|
||||
</x-row>
|
||||
BLADE,
|
||||
'Primary tabs' => <<<'BLADE'
|
||||
@@ -134,7 +134,7 @@
|
||||
<x-tab name="billing">Plan and invoices.</x-tab>
|
||||
</x-tabs>
|
||||
|
||||
<div data-md-showcase-tabs-narrow>
|
||||
<div style="max-width: 384px;">
|
||||
<x-tabs scrollable :tabs="collect(['January', 'February', 'March', 'April', 'May', 'June', 'July'])->map(fn ($month) => ['name' => strtolower($month), 'label' => $month])->all()">
|
||||
<x-tab name="january">January's shares.</x-tab>
|
||||
</x-tabs>
|
||||
|
||||
Reference in New Issue
Block a user