feat(ui): add search clear button
Search now exposes a small icon-only clear button whenever a query is present. Clicking it clears the term in one step and returns focus to the input so users can immediately type a replacement. The button uses the existing topbar styling language and a compact circled-x icon alongside the keyboard hint. Test Plan: - git diff --check Refs: user redesign nitpick about one-click search clearing
This commit is contained in:
@@ -67,6 +67,12 @@ export const Icon = {
|
||||
<path d="m4 4 8 8M12 4l-8 8" />
|
||||
</svg>
|
||||
),
|
||||
clearCircle: (p: Props) => (
|
||||
<svg viewBox="0 0 16 16" width="14" height="14" strokeWidth={1.7} {...baseStroke} {...p}>
|
||||
<circle cx="8" cy="8" r="5.5" />
|
||||
<path d="m6 6 4 4M10 6l-4 4" />
|
||||
</svg>
|
||||
),
|
||||
check: (p: Props) => (
|
||||
<svg viewBox="0 0 16 16" width="12" height="12" strokeWidth={2} {...baseStroke} {...p}>
|
||||
<path d="m3 8 3.5 3.5L13 5" />
|
||||
|
||||
@@ -49,6 +49,19 @@ export const SearchField = ({ value, onChange }: Props) => {
|
||||
}}
|
||||
spellCheck={false}
|
||||
/>
|
||||
{value && (
|
||||
<button
|
||||
className="search-clear"
|
||||
type="button"
|
||||
aria-label="Clear search"
|
||||
onClick={() => {
|
||||
onChange('');
|
||||
inputRef.current?.focus();
|
||||
}}
|
||||
>
|
||||
<Icon.clearCircle />
|
||||
</button>
|
||||
)}
|
||||
<span className="search-kbd">/</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -223,6 +223,22 @@
|
||||
.search input::placeholder {
|
||||
color: var(--t-3);
|
||||
}
|
||||
.search-clear {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: var(--t-3);
|
||||
cursor: pointer;
|
||||
}
|
||||
.search-clear:hover {
|
||||
color: var(--t-1);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.search-kbd {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
|
||||
Reference in New Issue
Block a user