fix(clerk-js): Form error animation polishing

clerk · Sep 28, 2023 · 3d5378e · 3d5378e
1 parent b6c7cbd
commit 3d5378e
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 9 deletions.
diff --git a/packages/clerk-js/src/ui/elements/FormControl.tsx b/packages/clerk-js/src/ui/elements/FormControl.tsx
@@ -94,16 +94,16 @@ function useFormTextAnimation() {
   const prefersReducedMotion = usePrefersReducedMotion();
 
   const getFormTextAnimation = useCallback(
-    (enterAnimation: boolean): ThemableCssProp => {
+    (enterAnimation: boolean, inDelay?: boolean): ThemableCssProp => {
       if (prefersReducedMotion) {
         return {
           animation: 'none',
         };
       }
       return t => ({
-        animation: `${enterAnimation ? animations.inAnimation : animations.outAnimation} ${
-          t.transitionDuration.$textField
-        } ${t.transitionTiming.$common}`,
+        animation: `${
+          enterAnimation ? (inDelay ? animations.inDelayAnimation : animations.inAnimation) : animations.outAnimation
+        } ${t.transitionDuration.$textField} ${t.transitionTiming.$common}`,
         transition: `height ${t.transitionDuration.$slow} ${t.transitionTiming.$common}`, // This is expensive but required for a smooth layout shift
       });
     },
@@ -121,7 +121,8 @@ const useCalculateErrorTextHeight = ({ feedback }: { feedback: string }) => {
   const calculateHeight = useCallback(
     (element: HTMLElement | null) => {
       if (element) {
-        setHeight(element.scrollHeight);
+        const computedStyles = getComputedStyle(element);
+        setHeight(element.scrollHeight + parseInt(computedStyles.marginTop.replace('px', '')));
       }
     },
     [feedback],
@@ -228,7 +229,7 @@ export const FormFeedback = (props: FormFeedbackProps) => {
             () => ({
               visibility: feedbacks.a?.shouldEnter ? 'visible' : 'hidden',
             }),
-            getFormTextAnimation(!!feedbacks.a?.shouldEnter),
+            getFormTextAnimation(!!feedbacks.a?.shouldEnter, true),
           ]}
           localizationKey={feedbacks.a?.feedback}
         />
@@ -239,7 +240,7 @@ export const FormFeedback = (props: FormFeedbackProps) => {
             () => ({
               visibility: feedbacks.b?.shouldEnter ? 'visible' : 'hidden',
             }),
-            getFormTextAnimation(!!feedbacks.b?.shouldEnter),
+            getFormTextAnimation(!!feedbacks.b?.shouldEnter, true),
           ]}
           localizationKey={feedbacks.b?.feedback}
         />
@@ -255,6 +256,7 @@ export const FormControl = forwardRef<HTMLInputElement, PropsWithChildren<FormCo
   const {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     hasPassedComplexity,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     infoText,
     id,
     isRequired,
@@ -391,15 +393,17 @@ export const FormControl = forwardRef<HTMLInputElement, PropsWithChildren<FormCo
       {...inputElementProps}
       onFocus={e => {
         inputElementProps.onFocus?.(e);
-        setIsFocused(true);
+        setTimeout(() => {
+          setIsFocused(true);
+        }, 300);
       }}
       onBlur={e => {
         inputElementProps.onBlur?.(e);
         // set a timeout because new errors might appear
         // and we don't want to spam layout shifts
         setTimeout(() => {
           setIsFocused(false);
-        }, 500);
+        }, 300);
       }}
       ref={ref}
       placeholder={t(placeholder)}

diff --git a/packages/clerk-js/src/ui/styledSystem/animations.ts b/packages/clerk-js/src/ui/styledSystem/animations.ts
@@ -47,6 +47,24 @@ const inAnimation = keyframes`
   }
 `;
 
+const inDelayAnimation = keyframes`
+  0% {
+    opacity: 0;
+    transform: translateY(-5px);
+    max-height: 0;
+  }
+  50% {
+    opacity: 0;
+    transform: translateY(-5px);
+    max-height: 0;
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+    max-height: 6rem;
+  }
+`;
+
 const notificationAnimation = keyframes`
   0% {
     opacity: 0;
@@ -117,6 +135,7 @@ export const animations = {
   expandIn,
   navbarSlideIn,
   inAnimation,
+  inDelayAnimation,
   outAnimation,
   notificationAnimation,
 };