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

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

diff --git a/src/NumberInput/NumberInput.stories.js b/src/NumberInput/NumberInput.stories.js
index 5af385ff..212384c9 100644
--- a/src/NumberInput/NumberInput.stories.js
+++ b/src/NumberInput/NumberInput.stories.js
@@ -30,6 +30,7 @@ export const Default = () => ({
     disabled: boolean("Disabled (disabled)", false),
     readonly: boolean("Read only (readonly)", false),
     invalid: boolean("Show form validation UI (invalid)", false),
+    helperText: text("Helper text (helperText)", "Optional helper text here"),
     mobile: boolean("Mobile variant (mobile)", false),
     invalidText: text(
       "Form validation UI content (invalidText)",
diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
index 351f07c7..6454d438 100644
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@@ -198,13 +198,6 @@
           <slot name="label">{label}</slot>
         </label>
       {/if}
-      {#if helperText}
-        <div
-          class:bx--form__helper-text="{true}"
-          class:bx--form__helper-text--disabled="{disabled}">
-          {helperText}
-        </div>
-      {/if}
       <div class:bx--number__input-wrapper="{true}">
         <button
           type="button"
@@ -262,13 +255,6 @@
           <slot name="label">{label}</slot>
         </label>
       {/if}
-      {#if helperText}
-        <div
-          class:bx--form__helper-text="{true}"
-          class:bx--form__helper-text--disabled="{disabled}">
-          {helperText}
-        </div>
-      {/if}
       <div class:bx--number__input-wrapper="{true}">
         <input
           bind:this="{ref}"
@@ -324,6 +310,13 @@
         </div>
       </div>
     {/if}
+    {#if !error && helperText}
+      <div
+        class:bx--form__helper-text="{true}"
+        class:bx--form__helper-text--disabled="{disabled}">
+        {helperText}
+      </div>
+    {/if}
     {#if error}
       <div id="{errorId}" class:bx--form-requirement="{true}">
         {invalidText}