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

feat(clerk-js): Improve password error feedback animations #1776

Conversation

desiprisg
Copy link
Contributor

@desiprisg desiprisg commented Sep 25, 2023

Description

This PR aims to refactor the form error animations and some internal methods. It also adds debouncing to the password validation, along with some small changes to the types of feedback shown based on the different conditions.

Screen.Recording.2023-09-28.at.19.30.00.mov

Checklist

  • npm test runs as expected.
  • npm run build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Packages affected

  • @clerk/clerk-js
  • @clerk/clerk-react
  • @clerk/nextjs
  • @clerk/remix
  • @clerk/types
  • @clerk/themes
  • @clerk/localizations
  • @clerk/clerk-expo
  • @clerk/backend
  • @clerk/clerk-sdk-node
  • @clerk/shared
  • @clerk/fastify
  • @clerk/chrome-extension
  • gatsby-plugin-clerk
  • build/tooling/chore

@changeset-bot
Copy link

changeset-bot bot commented Sep 25, 2023

🦋 Changeset detected

Latest commit: 26ef242

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
@clerk/clerk-js Minor
@clerk/chrome-extension Patch
@clerk/clerk-expo Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@desiprisg desiprisg force-pushed the george/usr-195-revisit-animations-and-debouncing-behavior-for-password branch 3 times, most recently from 1fd9157 to b6c7cbd Compare September 27, 2023 16:23
@nikosdouvlis
Copy link
Member

@desiprisg can you please add a description and a couple of screenshots if needed?

@desiprisg desiprisg self-assigned this Sep 28, 2023
@desiprisg desiprisg changed the title feat(clerk-js): Improve password error feedback feat(clerk-js): Improve password error feedback animations Sep 28, 2023
@desiprisg desiprisg force-pushed the george/usr-195-revisit-animations-and-debouncing-behavior-for-password branch from 3d5378e to 16386f3 Compare September 28, 2023 16:29
@desiprisg desiprisg marked this pull request as ready for review September 28, 2023 16:32
@desiprisg desiprisg requested a review from a team as a code owner September 28, 2023 16:32
packages/clerk-js/src/ui/elements/FormControl.tsx Outdated Show resolved Hide resolved
packages/clerk-js/src/ui/elements/FormControl.tsx Outdated Show resolved Hide resolved
packages/clerk-js/src/ui/elements/FormControl.tsx Outdated Show resolved Hide resolved
packages/clerk-js/src/ui/elements/FormControl.tsx Outdated Show resolved Hide resolved
packages/clerk-js/src/ui/elements/FormControl.tsx Outdated Show resolved Hide resolved
packages/clerk-js/src/ui/elements/PasswordInput.tsx Outdated Show resolved Hide resolved
packages/clerk-js/src/ui/hooks/usePassword.ts Show resolved Hide resolved
@desiprisg desiprisg force-pushed the george/usr-195-revisit-animations-and-debouncing-behavior-for-password branch 3 times, most recently from a053296 to 8d9d71a Compare October 3, 2023 16:39
Copy link
Member

@BRKalow BRKalow left a comment

Choose a reason for hiding this comment

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

Looks good! Nothing blocking, just some questions and observations.

packages/clerk-js/src/ui/elements/FormControl.tsx Outdated Show resolved Hide resolved
packages/clerk-js/src/ui/elements/FormControl.tsx Outdated Show resolved Hide resolved
packages/clerk-js/src/ui/elements/PasswordInput.tsx Outdated Show resolved Hide resolved
packages/clerk-js/src/ui/elements/PasswordInput.tsx Outdated Show resolved Hide resolved
@desiprisg desiprisg force-pushed the george/usr-195-revisit-animations-and-debouncing-behavior-for-password branch from 55cf3b0 to b629fd3 Compare October 17, 2023 23:12
@panteliselef panteliselef self-requested a review October 19, 2023 23:40
Copy link
Member

@panteliselef panteliselef left a comment

Choose a reason for hiding this comment

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

Let's ship this !!

@desiprisg desiprisg force-pushed the george/usr-195-revisit-animations-and-debouncing-behavior-for-password branch from acef2d5 to 1ae3414 Compare October 23, 2023 19:35
@desiprisg desiprisg closed this Oct 23, 2023
@desiprisg desiprisg deleted the george/usr-195-revisit-animations-and-debouncing-behavior-for-password branch October 23, 2023 22:49
@desiprisg desiprisg restored the george/usr-195-revisit-animations-and-debouncing-behavior-for-password branch October 23, 2023 22:55
@desiprisg desiprisg reopened this Oct 23, 2023
@panteliselef panteliselef self-requested a review October 24, 2023 14:52
feat(clerk-js): Add PasswordInput validation debouncing

refactor(clerk-js): Remove unused props

fix(clerk-js): Add infoText for VerifyDomainPage

fix(clerk-js): Smooth error animation and min height
test(clerk-js): Fix tests for password validation

chore(clerk-js): Changeset

chore(clerk-js): Improve changeset

fix(clerk-js): Address PR comments

refactor(clerk-js): Avoid useEffect usage for feedbacks and maxHeight

fix(clerk-js): Add clearFeedback to types

fix(clerk-js): Delay feedback after focus/blur on input elements
chore(clerk-js): Replace NodeJS.Timeout type

refactor(clerk-js): Extract inAnimation ternary into variable

refactor(clerk-js): Handle the undefined case in getElementProps
@desiprisg desiprisg force-pushed the george/usr-195-revisit-animations-and-debouncing-behavior-for-password branch from d14134d to 26ef242 Compare October 24, 2023 19:03
@desiprisg desiprisg added this pull request to the merge queue Oct 24, 2023
Merged via the queue into main with commit 9e57e94 Oct 24, 2023
12 checks passed
@desiprisg desiprisg deleted the george/usr-195-revisit-animations-and-debouncing-behavior-for-password branch October 24, 2023 19:35
This was referenced Oct 24, 2023
@clerk-cookie
Copy link
Collaborator

This PR has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@clerk clerk locked as resolved and limited conversation to collaborators Oct 24, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants