diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index dd6e8c40..07454755 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -2289,6 +2289,8 @@ export type NumberInputTranslationId = "increment" | "decrement"; | iconDescription | let | No | string | "" | Specify the ARIA label for the increment icons | | 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 | | helperText | let | No | string | "" | Specify the helper text | | label | let | No | string | "" | Specify the label text | | hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index bcf98cdd..000cd060 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -6105,6 +6105,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": "helperText", "kind": "let", diff --git a/docs/src/pages/components/NumberInput.svx b/docs/src/pages/components/NumberInput.svx index c2ceff28..54ffc7c0 100644 --- a/docs/src/pages/components/NumberInput.svx +++ b/docs/src/pages/components/NumberInput.svx @@ -41,7 +41,11 @@ components: ["NumberInput", "NumberInputSkeleton"] ### Invalid state - + + +### Warning state + + ### Disabled state diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte index f8f33592..26068901 100644 --- a/src/NumberInput/NumberInput.svelte +++ b/src/NumberInput/NumberInput.svelte @@ -55,6 +55,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 = ""; + /** Specify the helper text */ export let helperText = ""; @@ -95,6 +101,7 @@ import CaretDownGlyph from "carbon-icons-svelte/lib/CaretDownGlyph/CaretDownGlyph.svelte"; import CaretUpGlyph from "carbon-icons-svelte/lib/CaretUpGlyph/CaretUpGlyph.svelte"; import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte"; + import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte"; const defaultTranslations = { [translationIds.increment]: "Increment number", @@ -161,7 +168,10 @@ {label} {/if} -
+
{/if} - {#if !error && helperText} + {#if !error && !warn && helperText}
{/if} + {#if !error && warn} +
{warnText}
+ {/if}
diff --git a/types/NumberInput/NumberInput.d.ts b/types/NumberInput/NumberInput.d.ts index 715560b9..fa040b1c 100644 --- a/types/NumberInput/NumberInput.d.ts +++ b/types/NumberInput/NumberInput.d.ts @@ -78,6 +78,18 @@ export interface NumberInputProps extends svelte.JSX.HTMLAttributes