feat(combo-box): support warning state

COMPONENT_INDEX.md

@@ -617,6 +617,8 @@ export interface ComboBoxItem {
 | helperText       | <code>let</code> | No       | <code>string</code>                                         | <code>""</code>                                       | Specify the helper text                                                  |
 | invalidText      | <code>let</code> | No       | <code>string</code>                                         | <code>""</code>                                       | Specify the invalid state text                                           |
 | invalid          | <code>let</code> | No       | <code>boolean</code>                                        | <code>false</code>                                    | Set to `true` to indicate an invalid state                               |
+| 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                                           |
 | light            | <code>let</code> | No       | <code>boolean</code>                                        | <code>false</code>                                    | Set to `true` to enable the light variant                                |
 | shouldFilterItem | <code>let</code> | No       | <code>(item: ComboBoxItem, value: string) => boolean</code> | <code>() => true</code>                               | Determine if an item should be filtered given the current combobox value |
 | translateWithId  | <code>let</code> | No       | <code>(id: any) => string</code>                            | --                                                    | Override the default translation ids                                     |

docs/src/COMPONENT_API.json

@@ -1258,6 +1258,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": "light",
           "kind": "let",

docs/src/pages/components/ComboBox.svx

@@ -59,6 +59,15 @@ items={[
   {id: "2", text: "Fax"}
   ]}  />
 
+### Warning state
+
+<ComboBox warn warnText="This contact method is not associated with your account" titleText="Contact" placeholder="Select contact method"
+items={[
+  {id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}
+  ]}  />
+
 ### Disabled
 
 <ComboBox disabled titleText="Contact" placeholder="Select contact method"

src/ComboBox/ComboBox.svelte

@@ -46,6 +46,12 @@
   /** Set to `true` to indicate an invalid state */
   export let invalid = false;
 
+  /** Set to `true` to indicate an warning state */
+  export let warn = false;
+
+  /** Specify the warning state text */
+  export let warnText = "";
+
   /** Set to `true` to enable the light variant */
   export let light = false;
 
@@ -83,7 +89,9 @@
   export let listRef = null;
 
   import { createEventDispatcher, afterUpdate, tick } from "svelte";
+  import Checkmark16 from "carbon-icons-svelte/lib/Checkmark16/Checkmark16.svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
+  import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
   import ListBox from "../ListBox/ListBox.svelte";
   import ListBoxField from "../ListBox/ListBoxField.svelte";
   import ListBoxMenu from "../ListBox/ListBoxMenu.svelte";
@@ -158,7 +166,7 @@
     </label>
   {/if}
   <ListBox
-    class="bx--combo-box"
+    class="bx--combo-box {!invalid && warn && 'bx--combo-box--warning'}"
     id="{comboId}"
     aria-label="{ariaLabel}"
     disabled="{disabled}"
@@ -167,6 +175,8 @@
     open="{open}"
     light="{light}"
     size="{size}"
+    warn="{warn}"
+    warnText="{warnText}"
   >
     <ListBoxField
       role="button"
@@ -236,6 +246,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}
       {#if inputValue}
         <ListBoxSelection
           on:clear
@@ -286,7 +301,7 @@
       </ListBoxMenu>
     {/if}
   </ListBox>
-  {#if !invalid && helperText}
+  {#if !invalid && helperText && !warn}
     <div
       class:bx--form__helper-text="{true}"
       class:bx--form__helper-text--disabled="{disabled}"

types/ComboBox/ComboBox.d.ts

@@ -73,6 +73,18 @@ export interface ComboBoxProps
    */
   invalid?: boolean;
 
+  /**
+   * Set to `true` to indicate an warning state
+   * @default false
+   */
+  warn?: boolean;
+
+  /**
+   * Specify the warning state text
+   * @default ""
+   */
+  warnText?: string;
+
   /**
    * Set to `true` to enable the light variant
    * @default false