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 f0a80372..c76adb34 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 658b6cd0..c1cedf64 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 19309728..f8eee3ae 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 b30cad25..aef47367 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 c1cedf64..e6ecdf57 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 f8eee3ae..25af6533 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 aef47367..105d0c6a 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 e6ecdf57..eabbfd10 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 87a02a86..3fb59a00 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 25af6533..c1796ab1 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 105d0c6a..ccc2e0cd 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 c76adb34..f0a80372 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 3fb59a00..b9225002 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 c1796ab1..19309728 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 ccc2e0cd..61a01485 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 b9225002..b23b4461 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>
       </>
     )