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,29 +1,62 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
/**
|
/**
|
||||||
* Eidos `Combobox.ClearButton` — auto-X icon when no children are provided.
|
* Eidos `Combobox.ClearButton` — icon-only X that clears the input.
|
||||||
* Inline SVG keeps the wrapper self-contained (mirrors `Drawer.Close`).
|
* Renders an eidos `<Button>` via soma's `child` snippet (chrome,
|
||||||
|
* focus ring, hover, size all come from button.css). Default
|
||||||
|
* `variant='ghost' size='xs' iconOnly` — the typical subtle clear
|
||||||
|
* affordance.
|
||||||
|
*
|
||||||
|
* Visibility (hidden when the combobox is empty) is still handled by
|
||||||
|
* `combobox.css` via the `[data-combobox][data-empty]` ancestor rule.
|
||||||
|
*
|
||||||
|
* Composition: callers can pass their own `children` snippet (custom
|
||||||
|
* glyph) or `child` snippet (full bypass of Button).
|
||||||
*/
|
*/
|
||||||
import * as Combobox from '$soma/components/combobox';
|
import * as Combobox from '$soma/components/combobox';
|
||||||
|
import { Button } from '$uix/eidos/components/button';
|
||||||
import type { ComboboxClearButtonProps } from './types';
|
import type { ComboboxClearButtonProps } from './types';
|
||||||
|
|
||||||
let { children, ...rest }: ComboboxClearButtonProps = $props();
|
let {
|
||||||
|
children,
|
||||||
|
child: outerChild,
|
||||||
|
variant = 'ghost',
|
||||||
|
size = 'xs',
|
||||||
|
rounded,
|
||||||
|
...rest
|
||||||
|
}: ComboboxClearButtonProps = $props();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Combobox.ClearButton {...rest}>
|
<Combobox.ClearButton {...rest}>
|
||||||
{#if children}
|
{#snippet child({ props })}
|
||||||
{@render children()}
|
{#if outerChild}
|
||||||
{:else}
|
{@render outerChild({ props })}
|
||||||
<svg
|
{:else}
|
||||||
width="12"
|
<Button
|
||||||
height="12"
|
{...props}
|
||||||
viewBox="0 0 14 14"
|
{variant}
|
||||||
fill="none"
|
{size}
|
||||||
stroke="currentColor"
|
{rounded}
|
||||||
stroke-width="1.6"
|
intent="neutral"
|
||||||
stroke-linecap="round"
|
color="neutral"
|
||||||
aria-hidden="true"
|
iconOnly
|
||||||
>
|
aria-label="Clear"
|
||||||
<path d="M3 3l8 8M11 3l-8 8" />
|
>
|
||||||
</svg>
|
{#snippet icon()}
|
||||||
{/if}
|
<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}
|
||||||
</Combobox.ClearButton>
|
</Combobox.ClearButton>
|
||||||
|
|||||||
@ -1,10 +1,60 @@
|
|||||||
<script lang="ts">
|
<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 * as SearchField from '$soma/components/search-field';
|
||||||
|
import { Button } from '$uix/eidos/components/button';
|
||||||
import type { SearchFieldClearTriggerProps } from './types';
|
import type { SearchFieldClearTriggerProps } from './types';
|
||||||
|
|
||||||
let { children, ...rest }: SearchFieldClearTriggerProps = $props();
|
let {
|
||||||
|
children,
|
||||||
|
child: outerChild,
|
||||||
|
variant = 'ghost',
|
||||||
|
size,
|
||||||
|
rounded,
|
||||||
|
...rest
|
||||||
|
}: SearchFieldClearTriggerProps = $props();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<SearchField.ClearTrigger {...rest}>
|
<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>
|
</SearchField.ClearTrigger>
|
||||||
|
|||||||
Loading…
Reference in new issue