From 05bc19d96ce83c3192aa999394c3ca36bcdb5bc3 Mon Sep 17 00:00:00 2001
From: josefaidt <josef.aidt@gmail.com>
Date: Thu, 17 Sep 2020 14:54:56 -0500
Subject: [PATCH 1/8] chore(combobox): move helper text below input

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

diff --git a/src/ComboBox/ComboBox.stories.js b/src/ComboBox/ComboBox.stories.js
index f16ef26b..ec2ae05c 100644
--- a/src/ComboBox/ComboBox.stories.js
+++ b/src/ComboBox/ComboBox.stories.js
@@ -15,6 +15,7 @@ export const Default = () => ({
     size: select("Field size (size)", sizes, ""),
     placeholder: text("Placeholder text (placeholder)", "Filter..."),
     titleText: text("Title (titleText)", "Combobox title"),
+    helperText: text("Helper text (helperText)", "Optional helper text here"),
     light: boolean("Light (light)", false),
     disabled: boolean("Disabled (disabled)", false),
     invalid: boolean("Invalid (invalid)", false),
diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte
index e131a601..326bbf54 100644
--- a/src/ComboBox/ComboBox.svelte
+++ b/src/ComboBox/ComboBox.svelte
@@ -187,13 +187,6 @@
       {titleText}
     </label>
   {/if}
-  {#if helperText}
-    <div
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}">
-      {helperText}
-    </div>
-  {/if}
   <ListBox
     class="bx--combo-box"
     id="{comboId}"
@@ -304,4 +297,11 @@
       </ListBoxMenu>
     {/if}
   </ListBox>
+  {#if !invalid && helperText}
+    <div
+      class:bx--form__helper-text="{true}"
+      class:bx--form__helper-text--disabled="{disabled}">
+      {helperText}
+    </div>
+  {/if}
 </div>

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 2/8] 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>

From c21608c4aaf6d3b6b10543c7d6618e63a0bdac08 Mon Sep 17 00:00:00 2001
From: josefaidt <josef.aidt@gmail.com>
Date: Thu, 17 Sep 2020 14:58:21 -0500
Subject: [PATCH 3/8] chore(multiselect): move helper text below input

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

diff --git a/src/MultiSelect/MultiSelect.stories.js b/src/MultiSelect/MultiSelect.stories.js
index d0d99cd0..7fe179be 100644
--- a/src/MultiSelect/MultiSelect.stories.js
+++ b/src/MultiSelect/MultiSelect.stories.js
@@ -20,6 +20,7 @@ export const Default = () => ({
     id: text("MultiSelect id", "multi-select-id"),
     name: text("MultiSelect name", "multi-select-name"),
     titleText: text("Title (titleText)", "Multiselect Title"),
+    helperText: text("Helper text (helperText)", "Optional helper text here"),
     filterable: boolean("Filterable (filterable)", false),
     selectionFeedback: select(
       "Selection feedback (selectionFeedback)",
diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
index bcb96a35..a22f7e7e 100644
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@@ -268,13 +268,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
     aria-label="{ariaLabel}"
     id="{id}"
@@ -447,4 +440,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>

From b61be53f092af5ac2f0124703b8f0b808ff3cedb Mon Sep 17 00:00:00 2001
From: josefaidt <josef.aidt@gmail.com>
Date: Thu, 17 Sep 2020 14:59:24 -0500
Subject: [PATCH 4/8] chore(textarea): move helper text below input

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

diff --git a/src/TextArea/TextArea.stories.js b/src/TextArea/TextArea.stories.js
index d353bac5..fb1c186b 100644
--- a/src/TextArea/TextArea.stories.js
+++ b/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"
diff --git a/src/TextArea/TextArea.svelte b/src/TextArea/TextArea.svelte
index 75043a3e..f14ab7d6 100644
--- a/src/TextArea/TextArea.svelte
+++ b/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}

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 5/8] 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}

From 8ec9a7137f5caee22b9647f615daa9639f60181a Mon Sep 17 00:00:00 2001
From: josefaidt <josef.aidt@gmail.com>
Date: Thu, 17 Sep 2020 15:05:19 -0500
Subject: [PATCH 6/8] chore(select): move helper text below input

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

diff --git a/src/Select/Select.stories.js b/src/Select/Select.stories.js
index 1a81fecc..1ee174ee 100644
--- a/src/Select/Select.stories.js
+++ b/src/Select/Select.stories.js
@@ -27,6 +27,7 @@ export const Default = () => ({
         "A valid value is required"
       ),
       labelText: text("Label text (helperText)", "Select"),
+      helperText: text("Helper text (helperText)", "Optional helper text here"),
       id: text("Select id", "select-id"),
       name: text("Select name", "select-name"),
     },
diff --git a/src/Select/Select.svelte b/src/Select/Select.svelte
index d560684b..26c3d404 100644
--- a/src/Select/Select.svelte
+++ b/src/Select/Select.svelte
@@ -118,13 +118,6 @@
         {labelText}
       </label>
     {/if}
-    {#if !inline && helperText}
-      <div
-        class:bx--form__helper-text="{true}"
-        class:bx--form__helper-text--disabled="{disabled}">
-        {helperText}
-      </div>
-    {/if}
     {#if inline}
       <div class:bx--select-input--inline__wrapper="{true}">
         <div
@@ -188,6 +181,13 @@
           <WarningFilled16 class="bx--select__invalid-icon" />
         {/if}
       </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}

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 7/8] 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}

From 506cf24b5ca4b80552f1c74a843eaa61c9a9fe1a Mon Sep 17 00:00:00 2001
From: josefaidt <josef.aidt@gmail.com>
Date: Thu, 17 Sep 2020 15:20:03 -0500
Subject: [PATCH 8/8] chore(textinput): add helper text to default, password
 stories

---
 src/TextInput/TextInput.stories.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/TextInput/TextInput.stories.js b/src/TextInput/TextInput.stories.js
index b7c4fdab..c57e47a3 100644
--- a/src/TextInput/TextInput.stories.js
+++ b/src/TextInput/TextInput.stories.js
@@ -17,6 +17,7 @@ export const Default = () => ({
     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)",
@@ -76,6 +77,7 @@ export const ControlledTogglePasswordVisibility = () => ({
     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)",