From 373fbde4e179a9ed78eae54acb749c859c173ea6 Mon Sep 17 00:00:00 2001
From: josefaidt <josef.aidt@gmail.com>
Date: Tue, 22 Sep 2020 11:50:21 -0500
Subject: [PATCH 1/2] feat(text-input): add warn prop

---
 src/TextInput/TextInput.stories.js |  5 +++++
 src/TextInput/TextInput.svelte     | 23 +++++++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/src/TextInput/TextInput.stories.js b/src/TextInput/TextInput.stories.js
index c57e47a3..306b497c 100644
--- a/src/TextInput/TextInput.stories.js
+++ b/src/TextInput/TextInput.stories.js
@@ -23,6 +23,11 @@ export const Default = () => ({
       "Content of form validation UI (invalidText)",
       "A valid value is required"
     ),
+    warn: boolean('Show warning state (warn)', false),
+    warnText: text(
+      'Warning state text (warnText)',
+      'This will overwrite your current settings'
+    ),
     placeholder: text("Placeholder text (placeholder)", "Placeholder text."),
     id: text("TextInput id", "text-input-id"),
     name: text("TextInput name", "text-input-name"),
diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte
index 9fa4d76b..11c89a39 100644
--- a/src/TextInput/TextInput.svelte
+++ b/src/TextInput/TextInput.svelte
@@ -77,6 +77,18 @@
    */
   export let invalidText = "";
 
+  /**
+   * Set to `true` to indicate an warning state
+   * @type {boolean} [warn=false]
+   */
+  export let warn = false;
+
+  /**
+   * Specify the warning state text
+   * @type {string} [invalidText=""]
+   */
+  export let warnText = "";
+
   /**
    * Obtain a reference to the input HTML element
    * @type {null | HTMLInputElement} [ref=null]
@@ -90,8 +102,10 @@
   export let required = false;
 
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
+  import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16";
 
   $: errorId = `error-${id}`;
+  $: warnId = `warn-${id}`;
 </script>
 
 <div
@@ -113,10 +127,16 @@
   {/if}
   <div
     data-invalid="{invalid || undefined}"
+    data-warn="{warn || undefined}"
     class:bx--text-input__field-wrapper="{true}">
     {#if invalid}
       <WarningFilled16 class="bx--text-input__invalid-icon" />
     {/if}
+    {#if !invalid && warn}
+      <WarningAltFilled16
+        class="bx--text-input__invalid-icon
+          bx--text-input__invalid-icon--warning" />
+    {/if}
     <input
       bind:this="{ref}"
       data-invalid="{invalid || undefined}"
@@ -152,4 +172,7 @@
   {#if invalid}
     <div class:bx--form-requirement="{true}" id="{errorId}">{invalidText}</div>
   {/if}
+  {#if !invalid && warn}
+    <div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div>
+  {/if}
 </div>

From 8c1b78a16be315c71b62911f7b2c644d22826463 Mon Sep 17 00:00:00 2001
From: josefaidt <josef.aidt@gmail.com>
Date: Tue, 22 Sep 2020 12:25:33 -0500
Subject: [PATCH 2/2] hotfix(text-input): correct JSDoc, aria-describedby in
 warn state

---
 src/TextInput/TextInput.svelte | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte
index 11c89a39..3aaa8b78 100644
--- a/src/TextInput/TextInput.svelte
+++ b/src/TextInput/TextInput.svelte
@@ -85,7 +85,7 @@
 
   /**
    * Specify the warning state text
-   * @type {string} [invalidText=""]
+   * @type {string} [warnText=""]
    */
   export let warnText = "";
 
@@ -141,7 +141,8 @@
       bind:this="{ref}"
       data-invalid="{invalid || undefined}"
       aria-invalid="{invalid || undefined}"
-      aria-describedby="{invalid ? errorId : undefined}"
+      data-warn="{warn || undefined}"
+      aria-describedby="{invalid ? errorId : warn ? warnId : undefined}"
       disabled="{disabled}"
       id="{id}"
       name="{name}"
@@ -152,6 +153,7 @@
       class:bx--text-input="{true}"
       class:bx--text-input--light="{light}"
       class:bx--text-input--invalid="{invalid}"
+      class:bx--text-input--warn="{warn}"
       class="{size && `bx--text-input--${size}`}"
       on:change
       on:input
@@ -162,7 +164,7 @@
       on:focus
       on:blur />
   </div>
-  {#if !invalid && helperText}
+  {#if !invalid && !warn && helperText}
     <div
       class:bx--form__helper-text="{true}"
       class:bx--form__helper-text--disabled="{disabled}">