diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 3f939bca..c06be76c 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1090,6 +1090,7 @@ None. | placeholder | let | No | string | "" | Specify the input placeholder text | | pattern | let | No | string | "\\d{1,2}\\/\\d{1,2}\\/\\d{4}" | Specify the Regular Expression for the input value | | disabled | let | No | boolean | false | Set to `true` to disable the input | +| helperText | let | No | string | "" | Specify the helper text | | iconDescription | let | No | string | "" | Specify the ARIA label for the calendar icon | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | | labelText | let | No | string | "" | Specify the label text | diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 2d4834cb..e2bd1683 100644 --- a/docs/src/COMPONENT_API.json +++ b/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", diff --git a/docs/src/pages/components/DatePicker.svx b/docs/src/pages/components/DatePicker.svx index 6ea1ea8c..a6cae4af 100644 --- a/docs/src/pages/components/DatePicker.svx +++ b/docs/src/pages/components/DatePicker.svx @@ -13,6 +13,12 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"] +### With helper text + + + + + ### Hidden label diff --git a/src/DatePicker/DatePickerInput.svelte b/src/DatePicker/DatePickerInput.svelte index 92668423..71beefad 100644 --- a/src/DatePicker/DatePickerInput.svelte +++ b/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}
{warnText}
{/if} + {#if helperText} +
+ {helperText} +
+ {/if} diff --git a/tests/DatePicker.test.svelte b/tests/DatePicker.test.svelte index 79a7cb24..ec0d4473 100644 --- a/tests/DatePicker.test.svelte +++ b/tests/DatePicker.test.svelte @@ -7,7 +7,11 @@ console.log(e.detail); }}" > - +
diff --git a/types/DatePicker/DatePickerInput.d.ts b/types/DatePicker/DatePickerInput.d.ts index 6f085a3a..0e9c4a48 100644 --- a/types/DatePicker/DatePickerInput.d.ts +++ b/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 ""