fix(alert-dialog): narrow Action.variant to canonical SelectionVariant (3)

Stops the chip-count drift introduced in \`c98510af\`. AlertDialog.Action
was exposing all 6 ButtonVariant chips, breaking the 3-chip rhythm the
rest of UIX follows. Per DEMO_AUTHORING_GUIDE §12.7 every chip-group
must enumerate the full union the type declares — so the fix is to
narrow the *type*, not truncate the chips.

\`AlertDialogActionVariant = Extract<ButtonVariant, SelectionVariant>\`
imports the canonical set from \`eidos/lib/types.ts\` (`solid | outline |
ghost`), which is the right shape for a primary action button:
- keeps 'solid' as the CTA default
- 3-chip parity with Cancel (ControlVariant), DropdownMenu.Trigger
  (ControlVariant), and the rest of the form-control surface
- no invented vocab — uses the existing canon set named for exactly
  this use case ("selection chips / toggles" semantically maps to
  "selection / action buttons")

Demo array drops from 6 to 3 chips; API row updated to reflect the
narrowing.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
active-uix
dev 5 months ago
parent c98510aff7
commit 32598d7cf3

@ -9,7 +9,7 @@ import type {
ButtonRounded,
ButtonProps as EidosButtonProps
} from '$uix/eidos/components/button';
import type { ControlVariant, ResponsiveProp } from '$uix/eidos/lib/types';
import type { ControlVariant, SelectionVariant, ResponsiveProp } from '$uix/eidos/lib/types';
/**
* Eidos `<AlertDialog>` — visual wrapper over `soma/alert-dialog`. A
@ -45,13 +45,18 @@ export type AlertDialogProps = ProviderProps;
* Action button. Renders an eidos `<Button>` internally. Visual props
* are forwarded; `variant` defaults to `'solid'` (primary CTA) and
* `intent` defaults to the parent dialog's intent (so a risk-flagged
* AlertDialog paints a red Action automatically). The `variant` set is
* the full ButtonVariant since Action is the primary call-to-action of
* a destructive confirmation flow.
* AlertDialog paints a red Action automatically).
*
* `variant` narrows to SelectionVariant (`'solid' | 'outline' | 'ghost'`)
* per DEMO_AUTHORING_GUIDE §12.7 — canonical 3-value set for
* action/selection buttons. Keeps 'solid' as the CTA default while
* staying in the 3-chip rhythm the rest of UIX follows.
*/
export type AlertDialogActionVariant = Extract<ButtonVariant, SelectionVariant>;
export type AlertDialogActionProps = ActionProps & {
/** Button visual variant. @default 'solid' */
variant?: ButtonVariant;
/** Button visual variant, narrowed to SelectionVariant. @default 'solid' */
variant?: AlertDialogActionVariant;
/** Button size scale. @default 'md' */
size?: ResponsiveProp<ButtonSize>;
/** Button corner radius. */

@ -41,11 +41,10 @@
let triggerLabel = $state('Delete project…');
let actionText = $state('Delete project');
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'
);
// Eidos · Action visual props (forwarded to <Button>). variant narrows
// ButtonVariant → SelectionVariant (3-set: solid · outline · ghost)
// per DEMO_AUTHORING_GUIDE §12.7. Default stays 'solid' (CTA).
let actionVariant = $state<'solid' | 'outline' | 'ghost'>('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');
@ -450,7 +449,7 @@
<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)}
{#each ['solid', 'outline', 'ghost'] as v (v)}
<button
data-uix-chip
data-active={actionVariant === v}
@ -582,7 +581,7 @@
<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">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">variant <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">SelectionVariant: 'solid' | 'outline' | 'ghost'</td><td class="default">'solid'</td><td>Forwarded to the inner <code>&lt;Button&gt;</code>. Narrowed from ButtonVariant per DEMO_AUTHORING_GUIDE §12.7 — 3-value SelectionVariant keeps 'solid' as the CTA default while staying in the canonical chip rhythm.</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>

Loading…
Cancel
Save

Powered by TurnKey Linux.