Merge pull request #256 from josefaidt/master

feat(helper-text): move helper text below form inputs

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

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>

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

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>

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

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>

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

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}

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

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}

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}

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

@@ -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)",
@@ -37,6 +38,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)",
@@ -75,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)",

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}