Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Various input related styling fixes #69

Merged
merged 1 commit into from
Sep 6, 2023
+20 −23
Merged

Various input related styling fixes #69

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions conformance-search/src/components/Input/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ export default function Input({
return (
<input
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus
className="grow px-3 text-sm focus:outline-none"
autoFocus={filter.value !== ""}
className="grow rounded-none bg-transparent px-3 text-sm focus:outline-none"
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
updateFilter(index, (e.target as HTMLInputElement).value)
}
Expand Down
4 changes: 2 additions & 2 deletions conformance-search/src/components/Input/variants/ContainerInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export default function ContainerInput({
// Focus the input when the parsed value changes
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
inputRef.current?.focus();
if (parsed.length > 0) inputRef.current?.focus();
}, [parsed]);

// Dropdown menu
Expand Down Expand Up @@ -177,7 +177,7 @@ export default function ContainerInput({
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className="w-fit focus:outline-none xs:w-full"
className="w-fit bg-transparent focus:outline-none xs:w-full"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setQuery((e.target as HTMLInputElement).value);
setOpen(true);
Expand Down
33 changes: 15 additions & 18 deletions conformance-search/src/components/SearchComponent/SearchComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export default function SearchComponent({
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className="h-16 min-w-0 grow rounded-md px-5 text-sm focus:outline-none disabled:bg-transparent"
className="h-16 min-w-0 grow rounded-tl-md bg-transparent px-5 text-lg only:rounded-t-md focus:outline-none disabled:bg-gray-100"
disabled={!ready}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setQuery((e.target as HTMLInputElement).value);
Expand All @@ -97,23 +97,20 @@ export default function SearchComponent({
type="text"
value={query}
/>
<button
className={clsx(
"w-14 flex-col items-center justify-center",
!ready || loading || (!query && filters.length === 0)
? "hidden"
: "flex"
)}
disabled={!ready || loading}
onClick={() => {
setQuery("");
resetFilters();
}}
type="button"
>
<MdClose className="text-2xl" />
<span className="text-[10px] font-semibold">Reset</span>
</button>
{ready && !loading && (query || filters.length > 0) && (
<button
className="flex w-14 flex-col items-center justify-center"
onClick={() => {
setQuery("");
resetFilters();
}}
type="button"
>
<MdClose className="text-2xl" />
<span className="text-[10px] font-semibold">Reset</span>
</button>
)}

{(!ready || loading) && (
<div className="flex w-14 items-center justify-center">
<AiOutlineLoading className="animate-spin text-2xl" />
Expand Down
2 changes: 1 addition & 1 deletion conformance-search/src/pages/CoveragePage/CoveragePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,7 @@ export default function CoveragePage() {
/>
<div className="flex w-full flex-col items-start gap-2">
<input
className="w-full rounded border-1 px-3 py-2 shadow-md"
className="w-full rounded border-1 bg-transparent px-3 py-2 shadow-md"
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setSearch((e.target as HTMLInputElement).value)
}
Expand Down
Loading