pc/modals: FormErrorMessage that always takes up space

clients/privacy-center/components/FormErrorMessage.tsx

@@ -0,0 +1,25 @@
+import {
+  Box,
+  FormErrorMessage as ChakraFormErrorMessage,
+  forwardRef,
+  useFormControlContext,
+} from "@fidesui/react";
+
+/**
+ * This is a thin wrapper around Chakra's FormErrorMessage that leaves room for the error message
+ * even when the field is valid. This prevents the form from changing height when validation runs,
+ * which can be annoying on blur.
+ *
+ * Chakra Source:
+ * https://github.com/chakra-ui/chakra-ui/blob/%40chakra-ui/react%401.8.8/packages/form-control/src/form-error.tsx
+ */
+export const FormErrorMessage: typeof ChakraFormErrorMessage = forwardRef(
+  (props, ref) => {
+    const field = useFormControlContext();
+    if (!field?.isInvalid) {
+      return <Box mt={2} minH={4} />;
+    }
+
+    return <ChakraFormErrorMessage ref={ref} {...props} />;
+  }
+);

clients/privacy-center/components/modals/VerificationForm.tsx

@@ -3,7 +3,6 @@ import {
   Button,
   chakra,
   FormControl,
-  FormErrorMessage,
   HStack,
   Input,
   ModalBody,
@@ -21,6 +20,7 @@ import { ErrorToastOptions } from "~/common/toast-options";
 import { Headers } from "headers-polyfill";
 import { addCommonHeaders } from "~/common/CommonHeaders";
 import { useLocalStorage } from "~/common/hooks";
+import { FormErrorMessage } from "~/components/FormErrorMessage";
 
 import { hostUrl } from "~/constants";
 import { ModalViews, VerificationType } from "./types";
@@ -178,7 +178,7 @@ const VerificationForm: React.FC<VerificationFormProps> = ({
             A verification code has been sent. Return to this window and enter
             the code below.
           </Text>
-          <Stack spacing={3}>
+          <Stack>
             <FormControl
               id="code"
               isInvalid={touched.code && Boolean(errors.code)}

clients/privacy-center/components/modals/consent-request-modal/ConsentRequestForm.tsx

@@ -3,7 +3,6 @@ import {
   Button,
   chakra,
   FormControl,
-  FormErrorMessage,
   FormLabel,
   Input,
   ModalBody,
@@ -20,6 +19,7 @@ import { ErrorToastOptions } from "~/common/toast-options";
 
 import { Headers } from "headers-polyfill";
 import { addCommonHeaders } from "~/common/CommonHeaders";
+import { FormErrorMessage } from "~/components/FormErrorMessage";
 
 import { config, defaultIdentityInput, hostUrl } from "~/constants";
 import dynamic from "next/dynamic";
@@ -174,15 +174,14 @@ const ConsentRequestForm: React.FC<ConsentRequestFormProps> = ({
               We will send you a verification code.
             </Text>
           ) : null}
-          <Stack spacing={3}>
+          <Stack>
             {identityInputs.email ? (
               <FormControl
                 id="email"
                 isInvalid={touched.email && Boolean(errors.email)}
+                isRequired={identityInputs.email === "required"}
               >
-                <FormLabel>
-                  {identityInputs.email === "required" ? "Email*" : "Email"}
-                </FormLabel>
+                <FormLabel>Email</FormLabel>
                 <Input
                   id="email"
                   name="email"
@@ -201,10 +200,9 @@ const ConsentRequestForm: React.FC<ConsentRequestFormProps> = ({
               <FormControl
                 id="phone"
                 isInvalid={touched.phone && Boolean(errors.phone)}
+                isRequired={identityInputs.phone === "required"}
               >
-                <FormLabel>
-                  {identityInputs.phone === "required" ? "Phone*" : "Phone"}
-                </FormLabel>
+                <FormLabel>Phone</FormLabel>
                 <Input
                   as={PhoneInput}
                   id="phone"

clients/privacy-center/components/modals/privacy-request-modal/PrivacyRequestForm.tsx

@@ -2,7 +2,6 @@ import {
   Button,
   chakra,
   FormControl,
-  FormErrorMessage,
   FormLabel,
   Input,
   ModalBody,
@@ -20,6 +19,7 @@ import { Headers } from "headers-polyfill";
 import { addCommonHeaders } from "~/common/CommonHeaders";
 import { ErrorToastOptions, SuccessToastOptions } from "~/common/toast-options";
 import { PrivacyRequestStatus } from "~/types";
+import { FormErrorMessage } from "~/components/FormErrorMessage";
 
 import { PrivacyRequestOption } from "~/types/config";
 import { hostUrl, config, defaultIdentityInput } from "~/constants";
@@ -212,15 +212,14 @@ const PrivacyRequestForm: React.FC<PrivacyRequestFormProps> = ({
           <Text fontSize="sm" color="gray.500" mb={4}>
             {action.description}
           </Text>
-          <Stack spacing={3}>
+          <Stack>
             {identityInputs.name ? (
               <FormControl
                 id="name"
                 isInvalid={touched.name && Boolean(errors.name)}
+                isRequired={identityInputs.name === "required"}
               >
-                <FormLabel>
-                  {identityInputs.name === "required" ? "Name*" : "Name"}
-                </FormLabel>
+                <FormLabel>Name</FormLabel>
                 <Input
                   id="name"
                   name="name"
@@ -237,10 +236,9 @@ const PrivacyRequestForm: React.FC<PrivacyRequestFormProps> = ({
               <FormControl
                 id="email"
                 isInvalid={touched.email && Boolean(errors.email)}
+                isRequired={identityInputs.email === "required"}
               >
-                <FormLabel>
-                  {identityInputs.email === "required" ? "Email*" : "Email"}
-                </FormLabel>
+                <FormLabel>Email</FormLabel>
                 <Input
                   id="email"
                   name="email"
@@ -258,10 +256,9 @@ const PrivacyRequestForm: React.FC<PrivacyRequestFormProps> = ({
               <FormControl
                 id="phone"
                 isInvalid={touched.phone && Boolean(errors.phone)}
+                isRequired={identityInputs.phone === "required"}
               >
-                <FormLabel>
-                  {identityInputs.phone === "required" ? "Phone*" : "Phone"}
-                </FormLabel>
+                <FormLabel>Phone</FormLabel>
                 <Input
                   as={PhoneInput}
                   id="phone"