From be30b0a019658cab9cc7746e718ff1bc67fb9c58 Mon Sep 17 00:00:00 2001
From: Eric Y Liu <ericyl.us@gmail.com>
Date: Fri, 19 Mar 2021 05:47:22 -0700
Subject: [PATCH] feat(select): add warning state

---
 COMPONENT_INDEX.md                   |  2 ++
 docs/src/COMPONENT_API.json          | 20 ++++++++++++++++++++
 docs/src/pages/components/Select.svx | 11 ++++++++++-
 src/Select/Select.svelte             | 18 ++++++++++++++++++
 types/Select/Select.d.ts             | 12 ++++++++++++
 5 files changed, 62 insertions(+), 1 deletion(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 1fe2a38b..f9e21080 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -2920,6 +2920,8 @@ None.
 | name        | <code>let</code> | No       | <code>string</code>                        | --                                               | Specify a name attribute for the select element |
 | 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                         |
 | noLabel     | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to not render a label             |
 | labelText   | <code>let</code> | No       | <code>string</code>                        | <code>""</code>                                  | Specify the label text                          |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 620a86ff..6e59c9ea 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -7638,6 +7638,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/Select.svx b/docs/src/pages/components/Select.svx
index 40e3aa3e..b3196e56 100644
--- a/docs/src/pages/components/Select.svx
+++ b/docs/src/pages/components/Select.svx
@@ -75,7 +75,16 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
   <SelectItem value="g100" text="Gray 100" />
 </Select>
 
-### Disabled
+### Warning state
+
+<Select warn warnText="The selected theme will not be persisted" labelText="Carbon theme" selected="g10" >
+  <SelectItem value="white" text="White" />
+  <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g90" text="Gray 90" />
+  <SelectItem value="g100" text="Gray 100" />
+</Select>
+
+### Disabled state
 
 <Select disabled labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
diff --git a/src/Select/Select.svelte b/src/Select/Select.svelte
index 207eb975..ca99f959 100644
--- a/src/Select/Select.svelte
+++ b/src/Select/Select.svelte
@@ -39,6 +39,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 = "";
 
@@ -58,6 +64,7 @@
   import { writable } from "svelte/store";
   import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
+  import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
 
   const dispatch = createEventDispatcher();
   const selectedValue = writable(selected);
@@ -80,6 +87,7 @@
     class:bx--select--light="{light}"
     class:bx--select--invalid="{invalid}"
     class:bx--select--disabled="{disabled}"
+    class:bx--select--warning="{warn}"
   >
     {#if !noLabel}
       <label
@@ -158,6 +166,11 @@
         {#if invalid}
           <WarningFilled16 class="bx--select__invalid-icon" />
         {/if}
+        {#if !invalid && warn}
+          <WarningAltFilled16
+            class="bx--select__invalid-icon bx--select__invalid-icon--warning"
+          />
+        {/if}
       </div>
       {#if !invalid && helperText}
         <div
@@ -172,6 +185,11 @@
           {invalidText}
         </div>
       {/if}
+      {#if !invalid && warn}
+        <div id="{errorId}" class:bx--form-requirement="{true}">
+          {warnText}
+        </div>
+      {/if}
     {/if}
   </div>
 </div>
diff --git a/types/Select/Select.d.ts b/types/Select/Select.d.ts
index 914b462a..93bc7546 100644
--- a/types/Select/Select.d.ts
+++ b/types/Select/Select.d.ts
@@ -54,6 +54,18 @@ export interface SelectProps
    */
   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 ""