feat(multi-select): support warning state

COMPONENT_INDEX.md

@@ -2158,6 +2158,8 @@ export interface MultiSelectItem {
 | useTitleInItem    | <code>let</code> | No       | <code>boolean</code>                                                                           | <code>false</code>                                                                  | Set to `true` to pass the item to `itemToString` in the checkbox                      |
 | invalid           | <code>let</code> | No       | <code>boolean</code>                                                                           | <code>false</code>                                                                  | Set to `true` to indicate an invalid state                                            |
 | invalidText       | <code>let</code> | No       | <code>string</code>                                                                            | <code>""</code>                                                                     | Specify the invalid state text                                                        |
+| warn              | <code>let</code> | No       | <code>boolean</code>                                                                           | <code>false</code>                                                                  | Set to `true` to indicate an warning state                                            |
+| warnText          | <code>let</code> | No       | <code>string</code>                                                                            | <code>""</code>                                                                     | Specify the warning state text                                                        |
 | helperText        | <code>let</code> | No       | <code>string</code>                                                                            | <code>""</code>                                                                     | Specify the helper text                                                               |
 | label             | <code>let</code> | No       | <code>string</code>                                                                            | <code>""</code>                                                                     | Specify the list box label                                                            |
 | id                | <code>let</code> | No       | <code>string</code>                                                                            | <code>"ccs-" + Math.random().toString(36)</code>                                    | Set an id for the list box component                                                  |

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",

docs/src/pages/components/MultiSelect.svx

@@ -90,3 +90,27 @@ Use the `itemToString` prop to format the display of individual items.
     {id: "1", text: "Email"},
     {id: "2", text: "Fax"}]}"
   />
+
+### Invalid state
+
+<MultiSelect invalid invalidText="A contact method is required" titleText="Contact" label="Select contact methods..."
+    items="{[{id: "0", text: "Slack"},
+    {id: "1", text: "Email"},
+    {id: "2", text: "Fax"}]}"
+  />
+
+### Warning state
+
+<MultiSelect warn warnText="One or more contact methods are not associated with your account" titleText="Contact" label="Select contact methods..."
+    items="{[{id: "0", text: "Slack"},
+    {id: "1", text: "Email"},
+    {id: "2", text: "Fax"}]}"
+  />
+
+### Disabled state
+
+<MultiSelect disabled titleText="Contact" label="Select contact methods..."
+    items="{[{id: "0", text: "Slack"},
+    {id: "1", text: "Email"},
+    {id: "2", text: "Fax"}]}"
+  />

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 WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
-  import { Checkbox } from "../Checkbox";
+  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}
       <WarningFilled16 class="bx--list-box__invalid-icon" />
     {/if}
+    {#if !invalid && warn}
+      <WarningAltFilled16
+        class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
+      />
+    {/if}
     <ListBoxField
       role="button"
       tabindex="0"
@@ -415,7 +429,7 @@
       </ListBoxMenu>
     {/if}
   </ListBox>
-  {#if !inline && !invalid && helperText}
+  {#if !inline && !invalid && !warn && helperText}
     <div
       class:bx--form__helper-text="{true}"
       class:bx--form__helper-text--disabled="{disabled}"

types/MultiSelect/MultiSelect.d.ts

@@ -130,6 +130,18 @@ export interface MultiSelectProps extends svelte.JSX.HTMLAttributes<HTMLElementT
    */
   invalidText?: string;
 
+  /**
+   * Set to `true` to indicate an warning state
+   * @default false
+   */
+  warn?: boolean;
+
+  /**
+   * Specify the warning state text
+   * @default ""
+   */
+  warnText?: string;
+
   /**
    * Specify the helper text
    * @default ""