feat(text-area): add warn and warnText props

Closes #1136

Author: metonym

COMPONENT_INDEX.md

@@ -4082,6 +4082,8 @@ None.
 | hideLabel   | No       | <code>let</code> | No       | <code>boolean</code>                         | <code>false</code>                               | Set to `true` to visually hide the label text   |
 | invalid     | No       | <code>let</code> | No       | <code>boolean</code>                         | <code>false</code>                               | Set to `true` to indicate an invalid state      |
 | invalidText | No       | <code>let</code> | No       | <code>string</code>                          | <code>""</code>                                  | Specify the text for the invalid state          |
+| warn        | No       | <code>let</code> | No       | <code>boolean</code>                         | <code>false</code>                               | Set to `true` to indicate a warning state       |
+| warnText    | No       | <code>let</code> | No       | <code>string</code>                          | <code>""</code>                                  | Specify the warning state text                  |
 | id          | No       | <code>let</code> | No       | <code>string</code>                          | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the textarea element              |
 | name        | No       | <code>let</code> | No       | <code>string</code>                          | <code>undefined</code>                           | Specify a name attribute for the input          |
 

docs/src/COMPONENT_API.json

@@ -15424,6 +15424,30 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "warn",
+          "kind": "let",
+          "description": "Set to `true` to indicate a warning state",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "warnText",
+          "kind": "let",
+          "description": "Specify the warning state text",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "id",
           "kind": "let",

src/TextArea/TextArea.svelte

@@ -44,6 +44,12 @@
   /** Specify the text for the invalid state */
   export let invalidText = "";
 
+  /** Set to `true` to indicate a warning state */
+  export let warn = false;
+
+  /** Specify the warning state text */
+  export let warnText = "";
+
   /** Set an id for the textarea element */
   export let id = "ccs-" + Math.random().toString(36);
 
@@ -57,8 +63,10 @@
   export let ref = null;
 
   import WarningFilled from "../icons/WarningFilled.svelte";
+  import WarningAltFilled from "../icons/WarningAltFilled.svelte";
 
   $: errorId = `error-${id}`;
+  $: warnId = `warn-${id}`;
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@@ -90,15 +98,26 @@
       {/if}
     </div>
   {/if}
-  <div class:bx--text-area__wrapper={true} data-invalid={invalid || undefined}>
+  <div
+    class:bx--text-area__wrapper={true}
+    data-invalid={invalid || undefined}
+    data-warn={warn || undefined}
+  >
     {#if invalid}
       <WarningFilled class="bx--text-area__invalid-icon" />
     {/if}
+    {#if !invalid && warn}
+      <WarningAltFilled
+        class="bx--text-area__invalid-icon
+        bx--text-area__invalid-icon--warning"
+      />
+    {/if}
     <textarea
       bind:this={ref}
       bind:value
       aria-invalid={invalid || undefined}
-      aria-describedby={invalid ? errorId : undefined}
+      aria-describedby={invalid ? errorId : warn ? warnId : undefined}
+      data-warn={warn || undefined}
       {disabled}
       {id}
       {name}
@@ -109,6 +128,7 @@
       class:bx--text-area={true}
       class:bx--text-area--light={light}
       class:bx--text-area--invalid={invalid}
+      class:bx--text-area--warning={warn}
       maxlength={maxCount ?? undefined}
       {...$$restProps}
       on:change
@@ -120,7 +140,7 @@
       on:paste
     ></textarea>
   </div>
-  {#if !invalid && helperText}
+  {#if !invalid && !warn && helperText}
     <div
       class:bx--form__helper-text={true}
       class:bx--form__helper-text--disabled={disabled}
@@ -131,4 +151,7 @@
   {#if invalid}
     <div id={errorId} class:bx--form-requirement={true}>{invalidText}</div>
   {/if}
+  {#if !invalid && warn}
+    <div id={warnId} class:bx--form-requirement={true}>{warnText}</div>
+  {/if}
 </div>

types/TextArea/TextArea.svelte.d.ts

@@ -82,6 +82,18 @@ type $Props = {
    */
   invalidText?: string;
 
+  /**
+   * Set to `true` to indicate a warning state
+   * @default false
+   */
+  warn?: boolean;
+
+  /**
+   * Specify the warning state text
+   * @default ""
+   */
+  warnText?: string;
+
   /**
    * Set an id for the textarea element
    * @default "ccs-" + Math.random().toString(36)