chore(textarea): move helper text below input

src/TextArea/TextArea.stories.js

@@ -13,6 +13,7 @@ export const Default = () => ({
     hideLabel: boolean("No label (hideLabel)", false),
     labelText: text("Label text (labelText)", "Text Area label"),
     invalid: boolean("Show form validation UI (invalid)", false),
+    helperText: text("Helper text (helperText)", "Optional helper text here"),
     invalidText: text(
       "Content of form validation UI (invalidText)",
       "A valid value is required"

src/TextArea/TextArea.svelte

@@ -103,13 +103,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-area__wrapper="{true}"
     data-invalid="{invalid || undefined}">
@@ -139,6 +132,13 @@
       on:focus
       on:blur></textarea>
   </div>
+  {#if !invalid && helperText}
+    <div
+      class:bx--form__helper-text="{true}"
+      class:bx--form__helper-text--disabled="{disabled}">
+      {helperText}
+    </div>
+  {/if}
   {#if invalid}
     <div id="{errorId}" class:bx--form-requirement="{true}">{invalidText}</div>
   {/if}