From e6628a6a66963fec522cd86a7caebda252b52c88 Mon Sep 17 00:00:00 2001
From: Dong Kyun David Kim <dkim@influxdata.com>
Date: Sun, 25 Apr 2021 15:34:17 -0700
Subject: [PATCH 1/5] Adding support for help text -> error text conversion

---
 .../Form/Documentation/Form.stories.tsx       |  1 +
 src/Components/Form/Form.scss                 |  7 ++++++
 src/Components/Form/FormElementError.tsx      | 25 ++++++++++++-------
 src/Components/Form/FormValidationElement.tsx |  8 ++++--
 4 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/Components/Form/Documentation/Form.stories.tsx b/src/Components/Form/Documentation/Form.stories.tsx
index f0a80372d..c76adb344 100644
--- a/src/Components/Form/Documentation/Form.stories.tsx
+++ b/src/Components/Form/Documentation/Form.stories.tsx
@@ -234,6 +234,7 @@ formStories.add(
         <Form.ElementError
           ref={formElementErrorRef}
           message={text('errorMessage', 'Error Message')}
+          withHelper={boolean('withHelper', false)}
         />
         <div className="story--test-buttons">
           <button onClick={logRef}>Log Ref</button>
diff --git a/src/Components/Form/Form.scss b/src/Components/Form/Form.scss
index 658b6cd09..c1cedf640 100644
--- a/src/Components/Form/Form.scss
+++ b/src/Components/Form/Form.scss
@@ -36,6 +36,12 @@
   @extend %no-user-select;
 }
 
+.cf-form--element-error-container {
+  position: relative;
+  height: 0px;
+  width: 100%;
+}
+
 .cf-form--label {
   width: 100%;
   color: $cf-label--default;
@@ -60,6 +66,7 @@
 }
 
 .cf-form--element-error {
+  position: absolute;
   line-height: 16px;
   color: $c-dreamsicle;
   margin: $cf-marg-a 0 0 0;
diff --git a/src/Components/Form/FormElementError.tsx b/src/Components/Form/FormElementError.tsx
index 193097286..f8eee3aef 100644
--- a/src/Components/Form/FormElementError.tsx
+++ b/src/Components/Form/FormElementError.tsx
@@ -8,6 +8,7 @@ import {StandardFunctionProps} from '../../Types'
 export interface FormElementErrorProps extends StandardFunctionProps {
   /** Text to be displayed on error */
   message?: string
+  withHelper?: boolean
 }
 
 export type FormElementErrorRef = HTMLSpanElement
@@ -23,6 +24,7 @@ export const FormElementError = forwardRef<
       className,
       message = '\u00a0\u00a0',
       testID = 'form--element-error',
+      withHelper = false,
     },
     ref
   ) => {
@@ -30,16 +32,21 @@ export const FormElementError = forwardRef<
       [`${className}`]: className,
     })
 
+    //When Helper text exists, we want error message to take up as much height as the helper text. When Helper text does not exist, we want error message to not shift spaces.
+    const withHelperStyle = withHelper ? {height: '20px'} : {}
+
     return (
-      <span
-        id={id}
-        ref={ref}
-        style={style}
-        data-testid={testID}
-        className={formElementErrorClass}
-      >
-        {message}
-      </span>
+      <div className="cf-form--element-error-container" style={withHelperStyle}>
+        <span
+          id={id}
+          ref={ref}
+          style={style}
+          data-testid={testID}
+          className={formElementErrorClass}
+        >
+          {message}
+        </span>
+      </div>
     )
   }
 )
diff --git a/src/Components/Form/FormValidationElement.tsx b/src/Components/Form/FormValidationElement.tsx
index b30cad251..aef473677 100644
--- a/src/Components/Form/FormValidationElement.tsx
+++ b/src/Components/Form/FormValidationElement.tsx
@@ -80,6 +80,8 @@ export const FormValidationElement = forwardRef<
       onStatusChange(status)
     }
 
+    const withHelper = helpText ? true : false
+
     const formValidationElementClass = classnames('cf-form--element', {
       [`${className}`]: className,
     })
@@ -99,8 +101,10 @@ export const FormValidationElement = forwardRef<
           </FormLabel>
         )}
         {children(status)}
-        {!!errorMessage && <FormElementError message={errorMessage} />}
-        {!!helpText && <FormHelpText text={helpText} />}
+        {!!errorMessage && (
+          <FormElementError message={errorMessage} withHelper={withHelper} />
+        )}
+        {!!helpText && !errorMessage && <FormHelpText text={helpText} />}
       </label>
     )
   }

From 6a5e2479839d4af57b8aa4c084989a8563392f7b Mon Sep 17 00:00:00 2001
From: Dong Kyun David Kim <dkim@influxdata.com>
Date: Thu, 6 May 2021 18:44:27 -0700
Subject: [PATCH 2/5] allocate built in space

---
 src/Components/Form/Form.scss                 | 2 +-
 src/Components/Form/FormElementError.tsx      | 4 +---
 src/Components/Form/FormValidationElement.tsx | 3 +++
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/Components/Form/Form.scss b/src/Components/Form/Form.scss
index c1cedf640..e6ecdf57e 100644
--- a/src/Components/Form/Form.scss
+++ b/src/Components/Form/Form.scss
@@ -38,7 +38,7 @@
 
 .cf-form--element-error-container {
   position: relative;
-  height: 0px;
+  height: 20px;
   width: 100%;
 }
 
diff --git a/src/Components/Form/FormElementError.tsx b/src/Components/Form/FormElementError.tsx
index f8eee3aef..25af65330 100644
--- a/src/Components/Form/FormElementError.tsx
+++ b/src/Components/Form/FormElementError.tsx
@@ -33,10 +33,9 @@ export const FormElementError = forwardRef<
     })
 
     //When Helper text exists, we want error message to take up as much height as the helper text. When Helper text does not exist, we want error message to not shift spaces.
-    const withHelperStyle = withHelper ? {height: '20px'} : {}
+    //const withHelperStyle = withHelper ? {height: '20px'} : {}
 
     return (
-      <div className="cf-form--element-error-container" style={withHelperStyle}>
         <span
           id={id}
           ref={ref}
@@ -46,7 +45,6 @@ export const FormElementError = forwardRef<
         >
           {message}
         </span>
-      </div>
     )
   }
 )
diff --git a/src/Components/Form/FormValidationElement.tsx b/src/Components/Form/FormValidationElement.tsx
index aef473677..105d0c6ab 100644
--- a/src/Components/Form/FormValidationElement.tsx
+++ b/src/Components/Form/FormValidationElement.tsx
@@ -86,6 +86,7 @@ export const FormValidationElement = forwardRef<
       [`${className}`]: className,
     })
 
+
     return (
       <label
         id={id}
@@ -101,10 +102,12 @@ export const FormValidationElement = forwardRef<
           </FormLabel>
         )}
         {children(status)}
+        <div className="cf-form--element-error-container" >
         {!!errorMessage && (
           <FormElementError message={errorMessage} withHelper={withHelper} />
         )}
         {!!helpText && !errorMessage && <FormHelpText text={helpText} />}
+        </div>
       </label>
     )
   }

From b760def25864105126be167a31cc4c203c4b0d78 Mon Sep 17 00:00:00 2001
From: Dong Kyun David Kim <dkim@influxdata.com>
Date: Tue, 18 May 2021 20:16:49 -0700
Subject: [PATCH 3/5] lint and prettier

---
 src/Components/Form/Form.scss                 |  2 +-
 src/Components/Form/FormElement.tsx           |  2 ++
 src/Components/Form/FormElementError.tsx      | 19 +++++++++----------
 src/Components/Form/FormValidationElement.tsx | 11 +++++------
 4 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/Components/Form/Form.scss b/src/Components/Form/Form.scss
index e6ecdf57e..eabbfd10e 100644
--- a/src/Components/Form/Form.scss
+++ b/src/Components/Form/Form.scss
@@ -18,7 +18,7 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  margin-bottom: $cf-marg-b;
+  margin-bottom: $cf-marg-a;
 }
 
 /*
diff --git a/src/Components/Form/FormElement.tsx b/src/Components/Form/FormElement.tsx
index 87a02a866..3fb59a00d 100644
--- a/src/Components/Form/FormElement.tsx
+++ b/src/Components/Form/FormElement.tsx
@@ -80,6 +80,7 @@ export const FormElement = forwardRef<FormElementRef, FormElementProps>(
           className={formElementClass}
         >
           {formElementElements}
+          <div className="cf-form--element-error-container" />
         </label>
       )
     }
@@ -93,6 +94,7 @@ export const FormElement = forwardRef<FormElementRef, FormElementProps>(
         className={formElementClass}
       >
         {formElementElements}
+        <div className="cf-form--element-error-container" />
       </div>
     )
   }
diff --git a/src/Components/Form/FormElementError.tsx b/src/Components/Form/FormElementError.tsx
index 25af65330..c1796ab1f 100644
--- a/src/Components/Form/FormElementError.tsx
+++ b/src/Components/Form/FormElementError.tsx
@@ -24,7 +24,6 @@ export const FormElementError = forwardRef<
       className,
       message = '\u00a0\u00a0',
       testID = 'form--element-error',
-      withHelper = false,
     },
     ref
   ) => {
@@ -36,15 +35,15 @@ export const FormElementError = forwardRef<
     //const withHelperStyle = withHelper ? {height: '20px'} : {}
 
     return (
-        <span
-          id={id}
-          ref={ref}
-          style={style}
-          data-testid={testID}
-          className={formElementErrorClass}
-        >
-          {message}
-        </span>
+      <span
+        id={id}
+        ref={ref}
+        style={style}
+        data-testid={testID}
+        className={formElementErrorClass}
+      >
+        {message}
+      </span>
     )
   }
 )
diff --git a/src/Components/Form/FormValidationElement.tsx b/src/Components/Form/FormValidationElement.tsx
index 105d0c6ab..ccc2e0cde 100644
--- a/src/Components/Form/FormValidationElement.tsx
+++ b/src/Components/Form/FormValidationElement.tsx
@@ -86,7 +86,6 @@ export const FormValidationElement = forwardRef<
       [`${className}`]: className,
     })
 
-
     return (
       <label
         id={id}
@@ -102,11 +101,11 @@ export const FormValidationElement = forwardRef<
           </FormLabel>
         )}
         {children(status)}
-        <div className="cf-form--element-error-container" >
-        {!!errorMessage && (
-          <FormElementError message={errorMessage} withHelper={withHelper} />
-        )}
-        {!!helpText && !errorMessage && <FormHelpText text={helpText} />}
+        <div className="cf-form--element-error-container">
+          {!!errorMessage && (
+            <FormElementError message={errorMessage} withHelper={withHelper} />
+          )}
+          {!!helpText && !errorMessage && <FormHelpText text={helpText} />}
         </div>
       </label>
     )

From e4216f4c079931bde29c219fb5e6198c9e8b0108 Mon Sep 17 00:00:00 2001
From: Dong Kyun David Kim <dkim@influxdata.com>
Date: Wed, 19 May 2021 16:42:47 -0700
Subject: [PATCH 4/5] making spacing work for form elements with just error
 message

---
 .../Form/Documentation/Form.stories.tsx        |  1 -
 src/Components/Form/FormElement.tsx            | 18 +++++++++---------
 src/Components/Form/FormElementError.tsx       |  4 ----
 src/Components/Form/FormValidationElement.tsx  |  6 +-----
 4 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/src/Components/Form/Documentation/Form.stories.tsx b/src/Components/Form/Documentation/Form.stories.tsx
index c76adb344..f0a80372d 100644
--- a/src/Components/Form/Documentation/Form.stories.tsx
+++ b/src/Components/Form/Documentation/Form.stories.tsx
@@ -234,7 +234,6 @@ formStories.add(
         <Form.ElementError
           ref={formElementErrorRef}
           message={text('errorMessage', 'Error Message')}
-          withHelper={boolean('withHelper', false)}
         />
         <div className="story--test-buttons">
           <button onClick={logRef}>Log Ref</button>
diff --git a/src/Components/Form/FormElement.tsx b/src/Components/Form/FormElement.tsx
index 3fb59a00d..b92250029 100644
--- a/src/Components/Form/FormElement.tsx
+++ b/src/Components/Form/FormElement.tsx
@@ -59,13 +59,15 @@ export const FormElement = forwardRef<FormElementRef, FormElementProps>(
           </FormLabel>
         )}
         {children}
-        {!!errorMessage && (
-          <FormElementError
-            testID={errorMessageTestId}
-            message={errorMessage}
-          />
-        )}
-        {!!helpText && <FormHelpText text={helpText} />}
+        <div className="cf-form--element-error-container">
+          {!!errorMessage && (
+            <FormElementError
+              testID={errorMessageTestId}
+              message={errorMessage}
+            />
+          )}
+          {!!helpText && <FormHelpText text={helpText} />}
+        </div>
       </>
     )
 
@@ -80,7 +82,6 @@ export const FormElement = forwardRef<FormElementRef, FormElementProps>(
           className={formElementClass}
         >
           {formElementElements}
-          <div className="cf-form--element-error-container" />
         </label>
       )
     }
@@ -94,7 +95,6 @@ export const FormElement = forwardRef<FormElementRef, FormElementProps>(
         className={formElementClass}
       >
         {formElementElements}
-        <div className="cf-form--element-error-container" />
       </div>
     )
   }
diff --git a/src/Components/Form/FormElementError.tsx b/src/Components/Form/FormElementError.tsx
index c1796ab1f..193097286 100644
--- a/src/Components/Form/FormElementError.tsx
+++ b/src/Components/Form/FormElementError.tsx
@@ -8,7 +8,6 @@ import {StandardFunctionProps} from '../../Types'
 export interface FormElementErrorProps extends StandardFunctionProps {
   /** Text to be displayed on error */
   message?: string
-  withHelper?: boolean
 }
 
 export type FormElementErrorRef = HTMLSpanElement
@@ -31,9 +30,6 @@ export const FormElementError = forwardRef<
       [`${className}`]: className,
     })
 
-    //When Helper text exists, we want error message to take up as much height as the helper text. When Helper text does not exist, we want error message to not shift spaces.
-    //const withHelperStyle = withHelper ? {height: '20px'} : {}
-
     return (
       <span
         id={id}
diff --git a/src/Components/Form/FormValidationElement.tsx b/src/Components/Form/FormValidationElement.tsx
index ccc2e0cde..61a01485e 100644
--- a/src/Components/Form/FormValidationElement.tsx
+++ b/src/Components/Form/FormValidationElement.tsx
@@ -80,8 +80,6 @@ export const FormValidationElement = forwardRef<
       onStatusChange(status)
     }
 
-    const withHelper = helpText ? true : false
-
     const formValidationElementClass = classnames('cf-form--element', {
       [`${className}`]: className,
     })
@@ -102,9 +100,7 @@ export const FormValidationElement = forwardRef<
         )}
         {children(status)}
         <div className="cf-form--element-error-container">
-          {!!errorMessage && (
-            <FormElementError message={errorMessage} withHelper={withHelper} />
-          )}
+          {!!errorMessage && <FormElementError message={errorMessage} />}
           {!!helpText && !errorMessage && <FormHelpText text={helpText} />}
         </div>
       </label>

From 09f092096f02704420e1e0770fad1719e59eab65 Mon Sep 17 00:00:00 2001
From: Dong Kyun David Kim <dkim@influxdata.com>
Date: Wed, 19 May 2021 21:04:41 -0700
Subject: [PATCH 5/5] cleaning up unused styles

---
 src/Components/Form/FormElement.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/Form/FormElement.tsx b/src/Components/Form/FormElement.tsx
index b92250029..b23b44611 100644
--- a/src/Components/Form/FormElement.tsx
+++ b/src/Components/Form/FormElement.tsx
@@ -66,7 +66,7 @@ export const FormElement = forwardRef<FormElementRef, FormElementProps>(
               message={errorMessage}
             />
           )}
-          {!!helpText && <FormHelpText text={helpText} />}
+          {!!helpText && !errorMessage && <FormHelpText text={helpText} />}
         </div>
       </>
     )