Commit df69b8d3 authored by Robert Knight's avatar Robert Knight

Make search/clear buttons visually part of the input field

Align the styling of the search/clear buttons with the mocks [1] by:

 - Making the icons visually part of the input field
 - Increasing their size to match the top bar icons
 - Adjusting the padding

[1] https://github.com/hypothesis/client/issues/6006#issuecomment-1887328191
parent 9282934e
...@@ -2,7 +2,6 @@ import { ...@@ -2,7 +2,6 @@ import {
CancelIcon, CancelIcon,
IconButton, IconButton,
Input, Input,
InputGroup,
SearchIcon, SearchIcon,
useSyncedRef, useSyncedRef,
} from '@hypothesis/frontend-shared'; } from '@hypothesis/frontend-shared';
...@@ -87,9 +86,13 @@ export default function SearchField({ ...@@ -87,9 +86,13 @@ export default function SearchField({
onSubmit={onSubmit} onSubmit={onSubmit}
className={classnames('space-y-3', classes)} className={classnames('space-y-3', classes)}
> >
<InputGroup> <div className="relative">
<IconButton <IconButton
// Vertically center icon on left side of input. Increase the text
// size to make the icon the same size as the top bar icons.
classes="absolute left-1 text-[16px] top-[50%] translate-y-[-50%]"
icon={SearchIcon} icon={SearchIcon}
size="lg"
title="Search" title="Search"
type="submit" type="submit"
disabled={disabled} disabled={disabled}
...@@ -97,9 +100,8 @@ export default function SearchField({ ...@@ -97,9 +100,8 @@ export default function SearchField({
<Input <Input
aria-label="Search annotations" aria-label="Search annotations"
classes={classnames( classes={classnames(
'p-1.5', 'pl-9 pr-9', // Add padding so input does not overlap search/clear buttons.
'transition-[max-width] duration-300 ease-out', 'disabled:text-grey-6', // Dim text when input is disabled
'disabled:text-grey-6',
)} )}
data-testid="search-input" data-testid="search-input"
dir="auto" dir="auto"
...@@ -115,6 +117,8 @@ export default function SearchField({ ...@@ -115,6 +117,8 @@ export default function SearchField({
/> />
{pendingQuery && ( {pendingQuery && (
<IconButton <IconButton
classes="absolute right-1 text-[16px] top-[50%] translate-y-[-50%]"
size="lg"
icon={CancelIcon} icon={CancelIcon}
data-testid="clear-button" data-testid="clear-button"
title="Clear search" title="Clear search"
...@@ -122,7 +126,7 @@ export default function SearchField({ ...@@ -122,7 +126,7 @@ export default function SearchField({
disabled={disabled} disabled={disabled}
/> />
)} )}
</InputGroup> </div>
</form> </form>
); );
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment