diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index a76b2f09..dd6e8c40 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -2158,6 +2158,8 @@ export interface MultiSelectItem { | useTitleInItem | let | No | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox | | 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 list box label | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 4f6c0ff1..bcf98cdd 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -5299,6 +5299,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/MultiSelect.svx b/docs/src/pages/components/MultiSelect.svx index 47a96806..41daaa33 100644 --- a/docs/src/pages/components/MultiSelect.svx +++ b/docs/src/pages/components/MultiSelect.svx @@ -89,4 +89,28 @@ Use the `itemToString` prop to format the display of individual items. items="{[{id: "0", text: "Slack"}, {id: "1", text: "Email"}, {id: "2", text: "Fax"}]}" + /> + +### Invalid state + + + +### Warning state + + + +### Disabled state + + \ No newline at end of file diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte index 0a51cdbf..8ac9cd93 100644 --- a/src/MultiSelect/MultiSelect.svelte +++ b/src/MultiSelect/MultiSelect.svelte @@ -90,6 +90,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 = ""; @@ -112,8 +118,9 @@ */ import { afterUpdate, createEventDispatcher, setContext } from "svelte"; - import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16"; - import { Checkbox } from "../Checkbox"; + import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte"; + import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte"; + import Checkbox from "../Checkbox/Checkbox.svelte"; import { ListBox, ListBoxField, @@ -243,6 +250,8 @@ open="{open}" light="{light}" size="{size}" + warn="{warn}" + warnText="{warnText}" class="bx--multi-select {filterable && 'bx--combo-box'} {filterable && 'bx--multi-select--filterable'} {invalid && 'bx--multi-select--invalid'} @@ -252,6 +261,11 @@ {#if invalid} {/if} + {#if !invalid && warn} + + {/if} {/if} - {#if !inline && !invalid && helperText} + {#if !inline && !invalid && !warn && helperText}