feat(date-picker): add helperText prop

Ref: 4b5b5fdf8

COMPONENT_INDEX.md

@@ -1090,6 +1090,7 @@ None.
 | placeholder     | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the input placeholder text                 |
 | pattern         | <code>let</code> | No       | <code>string</code>                       | <code>"\\d{1,2}\\/\\d{1,2}\\/\\d{4}"</code>      | Specify the Regular Expression for the input value |
 | disabled        | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to disable the input                 |
+| helperText      | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the helper text                            |
 | iconDescription | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the ARIA label for the calendar icon       |
 | id              | <code>let</code> | No       | <code>string</code>                       | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                    |
 | labelText       | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the label text                             |

docs/src/COMPONENT_API.json

@@ -2734,6 +2734,17 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "helperText",
+          "kind": "let",
+          "description": "Specify the helper text",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "iconDescription",
           "kind": "let",

docs/src/pages/components/DatePicker.svx

@@ -13,6 +13,12 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
   <DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
 </DatePicker>
 
+### With helper text
+
+<DatePicker>
+  <DatePickerInput labelText="Date of birth" helperText="Example: 01/12/1990" placeholder="mm/dd/yyyy" />
+</DatePicker>
+
 ### Hidden label
 
 <DatePicker>

src/DatePicker/DatePickerInput.svelte

@@ -17,6 +17,9 @@
   /** Set to `true` to disable the input */
   export let disabled = false;
 
+  /** Specify the helper text */
+  export let helperText = "";
+
   /** Specify the ARIA label for the calendar icon */
   export let iconDescription = "";
 
@@ -50,7 +53,7 @@
   /** Obtain a reference to the input HTML element */
   export let ref = null;
 
-  import { getContext, onMount } from "svelte";
+  import { getContext } from "svelte";
   import Calendar16 from "carbon-icons-svelte/lib/Calendar16/Calendar16.svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
   import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
@@ -161,4 +164,12 @@
   {#if !invalid && warn}
     <div class:bx--form-requirement="{true}">{warnText}</div>
   {/if}
+  {#if helperText}
+    <div
+      class:bx--form__helper-text="{true}"
+      class:bx--form__helper-text--disabled="{disabled}"
+    >
+      {helperText}
+    </div>
+  {/if}
 </div>

tests/DatePicker.test.svelte

@@ -7,7 +7,11 @@
     console.log(e.detail);
   }}"
 >
-  <DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
+  <DatePickerInput
+    labelText="Date of birth"
+    helperText="Example: 01/12/1990"
+    placeholder="mm/dd/yyyy"
+  />
 </DatePicker>
 
 <DatePicker>

types/DatePicker/DatePickerInput.d.ts

@@ -32,6 +32,12 @@ export interface DatePickerInputProps
    */
   disabled?: boolean;
 
+  /**
+   * Specify the helper text
+   * @default ""
+   */
+  helperText?: string;
+
   /**
    * Specify the ARIA label for the calendar icon
    * @default ""