Closes #120. The two icon-only clear affordances now render as eidos `<Button>` via soma's `child` snippet, retiring the per-recipe chrome (border, padding, focus ring, hover, dimensions) in favour of button.css. The X glyph is provided through Button's `icon` snippet slot; `iconOnly` collapses the body and keeps the label sr-only. Both narrow `variant` to ControlVariant (`'surface' | 'outline' | 'ghost'`) per DEMO_AUTHORING_GUIDE §12.7 — same 3-set as DropdownMenu.Trigger and AlertDialog.Cancel. Default `variant='ghost'` (subtle X that reveals chrome on hover) which is the canonical clear affordance. Defaults: - Combobox.ClearButton: ghost · xs · iconOnly · color=neutral - SearchField.ClearTrigger: ghost · sm · iconOnly · color=neutral Per-component CSS gutted to the empty-state visibility rule only — `[data-…][data-empty] [data-…-clear-…] { opacity: 0; pointer-events: none }` stays because hiding the X when there's nothing to clear is component-specific behavior, not Button chrome. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>active-uix
parent
32598d7cf3
commit
0b55be5c36
@ -1,10 +1,60 @@
|
||||
<script lang="ts">
|
||||
/**
|
||||
* Eidos `SearchField.ClearTrigger` — icon-only X that clears the input.
|
||||
* Renders an eidos `<Button>` via soma's `child` snippet. Default
|
||||
* `variant='ghost' iconOnly` — subtle clear affordance.
|
||||
*
|
||||
* Visibility (hidden when the field is empty) is still handled by
|
||||
* `search-field.css` via the `[data-search-field][data-empty]`
|
||||
* ancestor rule.
|
||||
*
|
||||
* Composition: callers can pass their own `children` snippet (custom
|
||||
* glyph) or `child` snippet (full bypass of Button).
|
||||
*/
|
||||
import * as SearchField from '$soma/components/search-field';
|
||||
import { Button } from '$uix/eidos/components/button';
|
||||
import type { SearchFieldClearTriggerProps } from './types';
|
||||
|
||||
let { children, ...rest }: SearchFieldClearTriggerProps = $props();
|
||||
let {
|
||||
children,
|
||||
child: outerChild,
|
||||
variant = 'ghost',
|
||||
size,
|
||||
rounded,
|
||||
...rest
|
||||
}: SearchFieldClearTriggerProps = $props();
|
||||
</script>
|
||||
|
||||
<SearchField.ClearTrigger {...rest}>
|
||||
{@render children?.()}
|
||||
{#snippet child({ props })}
|
||||
{#if outerChild}
|
||||
{@render outerChild({ props })}
|
||||
{:else}
|
||||
<Button
|
||||
{...props}
|
||||
{variant}
|
||||
size={size ?? 'sm'}
|
||||
{rounded}
|
||||
intent="neutral"
|
||||
color="neutral"
|
||||
iconOnly
|
||||
>
|
||||
{#snippet icon()}
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.6"
|
||||
stroke-linecap="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M3 3l8 8M11 3l-8 8" />
|
||||
</svg>
|
||||
{/snippet}
|
||||
{#if children}{@render children()}{/if}
|
||||
</Button>
|
||||
{/if}
|
||||
{/snippet}
|
||||
</SearchField.ClearTrigger>
|
||||
|
||||
Loading…
Reference in new issue