From 95e3a6eb121c9b2ffef298e6518931d8d21268b5 Mon Sep 17 00:00:00 2001
From: josefaidt <josef.aidt@gmail.com>
Date: Thu, 17 Sep 2020 14:57:03 -0500
Subject: [PATCH] chore(dropdown): move helper text below input

---
 src/Dropdown/Dropdown.stories.js |  1 +
 src/Dropdown/Dropdown.svelte     | 14 +++++++-------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/Dropdown/Dropdown.stories.js b/src/Dropdown/Dropdown.stories.js
index 29ae9b30..74467716 100644
--- a/src/Dropdown/Dropdown.stories.js
+++ b/src/Dropdown/Dropdown.stories.js
@@ -26,6 +26,7 @@ export const Default = () => ({
     disabled: boolean("Disabled (disabled)", false),
     light: boolean("Light variant (light)", false),
     titleText: text("Title (titleText)", "This is not a dropdown title."),
+    helperText: text("Helper text (helperText)", "Optional helper text here"),
     invalid: boolean("Show form validation UI (invalid)", false),
     invalidText: text(
       "Form validation UI content (invalidText)",
diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte
index 7fdb84f7..d7df5479 100644
--- a/src/Dropdown/Dropdown.svelte
+++ b/src/Dropdown/Dropdown.svelte
@@ -166,13 +166,6 @@
       {titleText}
     </label>
   {/if}
-  {#if !inline && helperText}
-    <div
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}">
-      {helperText}
-    </div>
-  {/if}
   <ListBox
     type="{type}"
     size="{size}"
@@ -250,4 +243,11 @@
       </ListBoxMenu>
     {/if}
   </ListBox>
+  {#if !inline && !invalid && helperText}
+    <div
+      class:bx--form__helper-text="{true}"
+      class:bx--form__helper-text--disabled="{disabled}">
+      {helperText}
+    </div>
+  {/if}
 </div>