diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 9e45c596..14f61622 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -916,6 +916,8 @@ None. | hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | | invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | | invalidText | let | No | string | "" | Specify the invalid state text | +| warn | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | let | No | string | "" | Specify the warning state text | | name | let | No | string | -- | Set a name for the input element | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index c3bb4f16..e0671ea1 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -3636,6 +3636,26 @@ "constant": false, "reactive": false }, + { + "name": "warn", + "kind": "let", + "description": "Set to `true` to indicate an warning state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "warnText", + "kind": "let", + "description": "Specify the warning state text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, { "name": "name", "kind": "let", diff --git a/docs/src/pages/components/DatePicker.svx b/docs/src/pages/components/DatePicker.svx index 5971be61..3ac83e15 100644 --- a/docs/src/pages/components/DatePicker.svx +++ b/docs/src/pages/components/DatePicker.svx @@ -43,6 +43,12 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"] +### Warning state + + + + + ### Disabled state diff --git a/src/DatePicker/DatePickerInput.svelte b/src/DatePicker/DatePickerInput.svelte index 44108e34..b71e2d86 100644 --- a/src/DatePicker/DatePickerInput.svelte +++ b/src/DatePicker/DatePickerInput.svelte @@ -35,6 +35,12 @@ /** Specify the invalid state text */ export let invalidText = ""; + /** Set to `true` to indicate an warning state */ + export let warn = false; + + /** Specify the warning state text */ + export let warnText = ""; + /** * Set a name for the input element * @type {string} @@ -45,7 +51,9 @@ export let ref = null; import { getContext, onMount } from "svelte"; - import Calendar16 from "carbon-icons-svelte/lib/Calendar16"; + 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"; const { range, @@ -81,7 +89,11 @@ {labelText} {/if} -
+
+ {#if !$hasCalendar} + {#if invalid} + + {/if} + {#if !invalid && warn} + + {/if} + {/if} {#if $hasCalendar} {invalidText}
{/if} + {#if !invalid && warn} +
{warnText}
+ {/if}
diff --git a/types/DatePicker/DatePickerInput.d.ts b/types/DatePicker/DatePickerInput.d.ts index 312cfbf1..56b85a04 100644 --- a/types/DatePicker/DatePickerInput.d.ts +++ b/types/DatePicker/DatePickerInput.d.ts @@ -66,6 +66,18 @@ export interface DatePickerInputProps extends svelte.JSX.HTMLAttributes