Three related fixes touching the menu surface: 1. **Remove `modal` from DropdownMenu** (#127). The prop was declared in soma but never wired to anything — no overlay, no pointer-events blocker, no scrim. ark-ui / Headless-UI / Chakra all treat menu as non-modal by convention; Dialog/Drawer/AlertDialog cover blocking semantics. Drop it from soma (types, provider opts, component, test fixture), the eidos doc comment, the menubar consumer, and the dropdown-menu demo (state, control, snippet, API table, parity table). 2. **DropdownMenu.Trigger now renders `<Button>` internally** (#120 first consumer). Default variant='surface', size='md', intent='neutral'. `variant` is narrowed to ControlVariant (`'surface' | 'outline' | 'ghost'`) per DEMO_AUTHORING_GUIDE §12.7 so the trigger stays consistent with the form-control surface (Field/Select/Combobox) instead of inheriting Button's wider 6-variant set. The eidos demo exposes variant/size/intent chips that match the canonical narrowed vocab (Intent: neutral · affirm · fulfill · risk · threat · loss). Trigger's per-recipe CSS dropped — chrome comes from button.css. 3. **Menu-item unchecked indicators** (follow-up to #118). CheckboxItem and RadioItem now paint an empty outlined box / circle even when unchecked, so the user can tell at a glance which rows are checkable. Checked state fills with the accent color via the same `::before`. The reserved padding slot (26px) keeps row text from shifting when state flips. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>active-uix
parent
0e9628b8f0
commit
4b5bd9f35d
@ -1,7 +1,64 @@
|
||||
<script lang="ts">
|
||||
/**
|
||||
* Eidos DropdownMenu.Trigger.
|
||||
*
|
||||
* Renders the soma Trigger via its `child` snippet so the inner element
|
||||
* is an eidos `<Button>`. The Trigger picks up Button's chrome (focus
|
||||
* ring, padding, intent/color, variant) for free; the soma layer still
|
||||
* owns the click flow, ARIA wiring, and `data-state`. The
|
||||
* `[data-dropdown-menu-trigger]` data-attr lands on the same `<button>`
|
||||
* Button emits, so the recipe selector still matches.
|
||||
*
|
||||
* Visual props (`variant`/`size`/`intent`/`color`/etc.) are forwarded
|
||||
* to Button. `variant` is narrowed to ControlVariant
|
||||
* (`'surface' | 'outline' | 'ghost'`) so the trigger stays consistent
|
||||
* with the rest of the form-control surface — see types.ts for the
|
||||
* narrowing rationale. Consumers override the standard Button visual
|
||||
* props inline:
|
||||
*
|
||||
* <DropdownMenu.Trigger variant="solid" intent="affirm">Save</DropdownMenu.Trigger>
|
||||
*
|
||||
* Composition: callers can still pass their own `child` snippet to
|
||||
* bypass Button entirely (e.g. wrap an Avatar). When `child` is passed
|
||||
* we forward straight through soma and skip Button.
|
||||
*/
|
||||
import * as DropdownMenu from '$soma/components/dropdown-menu';
|
||||
import { Button } from '$uix/eidos/components/button';
|
||||
import type { DropdownMenuTriggerProps } from './types';
|
||||
let { children, ...rest }: DropdownMenuTriggerProps = $props();
|
||||
|
||||
let {
|
||||
children,
|
||||
child: outerChild,
|
||||
variant = 'surface',
|
||||
size = 'md',
|
||||
rounded,
|
||||
intent,
|
||||
color,
|
||||
iconOnly,
|
||||
icon,
|
||||
endIcon,
|
||||
...rest
|
||||
}: DropdownMenuTriggerProps = $props();
|
||||
</script>
|
||||
|
||||
<DropdownMenu.Trigger {...rest}>{@render children?.()}</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Trigger {...rest}>
|
||||
{#snippet child({ props })}
|
||||
{#if outerChild}
|
||||
{@render outerChild({ props })}
|
||||
{:else}
|
||||
<Button
|
||||
{...props}
|
||||
{variant}
|
||||
{size}
|
||||
{rounded}
|
||||
{intent}
|
||||
{color}
|
||||
{iconOnly}
|
||||
{icon}
|
||||
{endIcon}
|
||||
>
|
||||
{@render children?.()}
|
||||
</Button>
|
||||
{/if}
|
||||
{/snippet}
|
||||
</DropdownMenu.Trigger>
|
||||
|
||||
Loading…
Reference in new issue