go
/
svelte-kit-vice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

demo(alert-dialog): expose variant/size chips for Action and Cancel

Browse Source 
Surfaces the Button visual props that AlertDialog.Action and
AlertDialog.Cancel now forward (post `c6f063dc`) so the demo isn't
lying about the component's API:

- Action: 6 chips (full ButtonVariant — primary CTA), 5 size chips.
  Intent is NOT exposed as a separate chip because it inherits from
  the dialog's own `intent` prop (already a Live control above).
- Cancel: 3 chips (ControlVariant — narrowed per
  DEMO_AUTHORING_GUIDE §12.7), 5 size chips. Always neutral palette
  regardless of dialog intent.

Live preview wires both bindings into the rendered Action/Cancel; API
tables list the new props with type, default, and the snippet shape
(`Snippet<[{ props; intent }]>` for Action's `child`).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
active-uix
dev 5 months ago
parent c6f063dc6a
commit c98510aff7
1 changed files with 109 additions and 2 deletions
Show Stats Download Patch File Download Diff File

111
web/routes/uix/components/alert-dialog/+page.svelte
Unescape View File

@ -41,6 +41,15 @@
let triggerLabel = $state('Delete project…'); let triggerLabel = $state('Delete project…');
let actionText = $state('Delete project'); let actionText = $state('Delete project');
let cancelText = $state('Cancel'); let cancelText = $state('Cancel');
// Eidos · Action visual props (forwarded to <Button>). Action keeps
// the full ButtonVariant since it's the primary call-to-action.
let actionVariant = $state<'solid' | 'soft' | 'surface' | 'outline' | 'ghost' | 'plain'>(
'solid'
);
let actionSize = $state<'xs' | 'sm' | 'md' | 'lg' | 'xl'>('md');
// Cancel narrows variant to ControlVariant per DEMO_AUTHORING_GUIDE §12.7.
let cancelVariant = $state<'surface' | 'outline' | 'ghost'>('outline');
let cancelSize = $state<'xs' | 'sm' | 'md' | 'lg' | 'xl'>('md');
// Composition toggles // Composition toggles
let showHeader = $state(true); let showHeader = $state(true);
let showFooter = $state(true); let showFooter = $state(true);
@ -244,8 +253,20 @@
{/if} {/if}
{#if showFooter} {#if showFooter}
<AlertDialog.Footer> <AlertDialog.Footer>
<AlertDialog.Cancel onclick={handleCancel}>{cancelText}</AlertDialog.Cancel> <AlertDialog.Cancel
<AlertDialog.Action onclick={handleAction}>{actionText}</AlertDialog.Action> variant={cancelVariant}
size={cancelSize}
onclick={handleCancel}
>
{cancelText}
</AlertDialog.Cancel>
<AlertDialog.Action
variant={actionVariant}
size={actionSize}
onclick={handleAction}
>
{actionText}
</AlertDialog.Action>
</AlertDialog.Footer> </AlertDialog.Footer>
{:else} {:else}
<AlertDialog.Cancel onclick={handleCancel}>{cancelText}</AlertDialog.Cancel> <AlertDialog.Cancel onclick={handleCancel}>{cancelText}</AlertDialog.Cancel>
@ -418,6 +439,82 @@
</label> </label>
</div> </div>
<!-- ── Eidos · Action visual props ────────────────────────────── -->
<div data-uix-subsection-head>
<span data-uix-layer-badge="eidos">eidos</span> Action
<span style="font-weight: normal; color: var(--uix-text-muted);">
· visual props forwarded to &lt;Button&gt;; intent inherits from the dialog
</span>
</div>
<div data-uix-controls>
<label data-uix-control>
<span data-uix-control-label>variant</span>
<span data-uix-chips role="radiogroup">
{#each ['solid', 'soft', 'surface', 'outline', 'ghost', 'plain'] as v (v)}
<button
data-uix-chip
data-active={actionVariant === v}
onclick={() => (actionVariant = v as typeof actionVariant)}
>
{v}
</button>
{/each}
</span>
</label>
<label data-uix-control>
<span data-uix-control-label>size</span>
<span data-uix-chips role="radiogroup">
{#each ['xs', 'sm', 'md', 'lg', 'xl'] as s (s)}
<button
data-uix-chip
data-active={actionSize === s}
onclick={() => (actionSize = s as typeof actionSize)}
>
{s}
</button>
{/each}
</span>
</label>
</div>
<!-- ── Eidos · Cancel visual props ────────────────────────────── -->
<div data-uix-subsection-head>
<span data-uix-layer-badge="eidos">eidos</span> Cancel
<span style="font-weight: normal; color: var(--uix-text-muted);">
· variant narrowed to ControlVariant; always neutral palette
</span>
</div>
<div data-uix-controls>
<label data-uix-control>
<span data-uix-control-label>variant</span>
<span data-uix-chips role="radiogroup">
{#each ['surface', 'outline', 'ghost'] as v (v)}
<button
data-uix-chip
data-active={cancelVariant === v}
onclick={() => (cancelVariant = v as typeof cancelVariant)}
>
{v}
</button>
{/each}
</span>
</label>
<label data-uix-control>
<span data-uix-control-label>size</span>
<span data-uix-chips role="radiogroup">
{#each ['xs', 'sm', 'md', 'lg', 'xl'] as s (s)}
<button
data-uix-chip
data-active={cancelSize === s}
onclick={() => (cancelSize = s as typeof cancelSize)}
>
{s}
</button>
{/each}
</span>
</label>
</div>
<!-- ── Code snippets ───────────────────────────────────────────── --> <!-- ── Code snippets ───────────────────────────────────────────── -->
<div data-uix-code> <div data-uix-code>
<div data-uix-code-head> <div data-uix-code-head>
@ -485,6 +582,11 @@
<tbody> <tbody>
<tr><td class="name">aria-label</td><td class="type">string</td><td class="default empty">"Confirm"</td><td>Overrides the default accessible name.</td></tr> <tr><td class="name">aria-label</td><td class="type">string</td><td class="default empty">"Confirm"</td><td>Overrides the default accessible name.</td></tr>
<tr><td class="name">onclick</td><td class="type">(e: MouseEvent) =&gt; void</td><td class="default empty">—</td><td>Business handler. The default close runs LAST — consumer logic gets first chance to gate.</td></tr> <tr><td class="name">onclick</td><td class="type">(e: MouseEvent) =&gt; void</td><td class="default empty">—</td><td>Business handler. The default close runs LAST — consumer logic gets first chance to gate.</td></tr>
<tr><td class="name">variant <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">ButtonVariant: 'solid' | 'soft' | 'surface' | 'outline' | 'ghost' | 'plain'</td><td class="default">'solid'</td><td>Forwarded to the inner <code>&lt;Button&gt;</code>. Keeps the full ButtonVariant since Action is the primary call-to-action.</td></tr>
<tr><td class="name">size <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">'xs' | 'sm' | 'md' | 'lg' | 'xl'</td><td class="default">'md'</td><td>Button size scale.</td></tr>
<tr><td class="name">intent <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">'neutral' | 'affirm' | 'fulfill' | 'risk' | 'threat' | 'loss'</td><td class="default empty">inherits</td><td>When omitted, reads the parent <code>AlertDialog.intent</code> (neutral · risk · threat) so a flagged dialog paints a matching Action automatically.</td></tr>
<tr><td class="name">color · rounded · iconOnly · icon · endIcon <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">Button props</td><td class="default empty">—</td><td>Standard Button visual knobs forwarded through.</td></tr>
<tr><td class="name">child</td><td class="type">{`Snippet<[{ props; intent }]>`}</td><td class="default empty">—</td><td>Opt out of <code>&lt;Button&gt;</code> entirely. The dialog's resolved intent is passed alongside <code>props</code>.</td></tr>
<tr><td class="name">…native button attrs</td><td class="type">PrimitiveButtonAttributes</td><td class="default empty">—</td><td>Renders a native <code>&lt;button type='button'&gt;</code>.</td></tr> <tr><td class="name">…native button attrs</td><td class="type">PrimitiveButtonAttributes</td><td class="default empty">—</td><td>Renders a native <code>&lt;button type='button'&gt;</code>.</td></tr>
</tbody> </tbody>
</table> </table>
@ -497,6 +599,11 @@
<tbody> <tbody>
<tr><td class="name">aria-label</td><td class="type">string</td><td class="default empty">"Cancel"</td><td>Overrides the default accessible name.</td></tr> <tr><td class="name">aria-label</td><td class="type">string</td><td class="default empty">"Cancel"</td><td>Overrides the default accessible name.</td></tr>
<tr><td class="name">onclick</td><td class="type">(e: MouseEvent) =&gt; void</td><td class="default empty">—</td><td>Business handler. Default close runs last.</td></tr> <tr><td class="name">onclick</td><td class="type">(e: MouseEvent) =&gt; void</td><td class="default empty">—</td><td>Business handler. Default close runs last.</td></tr>
<tr><td class="name">variant <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">ControlVariant: 'surface' | 'outline' | 'ghost'</td><td class="default">'outline'</td><td>Forwarded to <code>&lt;Button&gt;</code>. Narrowed from ButtonVariant per DEMO_AUTHORING_GUIDE §12.7 (form-control surface).</td></tr>
<tr><td class="name">size <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">'xs' | 'sm' | 'md' | 'lg' | 'xl'</td><td class="default">'md'</td><td>Button size scale.</td></tr>
<tr><td class="name">intent <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">ButtonIntent</td><td class="default">'neutral'</td><td>Stays neutral by default so it contrasts with the (potentially destructive) Action.</td></tr>
<tr><td class="name">color <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">ColorRole</td><td class="default">'neutral'</td><td>Forced to neutral so the outline reads as gray regardless of Button's default primary.</td></tr>
<tr><td class="name">rounded · iconOnly · icon · endIcon <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">Button props</td><td class="default empty">—</td><td>Standard Button visual knobs.</td></tr>
<tr><td class="name">…native button attrs</td><td class="type">PrimitiveButtonAttributes</td><td class="default empty">—</td><td>By convention, receives initial focus — render BEFORE Action in DOM order.</td></tr> <tr><td class="name">…native button attrs</td><td class="type">PrimitiveButtonAttributes</td><td class="default empty">—</td><td>By convention, receives initial focus — render BEFORE Action in DOM order.</td></tr>
</tbody> </tbody>
</table> </table>

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.