feat(dropdown): support warning state

COMPONENT_INDEX.md

@@ -983,6 +983,8 @@ export interface DropdownItem {
 | titleText       | <code>let</code> | No       | <code>string</code>                         | <code>""</code>                                       | Specify the title text                        |
 | 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>                         | --                                                    | Specify the list box label                    |
 | translateWithId | <code>let</code> | No       | <code>(id: any) => string</code>            | --                                                    | Override the default translation ids          |
@@ -1234,7 +1236,9 @@ None.
 
 ### Events
 
-None.
+| Event name | Type      | Detail |
+| :--------- | :-------- | :----- |
+| submit     | forwarded | --     |
 
 ## `Form`
 
@@ -1807,6 +1811,8 @@ None.
 | disabled    | <code>let</code> | No       | <code>boolean</code>                   | <code>false</code>     | Set to `true` to disable the list box      |
 | 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             |
 
 ### Slots
 

docs/src/COMPONENT_API.json

@@ -1125,6 +1125,26 @@
           "isFunction": false,
           "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
         }
       ],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
@@ -3799,6 +3819,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",
@@ -4506,7 +4546,7 @@
       "filePath": "/src/FluidForm/FluidForm.svelte",
       "props": [],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
-      "events": [],
+      "events": [{ "type": "forwarded", "name": "submit", "element": "Form" }],
       "typedefs": [],
       "rest_props": { "type": "InlineComponent", "name": "Form" }
     },

docs/src/pages/components/Dropdown.svx

@@ -51,6 +51,18 @@ Use the `itemToString` prop to format the display of individual items.
   {id: "1", text: "Email"},
   {id: "2", text: "Fax"}]}" />
 
+### Invalid state
+
+<Dropdown invalid invalidText="Secondary contact method must be different from the primary contact" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}]}" />
+
+### Warning state
+
+<Dropdown warn warnText="This contact method is not associated with your account" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}]}" />
+
 ### Disabled state
 
 <Dropdown disabled titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},

src/Dropdown/Dropdown.svelte

@@ -54,6 +54,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 = "";
 
@@ -82,7 +88,8 @@
   export let ref = null;
 
   import { createEventDispatcher } from "svelte";
-  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
+  import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
   import {
     ListBox,
     ListBoxMenu,
@@ -148,8 +155,7 @@
     id="{id}"
     name="{name}"
     aria-label="{$$props['aria-label']}"
-    class="bx--dropdown {invalid && 'bx--dropdown--invalid'}
+    class="bx--dropdown {invalid && 'bx--dropdown--invalid'} {!invalid && warn && 'bx--dropdown--warning'} {open && 'bx--dropdown--open'}
-      {open && 'bx--dropdown--open'}
       {size === 'sm' && 'bx--dropdown--sm'}
       {size === 'xl' && 'bx--dropdown--xl'}
       {inline && 'bx--dropdown--inline'}
@@ -163,10 +169,17 @@
     invalid="{invalid}"
     invalidText="{invalidText}"
     light="{light}"
+    warn="{warn}"
+    warnText="{warnText}"
   >
     {#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}
     <button
       bind:this="{ref}"
       class:bx--list-box__field="{true}"
@@ -220,7 +233,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}"

src/ListBox/ListBox.svelte

@@ -25,6 +25,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 = "";
 </script>
 
 <div
@@ -38,6 +44,7 @@
   class:bx--list-box--disabled="{disabled}"
   class:bx--list-box--expanded="{open}"
   class:bx--list-box--light="{light}"
+  class:bx--list-box--warning="{!invalid && warn}"
   {...$$restProps}
   on:keydown
   on:keydown="{(e) => {
@@ -52,3 +59,6 @@
 {#if invalid}
   <div class:bx--form-requirement="{true}">{invalidText}</div>
 {/if}
+{#if !invalid && warn}
+  <div class:bx--form-requirement="{true}">{warnText}</div>
+{/if}

types/Dropdown/Dropdown.d.ts

@@ -81,6 +81,18 @@ export interface DropdownProps extends svelte.JSX.HTMLAttributes<HTMLElementTagN
    */
   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 ""

types/FluidForm/FluidForm.d.ts

@@ -8,5 +8,6 @@ export default class FluidForm {
     default: {};
   };
 
+  $on(eventname: "submit", cb: (event: WindowEventMap["submit"]) => void): () => void;
   $on(eventname: string, cb: (event: Event) => void): () => void;
 }

types/ListBox/ListBox.d.ts

@@ -41,6 +41,18 @@ export interface ListBoxProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNa
    * @default ""
    */
   invalidText?: string;
+
+  /**
+   * Set to `true` to indicate an warning state
+   * @default false
+   */
+  warn?: boolean;
+
+  /**
+   * Specify the warning state text
+   * @default ""
+   */
+  warnText?: string;
 }
 
 export default class ListBox {