USR-135 fix(clerk-js): Address spacing issues when password feedback message changes

.changeset/tidy-worms-tan.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+---
+
+- Address spacing issues when password feedback message changes
+- Add a full stop in form feedback(errors and warnings) when needed

packages/clerk-js/src/ui/elements/FormControl.tsx

@@ -94,24 +94,25 @@ function useFormTextAnimation() {
   };
 }
 
+type CalculateConfigProps = {
+  recalculate?: string | 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,9 @@ export const FormFeedback = (props: FormFeedbackProps) => {
   const messageToDisplay = informationMessage || successMessage || errorMessage || warningMessage;
   const isSomeMessageVisible = !!messageToDisplay;
 
-  const { calculateHeight, height } = useCalculateErrorTextHeight();
+  const { calculateHeight, height } = useCalculateErrorTextHeight({
+    recalculate: warningMessage || errorMessage || informationMessage,
+  });
   const { getFormTextAnimation } = useFormTextAnimation();
   const defaultElementDescriptors = {
     error: descriptors.formFieldErrorText,

packages/clerk-js/src/ui/hooks/__tests__/usePasswordComplexity.test.tsx

@@ -150,14 +150,14 @@ describe('usePasswordComplexity', () => {
       result.current.getComplexity('@aP');
     });
 
-    expect(result.current.failedValidationsText).toBe('Your password must contain 8 or more characters and a number');
+    expect(result.current.failedValidationsText).toBe('Your password must contain 8 or more characters and a number.');
 
     await act(() => {
       result.current.getComplexity('aP');
     });
 
     expect(result.current.failedValidationsText).toBe(
-      'Your password must contain 8 or more characters, a special character, and a number',
+      'Your password must contain 8 or more characters, a special character, and a number.',
     );
   });
 });

packages/clerk-js/src/ui/hooks/usePasswordComplexity.ts

@@ -51,6 +51,18 @@ const errorMessages = {
   require_special_char: 'unstable__errors.passwordComplexity.requireSpecialCharacter',
 };
 
+const addFullStop = (string: string | undefined) => {
+  if (!string) {
+    return '';
+  }
+
+  if (string.charAt(string.length - 1) === '.') {
+    return string;
+  }
+
+  return string + '.';
+};
+
 export const generateErrorTextUtil = ({
   config,
   failedValidations,
@@ -84,7 +96,9 @@ export const generateErrorTextUtil = ({
   } else {
     messageWithPrefix = messages.join(', ');
   }
-  return `${t(localizationKeys('unstable__errors.passwordComplexity.sentencePrefix'))} ${messageWithPrefix}`;
+  return addFullStop(
+    `${t(localizationKeys('unstable__errors.passwordComplexity.sentencePrefix'))} ${messageWithPrefix}`,
+  );
 };
 
 const validate = (password: string, config: UsePasswordComplexityConfig): ComplexityErrors => {

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',
   },

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',
   },