fix(clerk-js): Merge the two password onBlur behaviours into one and …

…address spacing issues fix(clerk-js): Add changeset
clerk · Jul 19, 2023 · 3864477 · 3864477
1 parent 2e11664
commit 3864477
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 40 deletions.
diff --git a/.changeset/tidy-worms-tan.md b/.changeset/tidy-worms-tan.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Merge the two password onBlur behaviours into one and address spacing issues
diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordPage.test.tsx b/packages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordPage.test.tsx
@@ -244,7 +244,7 @@ describe('PasswordPage', () => {
           screen.getByText(/or more/i);
         });
       });
-    });
+    }, 10000);
 
     it('results in error if the passwords do not match and persists', async () => {
       const { wrapper } = await createFixtures(initConfig);

diff --git a/packages/clerk-js/src/ui/elements/FormControl.tsx b/packages/clerk-js/src/ui/elements/FormControl.tsx
@@ -94,24 +94,25 @@ function useFormTextAnimation() {
   };
 }
 
+type CalculateConfigProps = {
+  recalculate: string | boolean | undefined;
+};
 type Px = number;
-const useCalculateErrorTextHeight = () => {
+const useCalculateErrorTextHeight = (config: CalculateConfigProps) => {
   const [height, setHeight] = useState<Px>(24);
 
-  const calculateHeight = useCallback((element: HTMLElement | null) => {
-    if (element) {
-      const computedStyles = getComputedStyle(element);
-      const marginTop = parseInt(computedStyles.marginTop.replace('px', ''));
+  const calculateHeight = useCallback(
+    (element: HTMLElement | null) => {
+      if (element) {
+        const computedStyles = getComputedStyle(element);
+        const marginTop = parseInt(computedStyles.marginTop.replace('px', ''));
 
-      setHeight(prevHeight => {
-        const newHeight = 1.5 * marginTop + element.scrollHeight;
-        if (prevHeight < newHeight) {
-          return newHeight;
-        }
-        return prevHeight;
-      });
-    }
-  }, []);
+        const newHeight = 1.1 * marginTop + element.scrollHeight;
+        setHeight(newHeight);
+      }
+    },
+    [config.recalculate],
+  );
   return {
     height,
     calculateHeight,
@@ -136,7 +137,7 @@ export const FormFeedback = (props: FormFeedbackProps) => {
   const messageToDisplay = informationMessage || successMessage || errorMessage || warningMessage;
   const isSomeMessageVisible = !!messageToDisplay;
 
-  const { calculateHeight, height } = useCalculateErrorTextHeight();
+  const { calculateHeight, height } = useCalculateErrorTextHeight({ recalculate: warningMessage });
   const { getFormTextAnimation } = useFormTextAnimation();
   const defaultElementDescriptors = {
     error: descriptors.formFieldErrorText,

diff --git a/packages/clerk-js/src/ui/primitives/FormErrorText.tsx b/packages/clerk-js/src/ui/primitives/FormErrorText.tsx
@@ -13,7 +13,7 @@ const { applyVariants } = createVariants(theme => ({
     marginTop: theme.sizes.$2,
     animation: `${animations.textInSmall} ${theme.transitionDuration.$fast}`,
     display: 'flex',
-    gap: theme.sizes.$2,
+    gap: theme.sizes.$1,
     position: 'absolute',
     top: '0',
   },

diff --git a/packages/clerk-js/src/ui/primitives/FormSuccessText.tsx b/packages/clerk-js/src/ui/primitives/FormSuccessText.tsx
@@ -12,7 +12,7 @@ export const { applyVariants } = createVariants(theme => ({
     marginTop: theme.sizes.$2,
     animation: `${animations.textInSmall} ${theme.transitionDuration.$fast}`,
     display: 'flex',
-    gap: theme.sizes.$2,
+    gap: theme.sizes.$1,
     position: 'absolute',
     top: '0',
   },

diff --git a/packages/clerk-js/src/ui/utils/useFormControl.ts b/packages/clerk-js/src/ui/utils/useFormControl.ts
@@ -195,19 +195,9 @@ export const useFormControlFeedback = (opts: DebouncingOption): DebouncedFeedbac
     hasPassedComplexity = false,
   } = opts;
 
-  const canDisplayFeedback = useMemo(() => {
-    if (enableErrorAfterBlur) {
-      if (skipBlur) {
-        return true;
-      }
-      return hasLostFocus;
-    }
-    return true;
-  }, [enableErrorAfterBlur, hasLostFocus, skipBlur]);
-
   const feedbackMemo = useMemo(() => {
-    const shouldDisplayErrorAsWarning = hasPassedComplexity ? errorText && !hasLostFocus : false;
-    const _errorText = !shouldDisplayErrorAsWarning && canDisplayFeedback ? errorText : '';
+    const shouldDisplayErrorAsWarning = hasPassedComplexity ? errorText : false;
+    const _errorText = !shouldDisplayErrorAsWarning ? errorText : '';
     const _warningText = shouldDisplayErrorAsWarning ? errorText : warningText;
     const _successfulText = successfulText;
 
@@ -226,16 +216,7 @@ export const useFormControlFeedback = (opts: DebouncingOption): DebouncedFeedbac
       isFocused,
       informationText: shouldShowInformationText ? informationText : '',
     };
-  }, [
-    informationText,
-    enableErrorAfterBlur,
-    isFocused,
-    successfulText,
-    hasLostFocus,
-    errorText,
-    canDisplayFeedback,
-    skipBlur,
-  ]);
+  }, [informationText, enableErrorAfterBlur, isFocused, successfulText, hasLostFocus, errorText, skipBlur]);
 
   const debouncedState = useSetTimeout(feedbackMemo, delayInMs);