#120 second pass. AlertDialog.Action and AlertDialog.Cancel now render eidos `<Button>` internally via soma's `child` snippet, retiring the per-recipe Toggle-token chrome and the CSS ancestor cascade (`[data-dialog-content][data-color='risk'] [data-alert-dialog-action]`). Intent propagation: soma's `AlertDialogActionProvider` exposes a new `dialogIntent` derived getter that reads `DialogProvider.opts.intent`. The Action component passes it to the `child` snippet alongside `props` (via `WithChildNoChildrenSnippetProps` so plain `children` stays a regular Snippet). The eidos Action wrapper forwards it to Button as `intent={intentOverride ?? dialogIntent}` — so `<AlertDialog intent="risk">` automatically paints a red Action without any cascade selector. Defaults: - Action: variant='solid', intent inherits from dialog - Cancel: variant='outline', intent='neutral', color='neutral' so it reads as gray-outlined regardless of the dialog's intent (canonical "this is the safe choice" cue) Cancel narrows variant to ControlVariant (3 chips: surface/outline/ghost) per DEMO_AUTHORING_GUIDE §12.7. Action keeps the full ButtonVariant because it's the primary call-to-action. alert-dialog.css gutted to a doc-only stub; all chrome now comes from button.css. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>active-uix
parent
a2709476f4
commit
c6f063dc6a
@ -1,17 +1,56 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
/**
|
/**
|
||||||
* Eidos `<AlertDialog.Action>` — destructive / primary confirmation
|
* Eidos `<AlertDialog.Action>` — primary / destructive confirmation
|
||||||
* button. Pass-through over soma's `<AlertDialog.Action>`. Visual
|
* button. Renders an eidos `<Button>` via soma's `child` snippet. The
|
||||||
* treatment lives in `alert-dialog.css` (solid button, defaults to
|
* parent dialog's doctrinal intent (neutral · risk · threat) is
|
||||||
* the dialog's `intent` color so a `risk`-flagged dialog gets a red
|
* resolved by soma and passed into the snippet; we forward it to
|
||||||
* Action automatically).
|
* Button so a `risk`-flagged AlertDialog automatically paints a red
|
||||||
|
* Action without needing a CSS ancestor cascade.
|
||||||
|
*
|
||||||
|
* Defaults: `variant='solid'`, `intent` from the parent dialog. The
|
||||||
|
* consumer can still override by passing `intent` explicitly on
|
||||||
|
* AlertDialog.Action.
|
||||||
|
*
|
||||||
|
* Composition escape: pass your own `child` snippet to bypass Button
|
||||||
|
* entirely.
|
||||||
*/
|
*/
|
||||||
import * as AlertDialog from '$soma/components/alert-dialog';
|
import * as AlertDialog from '$soma/components/alert-dialog';
|
||||||
|
import { Button } from '$uix/eidos/components/button';
|
||||||
import type { AlertDialogActionProps } from './types';
|
import type { AlertDialogActionProps } from './types';
|
||||||
|
|
||||||
let { children, ...rest }: AlertDialogActionProps = $props();
|
let {
|
||||||
|
children,
|
||||||
|
child: outerChild,
|
||||||
|
variant = 'solid',
|
||||||
|
size = 'md',
|
||||||
|
rounded,
|
||||||
|
intent: intentOverride,
|
||||||
|
color,
|
||||||
|
iconOnly,
|
||||||
|
icon,
|
||||||
|
endIcon,
|
||||||
|
...rest
|
||||||
|
}: AlertDialogActionProps = $props();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<AlertDialog.Action {...rest}>
|
<AlertDialog.Action {...rest}>
|
||||||
{@render children?.()}
|
{#snippet child({ props, intent: dialogIntent })}
|
||||||
|
{#if outerChild}
|
||||||
|
{@render outerChild({ props, intent: dialogIntent })}
|
||||||
|
{:else}
|
||||||
|
<Button
|
||||||
|
{...props}
|
||||||
|
{variant}
|
||||||
|
{size}
|
||||||
|
{rounded}
|
||||||
|
intent={intentOverride ?? dialogIntent}
|
||||||
|
{color}
|
||||||
|
{iconOnly}
|
||||||
|
{icon}
|
||||||
|
{endIcon}
|
||||||
|
>
|
||||||
|
{@render children?.()}
|
||||||
|
</Button>
|
||||||
|
{/if}
|
||||||
|
{/snippet}
|
||||||
</AlertDialog.Action>
|
</AlertDialog.Action>
|
||||||
|
|||||||
Loading…
Reference in new issue