From 020a91882fa98a8a72e7ef792a595affa264e223 Mon Sep 17 00:00:00 2001
From: josefaidt <josef.aidt@gmail.com>
Date: Thu, 17 Sep 2020 15:07:02 -0500
Subject: [PATCH] chore(textinput): move helper text below input

---
 src/TextInput/PasswordInput.svelte | 14 +++++++-------
 src/TextInput/TextInput.stories.js |  1 +
 src/TextInput/TextInput.svelte     | 14 +++++++-------
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/TextInput/PasswordInput.svelte b/src/TextInput/PasswordInput.svelte
index bd595ed6..af2ef136 100644
--- a/src/TextInput/PasswordInput.svelte
+++ b/src/TextInput/PasswordInput.svelte
@@ -132,13 +132,6 @@
       {labelText}
     </label>
   {/if}
-  {#if helperText}
-    <div
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}">
-      {helperText}
-    </div>
-  {/if}
   <div
     class:bx--text-input__field-wrapper="{true}"
     data-invalid="{invalid || undefined}">
@@ -190,6 +183,13 @@
       {/if}
     </button>
   </div>
+  {#if !invalid && helperText}
+    <div
+      class:bx--form__helper-text="{true}"
+      class:bx--form__helper-text--disabled="{disabled}">
+      {helperText}
+    </div>
+  {/if}
   {#if invalid}
     <div class:bx--form-requirement="{true}" id="{errorId}">{invalidText}</div>
   {/if}
diff --git a/src/TextInput/TextInput.stories.js b/src/TextInput/TextInput.stories.js
index 7089af2c..b7c4fdab 100644
--- a/src/TextInput/TextInput.stories.js
+++ b/src/TextInput/TextInput.stories.js
@@ -37,6 +37,7 @@ export const TogglePasswordVisibility = () => ({
     light: boolean("Light variant (light)", false),
     hideLabel: boolean("No label (hideLabel)", false),
     labelText: text("Label text (labelText)", "Text Input label"),
+    helperText: text("Helper text (helperText)", "Optional helper text here"),
     invalid: boolean("Show form validation UI (invalid)", false),
     invalidText: text(
       "Content of form validation UI (invalidText)",
diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte
index 3880e9f8..9fa4d76b 100644
--- a/src/TextInput/TextInput.svelte
+++ b/src/TextInput/TextInput.svelte
@@ -111,13 +111,6 @@
       {labelText}
     </label>
   {/if}
-  {#if helperText}
-    <div
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}">
-      {helperText}
-    </div>
-  {/if}
   <div
     data-invalid="{invalid || undefined}"
     class:bx--text-input__field-wrapper="{true}">
@@ -149,6 +142,13 @@
       on:focus
       on:blur />
   </div>
+  {#if !invalid && helperText}
+    <div
+      class:bx--form__helper-text="{true}"
+      class:bx--form__helper-text--disabled="{disabled}">
+      {helperText}
+    </div>
+  {/if}
   {#if invalid}
     <div class:bx--form-requirement="{true}" id="{errorId}">{invalidText}</div>
   {/if}