From e6580193652ef47ee2a0219f22927c96443937b7 Mon Sep 17 00:00:00 2001
From: Albert Winberg <winberga@amazon.com>
Date: Wed, 16 Nov 2022 23:17:35 +0000
Subject: [PATCH] fix: generate gap attribute for CTA row

---
 ...studio-ui-codegen-react-forms.test.ts.snap | 632 +++++++++++++++---
 .../studio-ui-codegen-react-forms.test.ts     |  14 +-
 .../lib/amplify-ui-renderers/form.ts          |   4 +-
 .../lib/forms/form-renderer-helper.ts         |   7 +
 .../lib/react-component-render-helper.ts      |  45 +-
 .../forms/post-custom-create-custom-gaps.json |  85 +++
 6 files changed, 667 insertions(+), 120 deletions(-)
 create mode 100644 packages/codegen-ui/example-schemas/forms/post-custom-create-custom-gaps.json

diff --git a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap
index 9c039322f..62d7e2eff 100644
--- a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap
+++ b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`amplify form renderer tests custom form tests should render a custom backed form 1`] = `
+exports[`amplify form renderer tests custom form tests should render a custom backed create form 1`] = `
 "/* eslint-disable */
 import * as React from \\"react\\";
 import { fetchByPath, validateField } from \\"./utils\\";
@@ -310,7 +310,10 @@ export default function CustomDataForm(props) {
           onClick={resetStateValues}
           {...getOverrideProps(overrides, \\"ClearButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
+        <Flex
+          gap=\\"15px\\"
+          {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}
+        >
           <Button
             children=\\"go back\\"
             type=\\"button\\"
@@ -334,7 +337,7 @@ export default function CustomDataForm(props) {
 "
 `;
 
-exports[`amplify form renderer tests custom form tests should render a custom backed form 2`] = `
+exports[`amplify form renderer tests custom form tests should render a custom backed create form 2`] = `
 "import * as React from \\"react\\";
 import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
 import { GridProps, RadioGroupFieldProps, SelectFieldProps, StepperFieldProps, TextFieldProps } from \\"@aws-amplify/ui-react\\";
@@ -381,7 +384,7 @@ export default function CustomDataForm(props: CustomDataFormProps): React.ReactE
 "
 `;
 
-exports[`amplify form renderer tests custom form tests should render a custom backed form 3`] = `
+exports[`amplify form renderer tests custom form tests should render a custom backed create form with styled gaps 1`] = `
 "/* eslint-disable */
 import * as React from \\"react\\";
 import { fetchByPath, validateField } from \\"./utils\\";
@@ -394,64 +397,44 @@ import {
   RadioGroupField,
   SelectField,
   StepperField,
-  TextAreaField,
   TextField,
+  useTheme,
 } from \\"@aws-amplify/ui-react\\";
 export default function CustomDataForm(props) {
-  const {
-    initialData,
-    onSubmit,
-    onCancel,
-    onValidate,
-    onChange,
-    overrides,
-    ...rest
-  } = props;
+  const { onSubmit, onCancel, onValidate, onChange, overrides, ...rest } =
+    props;
+  const { tokens } = useTheme();
   const initialValues = {
     name: undefined,
     email: undefined,
-    \\"metadata-field\\": undefined,
     city: undefined,
     category: undefined,
     pages: 0,
+    phone: undefined,
   };
   const [name, setName] = React.useState(initialValues.name);
   const [email, setEmail] = React.useState(initialValues.email);
-  const [metadatafield, setMetadatafield] = React.useState(
-    initialValues[\\"metadata-field\\"]
-  );
   const [city, setCity] = React.useState(initialValues.city);
   const [category, setCategory] = React.useState(initialValues.category);
   const [pages, setPages] = React.useState(initialValues.pages);
+  const [phone, setPhone] = React.useState(initialValues.phone);
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
-    const cleanValues = { ...initialValues, ...initialData };
-    setName(cleanValues.name);
-    setEmail(cleanValues.email);
-    setMetadatafield(cleanValues[\\"metadata-field\\"]);
-    setCity(cleanValues.city);
-    setCategory(cleanValues.category);
-    setPages(cleanValues.pages);
+    setName(initialValues.name);
+    setEmail(initialValues.email);
+    setCity(initialValues.city);
+    setCategory(initialValues.category);
+    setPages(initialValues.pages);
+    setPhone(initialValues.phone);
     setErrors({});
   };
-  React.useEffect(resetStateValues, [initialData]);
-  React.useEffect(() => {
-    if (initialData) {
-      setName(initialData.name);
-      setEmail(initialData.email);
-      setMetadatafield(initialData[\\"metadata-field\\"]);
-      setCity(initialData.city);
-      setCategory(initialData.category);
-      setPages(initialData.pages);
-    }
-  }, []);
   const validations = {
     name: [{ type: \\"Required\\" }],
     email: [{ type: \\"Required\\" }],
-    \\"metadata-field\\": [{ type: \\"Required\\" }, { type: \\"JSON\\" }],
     city: [],
     category: [],
     pages: [],
+    phone: [{ type: \\"Required\\" }, { type: \\"Phone\\" }],
   };
   const runValidationTasks = async (fieldName, value) => {
     let validationResponse = validateField(value, validations[fieldName]);
@@ -465,18 +448,18 @@ export default function CustomDataForm(props) {
   return (
     <Grid
       as=\\"form\\"
-      rowGap=\\"15px\\"
-      columnGap=\\"15px\\"
-      padding=\\"20px\\"
+      rowGap={tokens.space.large.value}
+      columnGap={tokens.space.xl.value}
+      padding=\\"35px\\"
       onSubmit={async (event) => {
         event.preventDefault();
         const modelFields = {
           name,
           email,
-          \\"metadata-field\\": metadatafield,
           city,
           category,
           pages,
+          phone,
         };
         const validationResponses = await Promise.all(
           Object.keys(validations).reduce((promises, fieldName) => {
@@ -506,17 +489,16 @@ export default function CustomDataForm(props) {
         label=\\"name\\"
         isRequired={true}
         defaultValue=\\"John Doe\\"
-        defaultValue={name}
         onChange={(e) => {
           let { value } = e.target;
           if (onChange) {
             const modelFields = {
               name: value,
               email,
-              \\"metadata-field\\": metadatafield,
               city,
               category,
               pages,
+              phone,
             };
             const result = onChange(modelFields);
             value = result?.name ?? value;
@@ -535,17 +517,16 @@ export default function CustomDataForm(props) {
         label=\\"E-mail\\"
         isRequired={true}
         defaultValue=\\"johndoe@amplify.com\\"
-        defaultValue={email}
         onChange={(e) => {
           let { value } = e.target;
           if (onChange) {
             const modelFields = {
               name,
               email: value,
-              \\"metadata-field\\": metadatafield,
               city,
               category,
               pages,
+              phone,
             };
             const result = onChange(modelFields);
             value = result?.email ?? value;
@@ -560,34 +541,6 @@ export default function CustomDataForm(props) {
         hasError={errors.email?.hasError}
         {...getOverrideProps(overrides, \\"email\\")}
       ></TextField>
-      <TextAreaField
-        label=\\"Metadata\\"
-        isRequired={true}
-        defaultValue={metadatafield}
-        onChange={(e) => {
-          let { value } = e.target;
-          if (onChange) {
-            const modelFields = {
-              name,
-              email,
-              \\"metadata-field\\": value,
-              city,
-              category,
-              pages,
-            };
-            const result = onChange(modelFields);
-            value = result?.[\\"metadata-field\\"] ?? value;
-          }
-          if (errors[\\"metadata-field\\"]?.hasError) {
-            runValidationTasks(\\"metadata-field\\", value);
-          }
-          setMetadatafield(value);
-        }}
-        onBlur={() => runValidationTasks(\\"metadata-field\\", metadatafield)}
-        errorMessage={errors[\\"metadata-field\\"]?.errorMessage}
-        hasError={errors[\\"metadata-field\\"]?.hasError}
-        {...getOverrideProps(overrides, \\"metadata-field\\")}
-      ></TextAreaField>
       <SelectField
         label=\\"Label\\"
         placeholder=\\"Please select an option\\"
@@ -598,10 +551,10 @@ export default function CustomDataForm(props) {
             const modelFields = {
               name,
               email,
-              \\"metadata-field\\": metadatafield,
               city: value,
               category,
               pages,
+              phone,
             };
             const result = onChange(modelFields);
             value = result?.city ?? value;
@@ -637,17 +590,16 @@ export default function CustomDataForm(props) {
         label=\\"Label\\"
         name=\\"fieldName\\"
         defaultValue=\\"Hobbies\\"
-        defaultValue={category}
         onChange={(e) => {
           let { value } = e.target;
           if (onChange) {
             const modelFields = {
               name,
               email,
-              \\"metadata-field\\": metadatafield,
               city,
               category: value,
               pages,
+              phone,
             };
             const result = onChange(modelFields);
             value = result?.category ?? value;
@@ -687,10 +639,10 @@ export default function CustomDataForm(props) {
             const modelFields = {
               name,
               email,
-              \\"metadata-field\\": metadatafield,
               city,
               category,
               pages: value,
+              phone,
             };
             const result = onChange(modelFields);
             value = result?.pages ?? value;
@@ -705,6 +657,35 @@ export default function CustomDataForm(props) {
         hasError={errors.pages?.hasError}
         {...getOverrideProps(overrides, \\"pages\\")}
       ></StepperField>
+      <TextField
+        label=\\"Phone Number\\"
+        isRequired={true}
+        defaultValue=\\"+1-401-152-6995\\"
+        type=\\"tel\\"
+        onChange={(e) => {
+          let { value } = e.target;
+          if (onChange) {
+            const modelFields = {
+              name,
+              email,
+              city,
+              category,
+              pages,
+              phone: value,
+            };
+            const result = onChange(modelFields);
+            value = result?.phone ?? value;
+          }
+          if (errors.phone?.hasError) {
+            runValidationTasks(\\"phone\\", value);
+          }
+          setPhone(value);
+        }}
+        onBlur={() => runValidationTasks(\\"phone\\", phone)}
+        errorMessage={errors.phone?.errorMessage}
+        hasError={errors.phone?.hasError}
+        {...getOverrideProps(overrides, \\"phone\\")}
+      ></TextField>
       <Flex
         justifyContent=\\"space-between\\"
         {...getOverrideProps(overrides, \\"CTAFlex\\")}
@@ -713,9 +694,12 @@ export default function CustomDataForm(props) {
           children=\\"empty\\"
           type=\\"reset\\"
           onClick={resetStateValues}
-          {...getOverrideProps(overrides, \\"ResetButton\\")}
+          {...getOverrideProps(overrides, \\"ClearButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
+        <Flex
+          gap={tokens.space.xl.value}
+          {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}
+        >
           <Button
             children=\\"go back\\"
             type=\\"button\\"
@@ -739,10 +723,10 @@ export default function CustomDataForm(props) {
 "
 `;
 
-exports[`amplify form renderer tests custom form tests should render a custom backed form 4`] = `
+exports[`amplify form renderer tests custom form tests should render a custom backed create form with styled gaps 2`] = `
 "import * as React from \\"react\\";
 import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
-import { GridProps, RadioGroupFieldProps, SelectFieldProps, StepperFieldProps, TextAreaFieldProps, TextFieldProps } from \\"@aws-amplify/ui-react\\";
+import { GridProps, RadioGroupFieldProps, SelectFieldProps, StepperFieldProps, TextFieldProps } from \\"@aws-amplify/ui-react\\";
 export declare type ValidationResponse = {
     hasError: boolean;
     errorMessage?: string;
@@ -751,33 +735,32 @@ export declare type ValidationFunction<T> = (value: T, validationResponse: Valid
 export declare type CustomDataFormInputValues = {
     name?: string;
     email?: string;
-    \\"metadata-field\\"?: string;
     city?: string;
     category?: string;
     pages?: number;
+    phone?: string;
 };
 export declare type CustomDataFormValidationValues = {
     name?: ValidationFunction<string>;
     email?: ValidationFunction<string>;
-    \\"metadata-field\\"?: ValidationFunction<string>;
     city?: ValidationFunction<string>;
     category?: ValidationFunction<string>;
     pages?: ValidationFunction<number>;
+    phone?: ValidationFunction<string>;
 };
 export declare type FormProps<T> = Partial<T> & React.DOMAttributes<HTMLDivElement>;
 export declare type CustomDataFormOverridesProps = {
     CustomDataFormGrid?: FormProps<GridProps>;
     name?: FormProps<TextFieldProps>;
     email?: FormProps<TextFieldProps>;
-    \\"metadata-field\\"?: FormProps<TextAreaFieldProps>;
     city?: FormProps<SelectFieldProps>;
     category?: FormProps<RadioGroupFieldProps>;
     pages?: FormProps<StepperFieldProps>;
+    phone?: FormProps<TextFieldProps>;
 } & EscapeHatchProps;
 export declare type CustomDataFormProps = React.PropsWithChildren<{
     overrides?: CustomDataFormOverridesProps | undefined | null;
 } & {
-    initialData?: CustomDataFormInputValues;
     onSubmit: (fields: CustomDataFormInputValues) => void;
     onCancel?: () => void;
     onChange?: (fields: CustomDataFormInputValues) => CustomDataFormInputValues;
@@ -1130,7 +1113,10 @@ export default function CustomDataForm(props) {
           onClick={resetStateValues}
           {...getOverrideProps(overrides, \\"ClearButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
+        <Flex
+          gap=\\"15px\\"
+          {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}
+        >
           <Button
             children=\\"go back\\"
             type=\\"button\\"
@@ -1192,6 +1178,415 @@ export default function CustomDataForm(props: CustomDataFormProps): React.ReactE
 "
 `;
 
+exports[`amplify form renderer tests custom form tests should render a custom backed update form 1`] = `
+"/* eslint-disable */
+import * as React from \\"react\\";
+import { fetchByPath, validateField } from \\"./utils\\";
+import { getOverrideProps } from \\"@aws-amplify/ui-react/internal\\";
+import {
+  Button,
+  Flex,
+  Grid,
+  Radio,
+  RadioGroupField,
+  SelectField,
+  StepperField,
+  TextAreaField,
+  TextField,
+} from \\"@aws-amplify/ui-react\\";
+export default function CustomDataForm(props) {
+  const {
+    initialData,
+    onSubmit,
+    onCancel,
+    onValidate,
+    onChange,
+    overrides,
+    ...rest
+  } = props;
+  const initialValues = {
+    name: undefined,
+    email: undefined,
+    \\"metadata-field\\": undefined,
+    city: undefined,
+    category: undefined,
+    pages: 0,
+  };
+  const [name, setName] = React.useState(initialValues.name);
+  const [email, setEmail] = React.useState(initialValues.email);
+  const [metadatafield, setMetadatafield] = React.useState(
+    initialValues[\\"metadata-field\\"]
+  );
+  const [city, setCity] = React.useState(initialValues.city);
+  const [category, setCategory] = React.useState(initialValues.category);
+  const [pages, setPages] = React.useState(initialValues.pages);
+  const [errors, setErrors] = React.useState({});
+  const resetStateValues = () => {
+    const cleanValues = { ...initialValues, ...initialData };
+    setName(cleanValues.name);
+    setEmail(cleanValues.email);
+    setMetadatafield(cleanValues[\\"metadata-field\\"]);
+    setCity(cleanValues.city);
+    setCategory(cleanValues.category);
+    setPages(cleanValues.pages);
+    setErrors({});
+  };
+  React.useEffect(resetStateValues, [initialData]);
+  React.useEffect(() => {
+    if (initialData) {
+      setName(initialData.name);
+      setEmail(initialData.email);
+      setMetadatafield(initialData[\\"metadata-field\\"]);
+      setCity(initialData.city);
+      setCategory(initialData.category);
+      setPages(initialData.pages);
+    }
+  }, []);
+  const validations = {
+    name: [{ type: \\"Required\\" }],
+    email: [{ type: \\"Required\\" }],
+    \\"metadata-field\\": [{ type: \\"Required\\" }, { type: \\"JSON\\" }],
+    city: [],
+    category: [],
+    pages: [],
+  };
+  const runValidationTasks = async (fieldName, value) => {
+    let validationResponse = validateField(value, validations[fieldName]);
+    const customValidator = fetchByPath(onValidate, fieldName);
+    if (customValidator) {
+      validationResponse = await customValidator(value, validationResponse);
+    }
+    setErrors((errors) => ({ ...errors, [fieldName]: validationResponse }));
+    return validationResponse;
+  };
+  return (
+    <Grid
+      as=\\"form\\"
+      rowGap=\\"15px\\"
+      columnGap=\\"15px\\"
+      padding=\\"20px\\"
+      onSubmit={async (event) => {
+        event.preventDefault();
+        const modelFields = {
+          name,
+          email,
+          \\"metadata-field\\": metadatafield,
+          city,
+          category,
+          pages,
+        };
+        const validationResponses = await Promise.all(
+          Object.keys(validations).reduce((promises, fieldName) => {
+            if (Array.isArray(modelFields[fieldName])) {
+              promises.push(
+                ...modelFields[fieldName].map((item) =>
+                  runValidationTasks(fieldName, item)
+                )
+              );
+              return promises;
+            }
+            promises.push(
+              runValidationTasks(fieldName, modelFields[fieldName])
+            );
+            return promises;
+          }, [])
+        );
+        if (validationResponses.some((r) => r.hasError)) {
+          return;
+        }
+        await onSubmit(modelFields);
+      }}
+      {...rest}
+      {...getOverrideProps(overrides, \\"CustomDataForm\\")}
+    >
+      <TextField
+        label=\\"name\\"
+        isRequired={true}
+        defaultValue=\\"John Doe\\"
+        defaultValue={name}
+        onChange={(e) => {
+          let { value } = e.target;
+          if (onChange) {
+            const modelFields = {
+              name: value,
+              email,
+              \\"metadata-field\\": metadatafield,
+              city,
+              category,
+              pages,
+            };
+            const result = onChange(modelFields);
+            value = result?.name ?? value;
+          }
+          if (errors.name?.hasError) {
+            runValidationTasks(\\"name\\", value);
+          }
+          setName(value);
+        }}
+        onBlur={() => runValidationTasks(\\"name\\", name)}
+        errorMessage={errors.name?.errorMessage}
+        hasError={errors.name?.hasError}
+        {...getOverrideProps(overrides, \\"name\\")}
+      ></TextField>
+      <TextField
+        label=\\"E-mail\\"
+        isRequired={true}
+        defaultValue=\\"johndoe@amplify.com\\"
+        defaultValue={email}
+        onChange={(e) => {
+          let { value } = e.target;
+          if (onChange) {
+            const modelFields = {
+              name,
+              email: value,
+              \\"metadata-field\\": metadatafield,
+              city,
+              category,
+              pages,
+            };
+            const result = onChange(modelFields);
+            value = result?.email ?? value;
+          }
+          if (errors.email?.hasError) {
+            runValidationTasks(\\"email\\", value);
+          }
+          setEmail(value);
+        }}
+        onBlur={() => runValidationTasks(\\"email\\", email)}
+        errorMessage={errors.email?.errorMessage}
+        hasError={errors.email?.hasError}
+        {...getOverrideProps(overrides, \\"email\\")}
+      ></TextField>
+      <TextAreaField
+        label=\\"Metadata\\"
+        isRequired={true}
+        defaultValue={metadatafield}
+        onChange={(e) => {
+          let { value } = e.target;
+          if (onChange) {
+            const modelFields = {
+              name,
+              email,
+              \\"metadata-field\\": value,
+              city,
+              category,
+              pages,
+            };
+            const result = onChange(modelFields);
+            value = result?.[\\"metadata-field\\"] ?? value;
+          }
+          if (errors[\\"metadata-field\\"]?.hasError) {
+            runValidationTasks(\\"metadata-field\\", value);
+          }
+          setMetadatafield(value);
+        }}
+        onBlur={() => runValidationTasks(\\"metadata-field\\", metadatafield)}
+        errorMessage={errors[\\"metadata-field\\"]?.errorMessage}
+        hasError={errors[\\"metadata-field\\"]?.hasError}
+        {...getOverrideProps(overrides, \\"metadata-field\\")}
+      ></TextAreaField>
+      <SelectField
+        label=\\"Label\\"
+        placeholder=\\"Please select an option\\"
+        value={city}
+        onChange={(e) => {
+          let { value } = e.target;
+          if (onChange) {
+            const modelFields = {
+              name,
+              email,
+              \\"metadata-field\\": metadatafield,
+              city: value,
+              category,
+              pages,
+            };
+            const result = onChange(modelFields);
+            value = result?.city ?? value;
+          }
+          if (errors.city?.hasError) {
+            runValidationTasks(\\"city\\", value);
+          }
+          setCity(value);
+        }}
+        onBlur={() => runValidationTasks(\\"city\\", city)}
+        errorMessage={errors.city?.errorMessage}
+        hasError={errors.city?.hasError}
+        {...getOverrideProps(overrides, \\"city\\")}
+      >
+        <option
+          children=\\"Los Angeles\\"
+          value=\\"Los Angeles\\"
+          {...getOverrideProps(overrides, \\"cityoption0\\")}
+        ></option>
+        <option
+          children=\\"Houston\\"
+          value=\\"Houston\\"
+          {...getOverrideProps(overrides, \\"cityoption1\\")}
+        ></option>
+        <option
+          children=\\"New York\\"
+          value=\\"New York\\"
+          selected={true}
+          {...getOverrideProps(overrides, \\"cityoption2\\")}
+        ></option>
+      </SelectField>
+      <RadioGroupField
+        label=\\"Label\\"
+        name=\\"fieldName\\"
+        defaultValue=\\"Hobbies\\"
+        defaultValue={category}
+        onChange={(e) => {
+          let { value } = e.target;
+          if (onChange) {
+            const modelFields = {
+              name,
+              email,
+              \\"metadata-field\\": metadatafield,
+              city,
+              category: value,
+              pages,
+            };
+            const result = onChange(modelFields);
+            value = result?.category ?? value;
+          }
+          if (errors.category?.hasError) {
+            runValidationTasks(\\"category\\", value);
+          }
+          setCategory(value);
+        }}
+        onBlur={() => runValidationTasks(\\"category\\", category)}
+        errorMessage={errors.category?.errorMessage}
+        hasError={errors.category?.hasError}
+        {...getOverrideProps(overrides, \\"category\\")}
+      >
+        <Radio
+          children=\\"Hobbies\\"
+          value=\\"Hobbies\\"
+          {...getOverrideProps(overrides, \\"categoryRadio0\\")}
+        ></Radio>
+        <Radio
+          children=\\"Travel\\"
+          value=\\"Travel\\"
+          {...getOverrideProps(overrides, \\"categoryRadio1\\")}
+        ></Radio>
+        <Radio
+          children=\\"Health\\"
+          value=\\"Health\\"
+          {...getOverrideProps(overrides, \\"categoryRadio2\\")}
+        ></Radio>
+      </RadioGroupField>
+      <StepperField
+        label=\\"Label\\"
+        value={pages}
+        onStepChange={(e) => {
+          let value = e;
+          if (onChange) {
+            const modelFields = {
+              name,
+              email,
+              \\"metadata-field\\": metadatafield,
+              city,
+              category,
+              pages: value,
+            };
+            const result = onChange(modelFields);
+            value = result?.pages ?? value;
+          }
+          if (errors.pages?.hasError) {
+            runValidationTasks(\\"pages\\", value);
+          }
+          setPages(value);
+        }}
+        onBlur={() => runValidationTasks(\\"pages\\", pages)}
+        errorMessage={errors.pages?.errorMessage}
+        hasError={errors.pages?.hasError}
+        {...getOverrideProps(overrides, \\"pages\\")}
+      ></StepperField>
+      <Flex
+        justifyContent=\\"space-between\\"
+        {...getOverrideProps(overrides, \\"CTAFlex\\")}
+      >
+        <Button
+          children=\\"empty\\"
+          type=\\"reset\\"
+          onClick={resetStateValues}
+          {...getOverrideProps(overrides, \\"ResetButton\\")}
+        ></Button>
+        <Flex
+          gap=\\"15px\\"
+          {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}
+        >
+          <Button
+            children=\\"go back\\"
+            type=\\"button\\"
+            onClick={() => {
+              onCancel && onCancel();
+            }}
+            {...getOverrideProps(overrides, \\"CancelButton\\")}
+          ></Button>
+          <Button
+            children=\\"create\\"
+            type=\\"submit\\"
+            variation=\\"primary\\"
+            isDisabled={Object.values(errors).some((e) => e?.hasError)}
+            {...getOverrideProps(overrides, \\"SubmitButton\\")}
+          ></Button>
+        </Flex>
+      </Flex>
+    </Grid>
+  );
+}
+"
+`;
+
+exports[`amplify form renderer tests custom form tests should render a custom backed update form 2`] = `
+"import * as React from \\"react\\";
+import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
+import { GridProps, RadioGroupFieldProps, SelectFieldProps, StepperFieldProps, TextAreaFieldProps, TextFieldProps } from \\"@aws-amplify/ui-react\\";
+export declare type ValidationResponse = {
+    hasError: boolean;
+    errorMessage?: string;
+};
+export declare type ValidationFunction<T> = (value: T, validationResponse: ValidationResponse) => ValidationResponse | Promise<ValidationResponse>;
+export declare type CustomDataFormInputValues = {
+    name?: string;
+    email?: string;
+    \\"metadata-field\\"?: string;
+    city?: string;
+    category?: string;
+    pages?: number;
+};
+export declare type CustomDataFormValidationValues = {
+    name?: ValidationFunction<string>;
+    email?: ValidationFunction<string>;
+    \\"metadata-field\\"?: ValidationFunction<string>;
+    city?: ValidationFunction<string>;
+    category?: ValidationFunction<string>;
+    pages?: ValidationFunction<number>;
+};
+export declare type FormProps<T> = Partial<T> & React.DOMAttributes<HTMLDivElement>;
+export declare type CustomDataFormOverridesProps = {
+    CustomDataFormGrid?: FormProps<GridProps>;
+    name?: FormProps<TextFieldProps>;
+    email?: FormProps<TextFieldProps>;
+    \\"metadata-field\\"?: FormProps<TextAreaFieldProps>;
+    city?: FormProps<SelectFieldProps>;
+    category?: FormProps<RadioGroupFieldProps>;
+    pages?: FormProps<StepperFieldProps>;
+} & EscapeHatchProps;
+export declare type CustomDataFormProps = React.PropsWithChildren<{
+    overrides?: CustomDataFormOverridesProps | undefined | null;
+} & {
+    initialData?: CustomDataFormInputValues;
+    onSubmit: (fields: CustomDataFormInputValues) => void;
+    onCancel?: () => void;
+    onChange?: (fields: CustomDataFormInputValues) => CustomDataFormInputValues;
+    onValidate?: CustomDataFormValidationValues;
+} & React.CSSProperties>;
+export default function CustomDataForm(props: CustomDataFormProps): React.ReactElement;
+"
+`;
+
 exports[`amplify form renderer tests custom form tests should render a datastore backed form with a custom array field 1`] = `
 "/* eslint-disable */
 import * as React from \\"react\\";
@@ -1475,7 +1870,10 @@ export default function MyPostForm(props) {
           onClick={resetStateValues}
           {...getOverrideProps(overrides, \\"ClearButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
+        <Flex
+          gap=\\"15px\\"
+          {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}
+        >
           <Button
             children=\\"Cancel\\"
             type=\\"button\\"
@@ -2283,7 +2681,10 @@ export default function NestedJson(props) {
           onClick={resetStateValues}
           {...getOverrideProps(overrides, \\"ClearButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
+        <Flex
+          gap=\\"15px\\"
+          {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}
+        >
           <Button
             children=\\"Cancel\\"
             type=\\"button\\"
@@ -2772,7 +3173,10 @@ export default function NestedJson(props) {
           onClick={resetStateValues}
           {...getOverrideProps(overrides, \\"ResetButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
+        <Flex
+          gap=\\"15px\\"
+          {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}
+        >
           <Button
             children=\\"Cancel\\"
             type=\\"button\\"
@@ -2963,7 +3367,10 @@ export default function CustomWithSectionalElements(props) {
           onClick={resetStateValues}
           {...getOverrideProps(overrides, \\"ClearButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
+        <Flex
+          gap=\\"15px\\"
+          {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}
+        >
           <Button
             children=\\"Cancel\\"
             type=\\"button\\"
@@ -3153,7 +3560,10 @@ export default function MyPostForm(props) {
           onClick={resetStateValues}
           {...getOverrideProps(overrides, \\"ClearButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
+        <Flex
+          gap=\\"15px\\"
+          {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}
+        >
           <Button
             children=\\"Cancel\\"
             type=\\"button\\"
@@ -3514,7 +3924,10 @@ export default function MyPostForm(props) {
           onClick={resetStateValues}
           {...getOverrideProps(overrides, \\"ResetButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
+        <Flex
+          gap=\\"15px\\"
+          {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}
+        >
           <Button
             children=\\"Cancel\\"
             type=\\"button\\"
@@ -3716,7 +4129,10 @@ export default function MyPostForm(props) {
           onClick={resetStateValues}
           {...getOverrideProps(overrides, \\"ResetButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
+        <Flex
+          gap=\\"15px\\"
+          {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}
+        >
           <Button
             children=\\"Cancel\\"
             type=\\"button\\"
@@ -4083,7 +4499,10 @@ export default function MyFlexUpdateForm(props) {
           onClick={resetStateValues}
           {...getOverrideProps(overrides, \\"ResetButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
+        <Flex
+          gap=\\"15px\\"
+          {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}
+        >
           <Button
             children=\\"Cancel\\"
             type=\\"button\\"
@@ -4796,7 +5215,10 @@ export default function BlogCreateForm(props) {
           onClick={resetStateValues}
           {...getOverrideProps(overrides, \\"ClearButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
+        <Flex
+          gap=\\"15px\\"
+          {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}
+        >
           <Button
             children=\\"Cancel\\"
             type=\\"button\\"
@@ -5621,7 +6043,10 @@ export default function InputGalleryCreateForm(props) {
           onClick={resetStateValues}
           {...getOverrideProps(overrides, \\"ClearButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
+        <Flex
+          gap=\\"15px\\"
+          {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}
+        >
           <Button
             children=\\"Cancel\\"
             type=\\"button\\"
@@ -6517,7 +6942,10 @@ export default function InputGalleryUpdateForm(props) {
           onClick={resetStateValues}
           {...getOverrideProps(overrides, \\"ResetButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
+        <Flex
+          gap=\\"15px\\"
+          {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}
+        >
           <Button
             children=\\"Cancel\\"
             type=\\"button\\"
@@ -6886,7 +7314,10 @@ export default function MyFlexCreateForm(props) {
           onClick={resetStateValues}
           {...getOverrideProps(overrides, \\"ClearButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
+        <Flex
+          gap=\\"15px\\"
+          {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}
+        >
           <Button
             children=\\"Cancel\\"
             type=\\"button\\"
@@ -7459,7 +7890,10 @@ export default function PostCreateFormRow(props) {
           onClick={resetStateValues}
           {...getOverrideProps(overrides, \\"ClearButton\\")}
         ></Button>
-        <Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
+        <Flex
+          gap=\\"15px\\"
+          {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}
+        >
           <Button
             children=\\"Cancel\\"
             type=\\"button\\"
diff --git a/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react-forms.test.ts b/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react-forms.test.ts
index 401cb3d5b..c63c9ddff 100644
--- a/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react-forms.test.ts
+++ b/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react-forms.test.ts
@@ -99,20 +99,30 @@ describe('amplify form renderer tests', () => {
   });
 
   describe('custom form tests', () => {
-    it('should render a custom backed form', () => {
+    it('should render a custom backed create form', () => {
       const { componentText, declaration } = generateWithAmplifyFormRenderer('forms/post-custom-create', undefined);
       expect(componentText.replace(/\s/g, '')).toContain('onSubmit');
       expect(componentText).toMatchSnapshot();
       expect(declaration).toMatchSnapshot();
     });
 
-    it('should render a custom backed form', () => {
+    it('should render a custom backed update form', () => {
       const { componentText, declaration } = generateWithAmplifyFormRenderer('forms/post-custom-update', undefined);
       expect(componentText.replace(/\s/g, '')).toContain('onSubmit');
       expect(componentText).toMatchSnapshot();
       expect(declaration).toMatchSnapshot();
     });
 
+    it('should render a custom backed create form with styled gaps', () => {
+      const { componentText, declaration } = generateWithAmplifyFormRenderer(
+        'forms/post-custom-create-custom-gaps',
+        undefined,
+      );
+      expect(componentText.replace(/\s/g, '')).toContain('onSubmit');
+      expect(componentText).toMatchSnapshot();
+      expect(declaration).toMatchSnapshot();
+    });
+
     it('should render sectional elements', () => {
       const { componentText, declaration } = generateWithAmplifyFormRenderer(
         'forms/custom-with-sectional-elements',
diff --git a/packages/codegen-ui-react/lib/amplify-ui-renderers/form.ts b/packages/codegen-ui-react/lib/amplify-ui-renderers/form.ts
index 2e705bf1e..b1627cc41 100644
--- a/packages/codegen-ui-react/lib/amplify-ui-renderers/form.ts
+++ b/packages/codegen-ui-react/lib/amplify-ui-renderers/form.ts
@@ -23,7 +23,7 @@ import {
 } from '@aws-amplify/codegen-ui';
 import { factory, JsxAttribute, JsxChild, JsxElement, JsxOpeningElement, Statement, SyntaxKind } from 'typescript';
 import { ReactComponentRenderer } from '../react-component-renderer';
-import { buildLayoutProperties, buildOpeningElementProperties } from '../react-component-render-helper';
+import { buildFormLayoutProperties, buildOpeningElementProperties } from '../react-component-render-helper';
 import { ImportCollection, ImportSource } from '../imports';
 import { buildDataStoreExpression } from '../forms';
 import { onSubmitValidationRun, buildModelFieldObject } from '../forms/form-renderer-helper';
@@ -67,7 +67,7 @@ export default class FormRenderer extends ReactComponentRenderer<BaseComponentPr
       buildOpeningElementProperties(this.componentMetadata, value, key),
     );
 
-    propsArray.push(...buildLayoutProperties(this.componentMetadata.formMetadata));
+    propsArray.push(...buildFormLayoutProperties(this.componentMetadata.formMetadata));
 
     const submitAttribute = this.getFormOnSubmitAttribute();
     propsArray.push(submitAttribute);
diff --git a/packages/codegen-ui-react/lib/forms/form-renderer-helper.ts b/packages/codegen-ui-react/lib/forms/form-renderer-helper.ts
index bc70ce691..ef3f80ac0 100644
--- a/packages/codegen-ui-react/lib/forms/form-renderer-helper.ts
+++ b/packages/codegen-ui-react/lib/forms/form-renderer-helper.ts
@@ -55,6 +55,7 @@ import {
   setFieldState,
   setStateExpression,
 } from './form-state';
+import { buildCtaLayoutProperties } from '../react-component-render-helper';
 
 export const buildMutationBindings = (form: StudioForm) => {
   const {
@@ -228,6 +229,12 @@ export const addFormAttributes = (component: StudioComponent | StudioComponentCh
       );
     }
   }
+  if (componentName === 'RightAlignCTASubFlex') {
+    const flexGapAttribute = buildCtaLayoutProperties(formMetadata);
+    if (flexGapAttribute) {
+      attributes.push(flexGapAttribute);
+    }
+  }
   if (componentName === 'ClearButton' || componentName === 'ResetButton') {
     attributes.push(
       factory.createJsxAttribute(
diff --git a/packages/codegen-ui-react/lib/react-component-render-helper.ts b/packages/codegen-ui-react/lib/react-component-render-helper.ts
index 350601aa2..f6d5718ce 100644
--- a/packages/codegen-ui-react/lib/react-component-render-helper.ts
+++ b/packages/codegen-ui-react/lib/react-component-render-helper.ts
@@ -52,7 +52,7 @@ import {
   ArrayLiteralExpression,
 } from 'typescript';
 
-import { FormMetadata } from '@aws-amplify/codegen-ui/lib/types';
+import { FormMetadata, FormStyleConfig } from '@aws-amplify/codegen-ui/lib/types';
 import { ImportCollection, ImportSource } from './imports';
 import { json, jsonToLiteral } from './react-studio-template-renderer-helper';
 import { getChildPropMappingForComponentName } from './workflow/utils';
@@ -602,40 +602,51 @@ export function buildOpeningElementProperties(
   return factory.createJsxAttribute(factory.createIdentifier(name), undefined);
 }
 
-export function buildLayoutProperties(componentMetadata: FormMetadata | undefined): JsxAttribute[] {
+function buildFixedOrTokenRefAttribute(styleConfig: FormStyleConfig, propName: string): JsxAttribute | undefined {
+  if (styleConfig.value) {
+    return buildFixedAttr({ value: styleConfig.value }, propName);
+  }
+  if (styleConfig.tokenReference) {
+    const tokenReference = ['tokens', ...styleConfig.tokenReference.split('.')];
+
+    return factory.createJsxAttribute(
+      factory.createIdentifier(propName),
+      factory.createJsxExpression(
+        undefined,
+        factory.createPropertyAccessExpression(buildAccessChain(tokenReference, false), 'value'),
+      ),
+    );
+  }
+  return undefined;
+}
+
+export function buildFormLayoutProperties(formMetadata: FormMetadata | undefined): JsxAttribute[] {
   const propMap: Record<string, string> = {
     horizontalGap: 'rowGap',
     verticalGap: 'columnGap',
     outerPadding: 'padding',
   };
 
-  return Object.entries(componentMetadata?.layoutConfigs ?? {}).reduce<JsxAttribute[]>((acc, value) => {
+  return Object.entries(formMetadata?.layoutConfigs ?? {}).reduce<JsxAttribute[]>((acc, value) => {
     const mappedProp = propMap[value[0]];
 
     if (!mappedProp) {
       return acc;
     }
 
-    if (value[1].value) {
-      acc.push(buildFixedAttr({ value: value[1].value }, mappedProp));
-    } else if (value[1].tokenReference) {
-      const tokenReference = ['tokens', ...value[1].tokenReference.split('.')];
-
-      acc.push(
-        factory.createJsxAttribute(
-          factory.createIdentifier(mappedProp),
-          factory.createJsxExpression(
-            undefined,
-            factory.createPropertyAccessExpression(buildAccessChain(tokenReference, false), 'value'),
-          ),
-        ),
-      );
+    const mappedAttribute = buildFixedOrTokenRefAttribute(value[1], mappedProp);
+    if (mappedAttribute) {
+      acc.push(mappedAttribute);
     }
 
     return acc;
   }, []);
 }
 
+export function buildCtaLayoutProperties(formMetadata: FormMetadata): JsxAttribute | undefined {
+  return buildFixedOrTokenRefAttribute(formMetadata.layoutConfigs.verticalGap, 'gap');
+}
+
 export function addBindingPropertiesImports(
   component: StudioComponent | StudioComponentChild,
   importCollection: ImportCollection,
diff --git a/packages/codegen-ui/example-schemas/forms/post-custom-create-custom-gaps.json b/packages/codegen-ui/example-schemas/forms/post-custom-create-custom-gaps.json
new file mode 100644
index 000000000..1457f4f04
--- /dev/null
+++ b/packages/codegen-ui/example-schemas/forms/post-custom-create-custom-gaps.json
@@ -0,0 +1,85 @@
+{
+  "name": "CustomDataForm",
+  "formActionType": "create",
+  "dataType": {
+    "dataSourceType": "Custom",
+    "dataTypeName": "Post"
+  },
+  "fields": {
+    "name": {
+      "inputType": {
+        "required": true,
+        "type": "TextField",
+        "name": "name",
+        "defaultValue": "John Doe"
+      },
+      "label": "name"
+    },
+    "email": {
+      "inputType": {
+        "required": true,
+        "type": "TextField",
+        "name": "email",
+        "defaultValue": "johndoe@amplify.com"
+      },
+      "label": "E-mail"
+    },
+    "city": {
+      "inputType": {
+        "type": "SelectField",
+        "defaultValue": "New York",
+        "valueMappings": {
+          "bindingProperties": {},
+          "values": [{"value": {"value": "Los Angeles"}}, {"value": {"value": "Houston"}}, {"value": {"value": "New York"}}]
+        }
+      }
+    },
+    "category": {
+      "inputType": {
+        "type": "RadioGroupField",
+        "defaultValue": "Hobbies",
+        "valueMappings": {
+          "bindingProperties": {},
+          "values": [{"value": {"value": "Hobbies"}}, {"value": {"value": "Travel"}}, {"value": {"value": "Health"}}]
+        }
+      }
+    },
+    "pages": {
+      "inputType": {
+        "type": "StepperField"
+      }
+    },
+    "phone": {
+      "inputType": {
+        "required": true,
+        "type": "PhoneNumberField",
+        "name": "phoneNumber",
+        "defaultValue": "+1-401-152-6995"
+      },
+      "label": "Phone Number"
+    }
+  },
+  "sectionalElements": {},
+  "style": {
+    "horizontalGap": {
+      "tokenReference": "space.large"
+    },
+    "verticalGap": {
+      "tokenReference": "space.xl"
+    },
+    "outerPadding": {
+      "value": "35px"
+    }
+  },
+  "cta": {
+    "clear": {
+      "children": "empty"
+    },
+    "cancel": {
+      "children": "go back"
+    },
+    "submit": {
+      "children": "create"
+    }
+  }
+}
\ No newline at end of file