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" />
|
<path d="m4 4 8 8M12 4l-8 8" />
|
||||||
</svg>
|
</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) => (
|
check: (p: Props) => (
|
||||||
<svg viewBox="0 0 16 16" width="12" height="12" strokeWidth={2} {...baseStroke} {...p}>
|
<svg viewBox="0 0 16 16" width="12" height="12" strokeWidth={2} {...baseStroke} {...p}>
|
||||||
<path d="m3 8 3.5 3.5L13 5" />
|
<path d="m3 8 3.5 3.5L13 5" />
|
||||||
|
|||||||
@@ -49,6 +49,19 @@ export const SearchField = ({ value, onChange }: Props) => {
|
|||||||
}}
|
}}
|
||||||
spellCheck={false}
|
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>
|
<span className="search-kbd">/</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -223,6 +223,22 @@
|
|||||||
.search input::placeholder {
|
.search input::placeholder {
|
||||||
color: var(--t-3);
|
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 {
|
.search-kbd {
|
||||||
display: inline-grid;
|
display: inline-grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
|
|||||||
Reference in New Issue
Block a user