Make the 'helper text' feature more generic

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

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

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
+    <HelperText disabled="{disabled}">
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}"
-    >
       {helperText}
-    </div>
+    </HelperText>
   {/if}
 </div>

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
+    <HelperText disabled="{disabled}">
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}"
-    >
       {helperText}
-    </div>
+    </HelperText>
   {/if}
 </div>

src/Dropdown/Dropdown.svelte

@@ -107,6 +107,7 @@
     ListBoxMenuIcon,
     ListBoxMenuItem,
   } from "../ListBox";
+  import HelperText from "../HelperText/HelperText.svelte";
 
   const dispatch = createEventDispatcher();
 
@@ -327,11 +328,8 @@
     {/if}
   </ListBox>
   {#if !inline && !invalid && !warn && helperText}
-    <div
+    <HelperText disabled="{disabled}">
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}"
-    >
       {helperText}
-    </div>
+    </HelperText>
   {/if}
 </div>

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>

src/HelperText/index.js

@@ -0,0 +1 @@
+export { default as HelperText } from "./HelperText.svelte";

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
+    <HelperText disabled="{disabled}">
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}"
-    >
       {helperText}
-    </div>
+    </HelperText>
   {/if}
 </div>

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
+      <HelperText disabled="{disabled}">
-        class:bx--form__helper-text="{true}"
-        class:bx--form__helper-text--disabled="{disabled}"
-      >
         {helperText}
-      </div>
+      </HelperText>
     {/if}
     {#if error}
       <div id="{errorId}" class:bx--form-requirement="{true}">

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
+        <HelperText disabled="{disabled}">
-          class:bx--form__helper-text="{true}"
-          class:bx--form__helper-text--disabled="{disabled}"
-        >
           {helperText}
-        </div>
+        </HelperText>
       {/if}
     {/if}
     {#if !inline}
@@ -225,12 +223,9 @@
         {/if}
       </div>
       {#if !invalid && helperText}
-        <div
+        <HelperText disabled="{disabled}">
-          class:bx--form__helper-text="{true}"
-          class:bx--form__helper-text--disabled="{disabled}"
-        >
           {helperText}
-        </div>
+        </HelperText>
       {/if}
       {#if invalid}
         <div id="{errorId}" class:bx--form-requirement="{true}">

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
+    <HelperText disabled="{disabled}">
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}"
-    >
       {helperText}
-    </div>
+    </HelperText>
   {/if}
   {#if invalid}
     <div id="{errorId}" class:bx--form-requirement="{true}">{invalidText}</div>

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
+      <HelperText id="{helperId}" disabled="{disabled}" inline="{inline}"
-        id="{helperId}"
+        >{helperText}</HelperText
-        class:bx--form__helper-text="{true}"
-        class:bx--form__helper-text--disabled="{disabled}"
-        class:bx--form__helper-text--inline="{inline}"
       >
-        {helperText}
-      </div>
     {/if}
   {/if}
   {#if !inline && (labelText || $$slots.labelText)}
@@ -250,13 +246,9 @@
       </div>
     {/if}
     {#if !invalid && !warn && !isFluid && !inline && helperText}
-      <div
+      <HelperText disabled="{disabled}" inline="{inline}">
-        class:bx--form__helper-text="{true}"
-        class:bx--form__helper-text--disabled="{disabled}"
-        class:bx--form__helper-text--inline="{inline}"
-      >
         {helperText}
-      </div>
+      </HelperText>
     {/if}
     {#if !isFluid && !invalid && warn}
       <div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div>

src/TextInput/TextInput.svelte

@@ -74,6 +74,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 ctx = getContext("Form");
   const dispatch = createEventDispatcher();
@@ -133,13 +134,9 @@
         </label>
       {/if}
       {#if !isFluid && helperText}
-        <div
+        <HelperText disabled="{disabled}" inline="{inline}"
-          class:bx--form__helper-text="{true}"
+          >{helperText}</HelperText
-          class:bx--form__helper-text--disabled="{disabled}"
-          class:bx--form__helper-text--inline="{inline}"
         >
-          {helperText}
-        </div>
       {/if}
     </div>
   {/if}
@@ -228,14 +225,9 @@
       {/if}
     </div>
     {#if !invalid && !warn && !isFluid && !inline && helperText}
-      <div
+      <HelperText disabled="{disabled}" inline="{inline}"
-        id="{helperId}"
+        >{helperText}</HelperText
-        class:bx--form__helper-text="{true}"
-        class:bx--form__helper-text--disabled="{disabled}"
-        class:bx--form__helper-text--inline="{inline}"
       >
-        {helperText}
-      </div>
     {/if}
     {#if !isFluid && invalid}
       <div class:bx--form-requirement="{true}" id="{errorId}">

src/UIShell/Header.svelte

@@ -19,7 +19,6 @@
 
   /**
    * Specify the company name.
-   *
    * Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`)
    * @type {string}
    */

src/index.js

@@ -56,6 +56,7 @@ export { FormGroup } from "./FormGroup";
 export { FormItem } from "./FormItem";
 export { FormLabel } from "./FormLabel";
 export { Grid, Row, Column } from "./Grid";
+export { HelperText } from "./HelperText";
 export { ImageLoader } from "./ImageLoader";
 export { InlineLoading } from "./InlineLoading";
 export { Link, OutboundLink } from "./Link";

tests/HelperText.test.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { HelperText } from "../types";
+</script>
+
+<HelperText>Base helper</HelperText>
+
+<HelperText helperText="Helper text as parameter" />
+
+<HelperText disabled="{true}">Helper with disabled variant</HelperText>
+
+<HelperText inline="{true}">Helper with inline variant</HelperText>

types/HelperText/HelperText.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type RestProps = SvelteHTMLElements["div"];
+
+export interface HelperTextProps extends RestProps {
+  /**
+   * Specify the helper text as parameter
+   * @default ""
+   */
+  helperText?: string;
+
+  /**
+   * Set to `true` for the disabled variant
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set to `true` to use inline variant
+   * @default false
+   */
+  inline?: boolean;
+
+  [key: `data-${string}`]: any;
+}
+
+export default class HelperText extends SvelteComponentTyped<
+  HelperTextProps,
+  Record<string, any>,
+  { default: {} }
+> {}

types/UIShell/Header.svelte.d.ts

@@ -30,7 +30,6 @@ export interface HeaderProps extends RestProps {
 
   /**
    * Specify the company name.
-   *
    * Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`)
    * @default undefined
    */

types/index.d.ts

@@ -62,6 +62,7 @@ export { default as FormLabel } from "./FormLabel/FormLabel.svelte";
 export { default as Grid } from "./Grid/Grid.svelte";
 export { default as Row } from "./Grid/Row.svelte";
 export { default as Column } from "./Grid/Column.svelte";
+export { default as HelperText } from "./HelperText/HelperText.svelte";
 export { default as ImageLoader } from "./ImageLoader/ImageLoader.svelte";
 export { default as InlineLoading } from "./InlineLoading/InlineLoading.svelte";
 export { default as Link } from "./Link/Link.svelte";