Merge 3ca9fd5657 into 8d3ac75170

docs/src/COMPONENT_API.json

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

docs/src/pages/components/TextArea.svx

@@ -31,6 +31,10 @@ components: ["TextArea", "TextAreaSkeleton"]
 
 <TextArea invalid invalidText="Only plain text characters are allowed" labelText="App description" placeholder="Enter a description..." />
 
+### Warning state
+
+<TextArea warn warnText="It is recommended to enter a longer description" labelText="App description" placeholder="Enter a description..." />
+
 ### Disabled state
 
 <TextArea disabled labelText="App description" placeholder="Enter a description..." />

src/TextArea/TextArea.svelte

@@ -35,6 +35,12 @@
   /** Specify the text for the invalid state */
   export let invalidText = "";
 
+  /** Set to `true` to indicate an 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);
 
@@ -48,8 +54,10 @@
   export let ref = null;
 
   import WarningFilled16 from "../icons/WarningFilled16.svelte";
+  import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
 
   $: errorId = `error-${id}`;
+  $: warnId = `warn-${id}`;
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@@ -75,14 +83,23 @@
   <div
     class:bx--text-area__wrapper="{true}"
     data-invalid="{invalid || undefined}"
+    data-warn="{warn || undefined}"
   >
     {#if invalid}
       <WarningFilled16 class="bx--text-area__invalid-icon" />
     {/if}
+    {#if !invalid && warn}
+      <WarningAltFilled16
+        class="bx--text-area__invalid-icon
+          bx--text-area__invalid-icon--warning"
+      />
+    {/if}
     <textarea
       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}"
@@ -94,6 +111,7 @@
       class:bx--text-area="{true}"
       class:bx--text-area--light="{light}"
       class:bx--text-area--invalid="{invalid}"
+      class:bx--text-area--warn="{warn}"
       {...$$restProps}
       on:change
       on:input
@@ -105,7 +123,7 @@
       on:focus
       on:blur></textarea>
   </div>
-  {#if !invalid && helperText}
+  {#if !invalid && !warn && helperText}
     <div
       class:bx--form__helper-text="{true}"
       class:bx--form__helper-text--disabled="{disabled}"
@@ -116,4 +134,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>