search-field demo: clear button is an X icon, not a word

The clear affordance is the standard search-input pattern: an X glyph
inside the input, with the localized "Clear" / "Borrar" string moved
to `aria-label`. Showing the word "Borrar" inline and then a hover
button on top read as two redundant affordances.

Replaced the visible text with `<X size="1em" decorative />` from the
icon set. The aria-label still pulls from
`'#?components.search-field.clear|Clear'` so screen readers get the
localized affordance name.

Code snippets in the API panel updated to match the new pattern
(`<SearchField.ClearTrigger aria-label="Clear"><X ... /></...>`)
instead of the text-only variant.

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

@ -5,6 +5,7 @@
type SearchFieldSize,
type SearchFieldVariant
} from '$uix/eidos/components/search-field';
import { X } from '$uix/eidos/components/icon';
import { compileMorfo } from '$uix/morfo';
import { searchFieldMorfo } from '@/uix/morfo/components/search-field';
import { getActiveUix } from '$active-uix';
@ -83,7 +84,7 @@
'',
'<SearchField.Provider bind:value placeholder="Search components">',
' <SearchField.Input />',
' <SearchField.ClearTrigger>Clear</SearchField.ClearTrigger>',
' <SearchField.ClearTrigger aria-label="Clear"><X size="1em" decorative /></SearchField.ClearTrigger>',
'</SearchField.Provider>'
].join('\n')
);
@ -100,7 +101,7 @@
color !== 'primary' && ` color="${color}"`,
'>',
' <SearchField.Input />',
' <SearchField.ClearTrigger>Clear</SearchField.ClearTrigger>',
' <SearchField.ClearTrigger aria-label="Clear"><X size="1em" decorative /></SearchField.ClearTrigger>',
'</SearchField>'
]
.filter(Boolean)
@ -145,8 +146,10 @@
onClear={() => (lastSubmit = 'cleared')}
>
<SearchField.Input />
<SearchField.ClearTrigger>
{uix.langs.ts('#?components.search-field.clear|Clear')}
<SearchField.ClearTrigger
aria-label={uix.langs.ts('#?components.search-field.clear|Clear')}
>
<X size="1em" decorative />
</SearchField.ClearTrigger>
</SearchField>
</div>

Loading…
Cancel
Save

Powered by TurnKey Linux.