From 2d2f8d23e1cf7493c62b4b5003d0b448066dcb71 Mon Sep 17 00:00:00 2001
From: Sebastian Sangervasi <sebastian@ethyca.com>
Date: Wed, 25 Jan 2023 17:18:32 -0800
Subject: [PATCH 1/2] pc/modals: Use chakra isRequired instead of string
 asterisk

---
 .../consent-request-modal/ConsentRequestForm.tsx  | 10 ++++------
 .../privacy-request-modal/PrivacyRequestForm.tsx  | 15 ++++++---------
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/clients/privacy-center/components/modals/consent-request-modal/ConsentRequestForm.tsx b/clients/privacy-center/components/modals/consent-request-modal/ConsentRequestForm.tsx
index 67a109c24f..33f001b127 100644
--- a/clients/privacy-center/components/modals/consent-request-modal/ConsentRequestForm.tsx
+++ b/clients/privacy-center/components/modals/consent-request-modal/ConsentRequestForm.tsx
@@ -179,10 +179,9 @@ const ConsentRequestForm: React.FC<ConsentRequestFormProps> = ({
               <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"
diff --git a/clients/privacy-center/components/modals/privacy-request-modal/PrivacyRequestForm.tsx b/clients/privacy-center/components/modals/privacy-request-modal/PrivacyRequestForm.tsx
index 72109deed0..73e3633933 100644
--- a/clients/privacy-center/components/modals/privacy-request-modal/PrivacyRequestForm.tsx
+++ b/clients/privacy-center/components/modals/privacy-request-modal/PrivacyRequestForm.tsx
@@ -217,10 +217,9 @@ const PrivacyRequestForm: React.FC<PrivacyRequestFormProps> = ({
               <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"

From 97a9d0d3efa0dc880fbe43093097b5766765fcc0 Mon Sep 17 00:00:00 2001
From: Sebastian Sangervasi <sebastian@ethyca.com>
Date: Wed, 25 Jan 2023 18:09:47 -0800
Subject: [PATCH 2/2] pc/modals: FormErrorMessage that always takes up space

---
 .../components/FormErrorMessage.tsx           | 25 +++++++++++++++++++
 .../components/modals/VerificationForm.tsx    |  4 +--
 .../ConsentRequestForm.tsx                    |  4 +--
 .../PrivacyRequestForm.tsx                    |  4 +--
 4 files changed, 31 insertions(+), 6 deletions(-)
 create mode 100644 clients/privacy-center/components/FormErrorMessage.tsx

diff --git a/clients/privacy-center/components/FormErrorMessage.tsx b/clients/privacy-center/components/FormErrorMessage.tsx
new file mode 100644
index 0000000000..8dc8cc9b70
--- /dev/null
+++ b/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} />;
+  }
+);
diff --git a/clients/privacy-center/components/modals/VerificationForm.tsx b/clients/privacy-center/components/modals/VerificationForm.tsx
index ee40c70786..bde38566ff 100644
--- a/clients/privacy-center/components/modals/VerificationForm.tsx
+++ b/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)}
diff --git a/clients/privacy-center/components/modals/consent-request-modal/ConsentRequestForm.tsx b/clients/privacy-center/components/modals/consent-request-modal/ConsentRequestForm.tsx
index 33f001b127..cebd7c5359 100644
--- a/clients/privacy-center/components/modals/consent-request-modal/ConsentRequestForm.tsx
+++ b/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,7 +174,7 @@ const ConsentRequestForm: React.FC<ConsentRequestFormProps> = ({
               We will send you a verification code.
             </Text>
           ) : null}
-          <Stack spacing={3}>
+          <Stack>
             {identityInputs.email ? (
               <FormControl
                 id="email"
diff --git a/clients/privacy-center/components/modals/privacy-request-modal/PrivacyRequestForm.tsx b/clients/privacy-center/components/modals/privacy-request-modal/PrivacyRequestForm.tsx
index 73e3633933..68f3756b20 100644
--- a/clients/privacy-center/components/modals/privacy-request-modal/PrivacyRequestForm.tsx
+++ b/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,7 +212,7 @@ 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"