Make the 'helper text' feature more generic

carbon-design-system · Oct 4, 2023 · 4b805ba · 4b805ba
1 parent 06d81dd
commit 4b805ba
Show file tree

Hide file tree

Showing 19 changed files with 181 additions and 76 deletions.
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
@@ -1,6 +1,6 @@
 # Component Index
 
-> 165 components exported from carbon-components-svelte@0.80.0.
+> 166 components exported from carbon-components-svelte@0.80.0.
 
 ## Components
 
@@ -63,6 +63,7 @@
 - [`HeaderPanelLinks`](#headerpanellinks)
 - [`HeaderSearch`](#headersearch)
 - [`HeaderUtilities`](#headerutilities)
+- [`HelperText`](#helpertext)
 - [`ImageLoader`](#imageloader)
 - [`InlineLoading`](#inlineloading)
 - [`InlineNotification`](#inlinenotification)
@@ -1580,7 +1581,7 @@ None.
 | expandedByDefault       | No       | <code>let</code> | No       | <code>boolean</code>                                      | <code>true</code>      | Set to `false` to hide the side nav by default                                                                                                                                                                                                                              |
 | uiShellAriaLabel        | No       | <code>let</code> | No       | <code>string</code>                                       | <code>undefined</code> | Specify the ARIA label for the header                                                                                                                                                                                                                                       |
 | href                    | No       | <code>let</code> | No       | <code>string</code>                                       | <code>undefined</code> | Specify the `href` attribute                                                                                                                                                                                                                                                |
-| company                 | No       | <code>let</code> | No       | <code>string</code>                                       | <code>undefined</code> | Specify the company name.<br /><br />Alternatively, use the named slot "company" (e.g., `&lt;span slot="company"&gt;...&lt;/span&gt;`)                                                                                                                                      |
+| company                 | No       | <code>let</code> | No       | <code>string</code>                                       | <code>undefined</code> | Specify the company name.<br />Alternatively, use the named slot "company" (e.g., `&lt;span slot="company"&gt;...&lt;/span&gt;`)                                                                                                                                            |
 | platformName            | No       | <code>let</code> | No       | <code>string</code>                                       | <code>""</code>        | Specify the platform name.<br />Alternatively, use the named slot "platform" (e.g., `&lt;span slot="platform"&gt;...&lt;/span&gt;`)                                                                                                                                         |
 | persistentHamburgerMenu | No       | <code>let</code> | No       | <code>boolean</code>                                      | <code>false</code>     | Set to `true` to persist the hamburger menu                                                                                                                                                                                                                                 |
 | expansionBreakpoint     | No       | <code>let</code> | No       | <code>number</code>                                       | <code>1056</code>      | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />- small: 320<br />- medium: 672<br />- large: 1056<br />- x-large: 1312<br />- max: 1584 |
@@ -1866,6 +1867,26 @@ None.
 
 None.
 
+## `HelperText`
+
+### Props
+
+| Prop name  | Required | Kind             | Reactive | Type                 | Default value      | Description                            |
+| :--------- | :------- | :--------------- | :------- | -------------------- | ------------------ | -------------------------------------- |
+| helperText | No       | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify the helper text as parameter   |
+| disabled   | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` for the disabled variant |
+| inline     | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use inline variant    |
+
+### Slots
+
+| Slot name | Default | Props | Fallback                  |
+| :-------- | :------ | :---- | :------------------------ |
+| --        | Yes     | --    | <code>{helperText}</code> |
+
+### Events
+
+None.
+
 ## `ImageLoader`
 
 ### Props

diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
@@ -1,5 +1,5 @@
 {
-  "total": 165,
+  "total": 166,
   "components": [
     {
       "moduleName": "Accordion",
@@ -4788,7 +4788,7 @@
         {
           "name": "company",
           "kind": "let",
-          "description": "Specify the company name.\n\nAlternatively, use the named slot \"company\" (e.g., `<span slot=\"company\">...</span>`)",
+          "description": "Specify the company name.\nAlternatively, use the named slot \"company\" (e.g., `<span slot=\"company\">...</span>`)",
           "type": "string",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -5431,6 +5431,60 @@
       "events": [],
       "typedefs": []
     },
+    {
+      "moduleName": "HelperText",
+      "filePath": "src/HelperText/HelperText.svelte",
+      "props": [
+        {
+          "name": "helperText",
+          "kind": "let",
+          "description": "Specify the helper text as parameter",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "disabled",
+          "kind": "let",
+          "description": "Set to `true` for the disabled variant",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "inline",
+          "kind": "let",
+          "description": "Set to `true` to use inline variant",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "moduleExports": [],
+      "slots": [
+        {
+          "name": "__default__",
+          "default": true,
+          "fallback": "{helperText}",
+          "slot_props": "{}"
+        }
+      ],
+      "events": [],
+      "typedefs": [],
+      "rest_props": { "type": "Element", "name": "div" }
+    },
     {
       "moduleName": "ImageLoader",
       "filePath": "src/ImageLoader/ImageLoader.svelte",

diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte
@@ -117,6 +117,7 @@
   import ListBoxMenuIcon from "../ListBox/ListBoxMenuIcon.svelte";
   import ListBoxMenuItem from "../ListBox/ListBoxMenuItem.svelte";
   import ListBoxSelection from "../ListBox/ListBoxSelection.svelte";
+  import HelperText from "../HelperText/HelperText.svelte";
 
   const dispatch = createEventDispatcher();
 
@@ -415,11 +416,8 @@
     {/if}
   </ListBox>
   {#if !invalid && helperText && !warn}
-    <div
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}"
-    >
+    <HelperText disabled="{disabled}">
       {helperText}
-    </div>
+    </HelperText>
   {/if}
 </div>
diff --git a/src/DatePicker/DatePickerInput.svelte b/src/DatePicker/DatePickerInput.svelte
@@ -57,6 +57,7 @@
   import Calendar from "../icons/Calendar.svelte";
   import WarningFilled from "../icons/WarningFilled.svelte";
   import WarningAltFilled from "../icons/WarningAltFilled.svelte";
+  import HelperText from "../HelperText/HelperText.svelte";
 
   const {
     range,
@@ -163,11 +164,8 @@
     <div class:bx--form-requirement="{true}">{warnText}</div>
   {/if}
   {#if !invalid && !warn && helperText}
-    <div
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}"
-    >
+    <HelperText disabled="{disabled}">
       {helperText}
-    </div>
+    </HelperText>
   {/if}
 </div>
diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte
@@ -107,6 +107,7 @@
     ListBoxMenuIcon,
     ListBoxMenuItem,
   } from "../ListBox";
+  import HelperText from "../HelperText/HelperText.svelte";
 
   const dispatch = createEventDispatcher();
 
@@ -197,10 +198,10 @@
     size="{size}"
     name="{name}"
     aria-label="{$$props['aria-label']}"
-    class="bx--dropdown 
-      {direction === 'top' && 'bx--list-box--up'} 
-      {invalid && 'bx--dropdown--invalid'} 
-      {!invalid && warn && 'bx--dropdown--warning'} 
+    class="bx--dropdown
+      {direction === 'top' && 'bx--list-box--up'}
+      {invalid && 'bx--dropdown--invalid'}
+      {!invalid && warn && 'bx--dropdown--warning'}
       {open && 'bx--dropdown--open'}
       {size === 'sm' && 'bx--dropdown--sm'}
       {size === 'xl' && 'bx--dropdown--xl'}
@@ -327,11 +328,8 @@
     {/if}
   </ListBox>
   {#if !inline && !invalid && !warn && helperText}
-    <div
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}"
-    >
+    <HelperText disabled="{disabled}">
       {helperText}
-    </div>
+    </HelperText>
   {/if}
 </div>
diff --git a/src/HelperText/HelperText.svelte b/src/HelperText/HelperText.svelte
@@ -0,0 +1,19 @@
+<script>
+  /** Specify the helper text as parameter */
+  export let helperText = "";
+
+  /** Set to `true` for the disabled variant */
+  export let disabled = false;
+
+  /** Set to `true` to use inline variant */
+  export let inline = false;
+</script>
+
+<div
+  class:bx--form__helper-text="{true}"
+  class:bx--form__helper-text--disabled="{disabled}"
+  class:bx--form__helper-text--inline="{inline}"
+  {...$$restProps}
+>
+  <slot>{helperText}</slot>
+</div>
diff --git a/src/HelperText/index.js b/src/HelperText/index.js
@@ -0,0 +1 @@
+export { default as HelperText } from "./HelperText.svelte";
diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
@@ -180,6 +180,7 @@
     ListBoxMenuItem,
     ListBoxSelection,
   } from "../ListBox";
+  import HelperText from "../HelperText/HelperText.svelte";
 
   const dispatch = createEventDispatcher();
 
@@ -535,11 +536,8 @@
     {/if}
   </ListBox>
   {#if !inline && !invalid && !warn && helperText}
-    <div
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}"
-    >
+    <HelperText disabled="{disabled}">
       {helperText}
-    </div>
+    </HelperText>
   {/if}
 </div>
diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
@@ -105,6 +105,7 @@
   import WarningFilled from "../icons/WarningFilled.svelte";
   import WarningAltFilled from "../icons/WarningAltFilled.svelte";
   import EditOff from "../icons/EditOff.svelte";
+  import HelperText from "../HelperText/HelperText.svelte";
 
   const defaultTranslations = {
     [translationIds.increment]: "Increment number",
@@ -260,12 +261,9 @@
       {/if}
     </div>
     {#if !error && !warn && helperText}
-      <div
-        class:bx--form__helper-text="{true}"
-        class:bx--form__helper-text--disabled="{disabled}"
-      >
+      <HelperText disabled="{disabled}">
         {helperText}
-      </div>
+      </HelperText>
     {/if}
     {#if error}
       <div id="{errorId}" class:bx--form-requirement="{true}">

diff --git a/src/Select/Select.svelte b/src/Select/Select.svelte
@@ -68,6 +68,7 @@
   import ChevronDown from "../icons/ChevronDown.svelte";
   import WarningFilled from "../icons/WarningFilled.svelte";
   import WarningAltFilled from "../icons/WarningAltFilled.svelte";
+  import HelperText from "../HelperText/HelperText.svelte";
 
   const dispatch = createEventDispatcher();
   const selectedValue = writable(selected);
@@ -182,12 +183,9 @@
         {/if}
       </div>
       {#if !invalid && !warn && helperText}
-        <div
-          class:bx--form__helper-text="{true}"
-          class:bx--form__helper-text--disabled="{disabled}"
-        >
+        <HelperText disabled="{disabled}">
           {helperText}
-        </div>
+        </HelperText>
       {/if}
     {/if}
     {#if !inline}
@@ -225,12 +223,9 @@
         {/if}
       </div>
       {#if !invalid && helperText}
-        <div
-          class:bx--form__helper-text="{true}"
-          class:bx--form__helper-text--disabled="{disabled}"
-        >
+        <HelperText disabled="{disabled}">
           {helperText}
-        </div>
+        </HelperText>
       {/if}
       {#if invalid}
         <div id="{errorId}" class:bx--form-requirement="{true}">

diff --git a/src/TextArea/TextArea.svelte b/src/TextArea/TextArea.svelte
@@ -54,6 +54,7 @@
   export let ref = null;
 
   import WarningFilled from "../icons/WarningFilled.svelte";
+  import HelperText from "../HelperText/HelperText.svelte";
 
   $: errorId = `error-${id}`;
 </script>
@@ -120,12 +121,9 @@
       on:paste></textarea>
   </div>
   {#if !invalid && helperText}
-    <div
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}"
-    >
+    <HelperText disabled="{disabled}">
       {helperText}
-    </div>
+    </HelperText>
   {/if}
   {#if invalid}
     <div id="{errorId}" class:bx--form-requirement="{true}">{invalidText}</div>

diff --git a/src/TextInput/PasswordInput.svelte b/src/TextInput/PasswordInput.svelte
@@ -85,6 +85,7 @@
   import WarningAltFilled from "../icons/WarningAltFilled.svelte";
   import View from "../icons/View.svelte";
   import ViewOff from "../icons/ViewOff.svelte";
+  import HelperText from "../HelperText/HelperText.svelte";
 
   const ctx = getContext("Form");
 
@@ -123,14 +124,9 @@
       </slot>
     </label>
     {#if !isFluid && helperText}
-      <div
-        id="{helperId}"
-        class:bx--form__helper-text="{true}"
-        class:bx--form__helper-text--disabled="{disabled}"
-        class:bx--form__helper-text--inline="{inline}"
+      <HelperText id="{helperId}" disabled="{disabled}" inline="{inline}"
+        >{helperText}</HelperText
       >
-        {helperText}
-      </div>
     {/if}
   {/if}
   {#if !inline && (labelText || $$slots.labelText)}
@@ -250,13 +246,9 @@
       </div>
     {/if}
     {#if !invalid && !warn && !isFluid && !inline && helperText}
-      <div
-        class:bx--form__helper-text="{true}"
-        class:bx--form__helper-text--disabled="{disabled}"
-        class:bx--form__helper-text--inline="{inline}"
-      >
+      <HelperText disabled="{disabled}" inline="{inline}">
         {helperText}
-      </div>
+      </HelperText>
     {/if}
     {#if !isFluid && !invalid && warn}
       <div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div>