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.

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

Tweak the search field based on design input #689

Merged
merged 8 commits into from
Jul 7, 2023

Conversation

csillag
Copy link
Contributor

@csillag csillag commented Jul 7, 2023

  • Update the placeholder
  • Add missing clear button
  • Add time delay between typing and showing the error message
  • Add animation when showing/hiding search suggestions
  • Add animation when showing/hiding the error message
  • Different colors and icons for warning and error messages
  • Update borders
  • Other updates?
  • Move some if the customizations to a higher level, into a dedicated (styled) component or into the theme itself

@github-actions
Copy link

github-actions bot commented Jul 7, 2023

Deployed to Cloudflare Pages

Latest commit: 2736a4c70b34982418ba7faf47a1c55f84f4f53a
Status:✅ Deploy successful!
Preview URL: https://e53c5d2f.oasis-explorer.pages.dev

@csillag csillag force-pushed the csillag/tweak-search-field branch from ae5cfb2 to d95955e Compare July 7, 2023 10:32
if (hasProblem) {
const timeout = setTimeout(() => {
setItsTimeToAct(true)
}, 500)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(I dont like this pattern much. I'd validate either instantly, or on submit)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually we validate instantly in the sense that the search button is disabled right away; we just don't want to shove the error message to the face of the user. (Hopefully he will keep typing and won't even have to see it at all.)

@csillag csillag force-pushed the csillag/tweak-search-field branch from c0255ea to 198acab Compare July 7, 2023 12:04
@csillag csillag marked this pull request as ready for review July 7, 2023 12:05
@csillag csillag requested review from buberdds and lukaw3d July 7, 2023 12:05
@csillag csillag force-pushed the csillag/tweak-search-field branch from 198acab to 19e243b Compare July 7, 2023 12:08
src/app/components/Search/index.tsx Outdated Show resolved Hide resolved
src/app/components/Search/index.tsx Outdated Show resolved Hide resolved
@csillag csillag force-pushed the csillag/tweak-search-field branch 2 times, most recently from db6c885 to 86e06fb Compare July 7, 2023 13:53
@csillag csillag force-pushed the csillag/tweak-search-field branch from 86e06fb to 2736a4c Compare July 7, 2023 13:54
@csillag csillag enabled auto-merge July 7, 2023 13:55
@csillag csillag merged commit 70b24fb into master Jul 7, 2023
7 checks passed
@csillag csillag deleted the csillag/tweak-search-field branch July 7, 2023 13:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants