feat(text-input): add warn prop

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

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>