chore(textinput): move helper text below input

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}

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)",

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}