From fe663bf7fd39c026398107288d2e0496e6092b94 Mon Sep 17 00:00:00 2001
From: Alison Joseph <alison.joseph@us.ibm.com>
Date: Mon, 6 Mar 2023 13:29:18 -0600
Subject: [PATCH 1/4] feat(TextArea): add warning state

---
 .../components/FluidTextArea/FluidTextArea.js | 10 ++++
 .../FluidTextArea/FluidTextArea.stories.js    | 12 +++++
 .../components/TextArea/TextArea.stories.js   | 12 +++++
 .../src/components/TextArea/TextArea.tsx      | 49 ++++++++++++++++++-
 .../fluid-text-area/_fluid-text-area.scss     | 37 +++++++++++---
 .../styles/scss/components/form/_form.scss    |  1 +
 .../scss/components/text-area/_text-area.scss | 10 ++++
 7 files changed, 121 insertions(+), 10 deletions(-)

diff --git a/packages/react/src/components/FluidTextArea/FluidTextArea.js b/packages/react/src/components/FluidTextArea/FluidTextArea.js
index c12f2ec83f76..417fe6c4a977 100644
--- a/packages/react/src/components/FluidTextArea/FluidTextArea.js
+++ b/packages/react/src/components/FluidTextArea/FluidTextArea.js
@@ -123,6 +123,16 @@ FluidTextArea.propTypes = {
    * Provide the current value of the `<textarea>`
    */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes.node,
 };
 
 export default FluidTextArea;
diff --git a/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js b/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js
index 27c3cf9d8200..13f7da316652 100644
--- a/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js
+++ b/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js
@@ -175,4 +175,16 @@ Playground.argTypes = {
     },
     defaultValue: '500',
   },
+  warn: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  warnText: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Warning text',
+  },
 };
diff --git a/packages/react/src/components/TextArea/TextArea.stories.js b/packages/react/src/components/TextArea/TextArea.stories.js
index d581f5bc291d..0124df3e73fe 100644
--- a/packages/react/src/components/TextArea/TextArea.stories.js
+++ b/packages/react/src/components/TextArea/TextArea.stories.js
@@ -140,6 +140,18 @@ Playground.argTypes = {
     },
     defaultValue: 4,
   },
+  warn: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  warnText: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Warning text',
+  },
 };
 
 Playground.args = {
diff --git a/packages/react/src/components/TextArea/TextArea.tsx b/packages/react/src/components/TextArea/TextArea.tsx
index cafb532af1f0..cca14150b34f 100644
--- a/packages/react/src/components/TextArea/TextArea.tsx
+++ b/packages/react/src/components/TextArea/TextArea.tsx
@@ -9,7 +9,7 @@ import PropTypes, { ReactNodeLike } from 'prop-types';
 import React, { useState, useContext, useRef } from 'react';
 import classNames from 'classnames';
 import deprecate from '../../prop-types/deprecate';
-import { WarningFilled } from '@carbon/icons-react';
+import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import { useFeatureFlag } from '../FeatureFlags';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm';
@@ -123,6 +123,16 @@ export interface TextAreaProps
    * Provide the current value of the `<textarea>`
    */
   value?: string | number;
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn?: boolean;
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText?: ReactNodeLike;
 }
 
 const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => {
@@ -140,6 +150,8 @@ const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => {
     placeholder,
     enableCounter,
     maxCount,
+    warn = false,
+    warnText,
     ...other
   } = props;
   const prefix = usePrefix();
@@ -214,12 +226,24 @@ const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => {
     </div>
   ) : null;
 
+  const warning = warn ? (
+    <div role="alert" className={`${prefix}--form-requirement`}>
+      {warnText}
+      {isFluid && (
+        <WarningAltFilled
+          className={`${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`}
+        />
+      )}
+    </div>
+  ) : null;
+
   const textareaClasses = classNames(
     `${prefix}--text-area`,
     [enabled ? null : className],
     {
       [`${prefix}--text-area--light`]: light,
       [`${prefix}--text-area--invalid`]: invalid,
+      [`${prefix}--text-area--warn`]: warn,
     }
   );
 
@@ -265,19 +289,28 @@ const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => {
       <div
         className={classNames(`${prefix}--text-area__wrapper`, {
           [`${prefix}--text-area__wrapper--readonly`]: other.readOnly,
+          [`${prefix}--text-area__wrapper--warn`]: warn,
         })}
         data-invalid={invalid || null}>
         {invalid && !isFluid && (
           <WarningFilled className={`${prefix}--text-area__invalid-icon`} />
         )}
+        {warn && !invalid && !isFluid && (
+          <WarningAltFilled
+            className={`${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`}
+          />
+        )}
         {input}
         <span className={`${prefix}--text-area__counter-alert`} role="alert">
           {ariaAnnouncement}
         </span>
         {isFluid && <hr className={`${prefix}--text-area__divider`} />}
         {isFluid && invalid ? error : null}
+        {isFluid && warn && !invalid ? warning : null}
       </div>
-      {invalid && !isFluid ? error : helper}
+      {!invalid && !warn && !isFluid ? helper : null}
+      {invalid && !isFluid ? error : null}
+      {warn && !invalid && !isFluid ? warning : null}
     </div>
   );
 });
@@ -387,6 +420,16 @@ TextArea.propTypes = {
    * Provide the current value of the `<textarea>`
    */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes.node,
 };
 
 TextArea.defaultProps = {
@@ -400,6 +443,8 @@ TextArea.defaultProps = {
   helperText: '',
   enableCounter: false,
   maxCount: undefined,
+  warn: false,
+  warnText: '',
 };
 
 export default TextArea;
diff --git a/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss b/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss
index 66595ea9a657..9f51f77fca2a 100644
--- a/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss
+++ b/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss
@@ -92,8 +92,11 @@
   }
 
   .#{$prefix}--text-area--fluid
-    .#{$prefix}--text-area--invalid
-    + .#{$prefix}--text-area__divider {
+    .#{$prefix}--text-area__wrapper[data-invalid]
+    .#{$prefix}--text-area__divider,
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper--warn
+    .#{$prefix}--text-area__divider {
     display: block;
     border-style: solid;
     border-color: $border-subtle;
@@ -101,11 +104,13 @@
     margin: 0 1rem;
   }
 
-  // invalid error message container
+  // invalid & warning error message container
   .#{$prefix}--text-area--fluid
-    .#{$prefix}--text-area--invalid
-    + .#{$prefix}--text-area__divider
-    + .#{$prefix}--form-requirement {
+    .#{$prefix}--text-area__wrapper[data-invalid]
+    .#{$prefix}--form-requirement.#{$prefix}--form-requirement,
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper--warn
+    .#{$prefix}--form-requirement.#{$prefix}--form-requirement {
     position: relative;
     display: block;
     overflow: visible;
@@ -113,13 +118,29 @@
     padding: 0.5rem 2.5rem 0.5rem 1rem;
     margin: 0;
     background: $field;
+  }
+
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper--warn
+    .#{$prefix}--form-requirement.#{$prefix}--form-requirement {
+    border-bottom: 1px solid $border-strong;
+    color: $text-primary;
+  }
+
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper[data-invalid]
+    .#{$prefix}--form-requirement.#{$prefix}--form-requirement {
     color: $text-error;
   }
 
+  .#{$prefix}--text-area--fluid .#{$prefix}--text-area--warn {
+    border-bottom: none;
+  }
+
   .#{$prefix}--modal
     .#{$prefix}--text-area--fluid
-    .#{$prefix}--text-area--invalid
-    + .#{$prefix}--text-area__divider
+    .#{$prefix}--text-area__wrapper[data-invalid]
+    .#{$prefix}--text-area__divider
     + .#{$prefix}--form-requirement {
     background: $field-02;
   }
diff --git a/packages/styles/scss/components/form/_form.scss b/packages/styles/scss/components/form/_form.scss
index 5920fea010a3..1eb0d25a09fc 100644
--- a/packages/styles/scss/components/form/_form.scss
+++ b/packages/styles/scss/components/form/_form.scss
@@ -142,6 +142,7 @@ $input-label-weight: 400 !default;
   .#{$prefix}--text-input__field-wrapper--warning,
   .#{$prefix}--text-input__field-wrapper--warning > .#{$prefix}--text-input,
   .#{$prefix}--text-area__wrapper[data-invalid],
+  .#{$prefix}--text-area__wrapper--warn,
   .#{$prefix}--select-input__wrapper[data-invalid],
   .#{$prefix}--select--warning .#{$prefix}--select-input__wrapper,
   .#{$prefix}--time-picker[data-invalid],
diff --git a/packages/styles/scss/components/text-area/_text-area.scss b/packages/styles/scss/components/text-area/_text-area.scss
index fbdc5b10f0c4..13da3e5b7137 100644
--- a/packages/styles/scss/components/text-area/_text-area.scss
+++ b/packages/styles/scss/components/text-area/_text-area.scss
@@ -6,6 +6,7 @@
 //
 
 @use '../form';
+@use '../../colors' as *;
 @use '../../config' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
@@ -71,6 +72,15 @@
     fill: $support-error;
   }
 
+  .#{$prefix}--text-area__invalid-icon--warning {
+    fill: $support-warning;
+  }
+
+  .#{$prefix}--text-area__invalid-icon--warning path[fill] {
+    fill: $black-100;
+    opacity: 1;
+  }
+
   .#{$prefix}--text-area__counter-alert {
     position: absolute;
     overflow: hidden;

From 9c58c5cff05e04cd5967378bcb99656f2b68fb6e Mon Sep 17 00:00:00 2001
From: Alison Joseph <alison.joseph@us.ibm.com>
Date: Tue, 7 Mar 2023 13:36:37 -0600
Subject: [PATCH 2/4] chore: update snapshots

---
 .../__tests__/__snapshots__/PublicAPI-test.js.snap | 14 ++++++++++++++
 .../FluidTextArea/FluidTextArea.stories.js         |  2 +-
 .../src/components/TextArea/TextArea.stories.js    |  2 +-
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 3a2b25187797..00005074d4e0 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -7825,6 +7825,8 @@ Map {
       "onClick": [Function],
       "placeholder": "",
       "rows": 4,
+      "warn": false,
+      "warnText": "",
     },
     "propTypes": Object {
       "className": Object {
@@ -7903,6 +7905,12 @@ Map {
         ],
         "type": "oneOfType",
       },
+      "warn": Object {
+        "type": "bool",
+      },
+      "warnText": Object {
+        "type": "node",
+      },
     },
     "render": [Function],
   },
@@ -9963,6 +9971,12 @@ Map {
         ],
         "type": "oneOfType",
       },
+      "warn": Object {
+        "type": "bool",
+      },
+      "warnText": Object {
+        "type": "node",
+      },
     },
   },
   "unstable__FluidTextAreaSkeleton" => Object {
diff --git a/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js b/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js
index 13f7da316652..e886bc7b0678 100644
--- a/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js
+++ b/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js
@@ -185,6 +185,6 @@ Playground.argTypes = {
     control: {
       type: 'text',
     },
-    defaultValue: 'Warning text',
+    defaultValue: 'This is a warning message.',
   },
 };
diff --git a/packages/react/src/components/TextArea/TextArea.stories.js b/packages/react/src/components/TextArea/TextArea.stories.js
index 0124df3e73fe..f32056f5b621 100644
--- a/packages/react/src/components/TextArea/TextArea.stories.js
+++ b/packages/react/src/components/TextArea/TextArea.stories.js
@@ -150,7 +150,7 @@ Playground.argTypes = {
     control: {
       type: 'text',
     },
-    defaultValue: 'Warning text',
+    defaultValue: 'This is a warning message.',
   },
 };
 

From cbf3e9797e3f2e8bb265299fddb94ed3b896d485 Mon Sep 17 00:00:00 2001
From: Alison Joseph <alison.joseph@us.ibm.com>
Date: Thu, 9 Mar 2023 14:07:14 -0600
Subject: [PATCH 3/4] fix: textarea error bottom border and default value in
 story

---
 packages/react/src/components/TextArea/TextArea.stories.js     | 3 ++-
 .../scss/components/fluid-text-area/_fluid-text-area.scss      | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/TextArea/TextArea.stories.js b/packages/react/src/components/TextArea/TextArea.stories.js
index f32056f5b621..6a6ab4ab27c2 100644
--- a/packages/react/src/components/TextArea/TextArea.stories.js
+++ b/packages/react/src/components/TextArea/TextArea.stories.js
@@ -116,7 +116,8 @@ Playground.argTypes = {
     control: {
       type: 'text',
     },
-    defaultValue: '',
+    defaultValue:
+      'Error message that is really long can wrap to more lines but should not be excessively long.',
   },
   labelText: {
     control: {
diff --git a/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss b/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss
index 9f51f77fca2a..dd3ed75cf23e 100644
--- a/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss
+++ b/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss
@@ -130,6 +130,7 @@
   .#{$prefix}--text-area--fluid
     .#{$prefix}--text-area__wrapper[data-invalid]
     .#{$prefix}--form-requirement.#{$prefix}--form-requirement {
+    border-bottom: none;
     color: $text-error;
   }
 

From 02562055396be6d1f3619e9ae61f629b135cff1b Mon Sep 17 00:00:00 2001
From: Alison Joseph <alison.joseph@us.ibm.com>
Date: Fri, 10 Mar 2023 11:51:49 -0600
Subject: [PATCH 4/4] chore: hide resize fluid textarea invalid and warn

---
 .../scss/components/fluid-text-area/_fluid-text-area.scss    | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss b/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss
index dd3ed75cf23e..203085511369 100644
--- a/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss
+++ b/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss
@@ -91,6 +91,11 @@
     display: none;
   }
 
+  .#{$prefix}--text-area--fluid .#{$prefix}--text-area--invalid,
+  .#{$prefix}--text-area--fluid .#{$prefix}--text-area--warn {
+    resize: none;
+  }
+
   .#{$prefix}--text-area--fluid
     .#{$prefix}--text-area__wrapper[data-invalid]
     .#{$prefix}--text-area__divider,