fix(TextArea): match experimental spec (#2036)

* fix(TextArea): add disabled class to label

* fix(Textarea): match experimental spec

* fix(TextArea): add disabled class to input

* chore: bump carbon-components version

* chore: bump carbon-components version

* chore: bump carbon-components version

package.json

@@ -181,7 +181,7 @@
     "babel-plugin-dev-expression": "^0.2.1",
     "babel-plugin-react-docgen": "^2.0.0",
     "bowser": "^1.6.1",
-    "carbon-components": "^9.84.21",
+    "carbon-components": "^9.85.6",
     "carbon-icons": "^7.0.5",
     "chalk": "^2.3.0",
     "cli-table": "^0.3.0",

src/components/TextArea/TextArea.js

@@ -9,6 +9,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
+import { componentsX } from '../../internal/FeatureFlags';
+import WarningFilled16 from '@carbon/icons-react/lib/warning--filled/16';
 
 const { prefix } = settings;
 
@@ -39,12 +41,9 @@ const TextArea = ({
     },
   };
 
-  const errorId = id + '-error-msg';
-  const textareaClasses = classNames(`${prefix}--text-area`, className, {
-    [`${prefix}--text-area--light`]: light,
-  });
   const labelClasses = classNames(`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel,
+    [`${prefix}--label--disabled`]: other.disabled,
   });
 
   const label = labelText ? (
@@ -53,34 +52,56 @@ const TextArea = ({
     </label>
   ) : null;
 
+  const helperTextClasses = classNames(`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: other.disabled,
+  });
+
+  const helper = helperText ? (
+    <div className={helperTextClasses}>{helperText}</div>
+  ) : null;
+
+  const errorId = id + '-error-msg';
+
   const error = invalid ? (
     <div className={`${prefix}--form-requirement`} id={errorId}>
       {invalidText}
     </div>
   ) : null;
 
-  const input = invalid ? (
+  const textareaClasses = classNames(`${prefix}--text-area`, className, {
+    [`${prefix}--text-area--light`]: light,
+    [`${prefix}--text-area--invalid`]: invalid,
+  });
+
+  const input = (
     <textarea
       {...other}
       {...textareaProps}
-      aria-invalid
-      aria-describedby={errorId}
       className={textareaClasses}
-      data-invalid
+      aria-invalid={invalid || null}
+      aria-describedby={invalid ? errorId : null}
+      data-invalid={(invalid && !componentsX) || null}
+      disabled={other.disabled}
     />
-  ) : (
-    <textarea {...other} {...textareaProps} className={textareaClasses} />
   );
 
-  const helper = helperText ? (
-    <div className={`${prefix}--form__helper-text`}>{helperText}</div>
-  ) : null;
-
   return (
     <div className={`${prefix}--form-item`}>
       {label}
-      {input}
-      {helper}
+      {componentsX && helper}
+      {componentsX ? (
+        <div
+          className={`${prefix}--text-area__wrapper`}
+          data-invalid={invalid || null}>
+          {invalid && (
+            <WarningFilled16 className={`${prefix}--text-area__invalid-icon`} />
+          )}
+          {input}
+        </div>
+      ) : (
+        input
+      )}
+      {!componentsX && helper}
       {error}
     </div>
   );

yarn.lock

@@ -3158,10 +3158,10 @@ capture-stack-trace@^1.0.0:
   resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d"
   integrity sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw==
 
-carbon-components@^9.84.21:
-  version "9.85.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-9.85.0.tgz#2396efd6af22a053a2fbe8226ded4cc44ce630a8"
-  integrity sha512-ka+rFqtixV4gvrAWzWQRX8GHkypEI/5yaeMokXgP2Gz4ngnt8UHI2a3HZNkLBhv9KbgzZ9m8Du8vL6CzC9PIJQ==
+carbon-components@^9.85.6:
+  version "9.85.6"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-9.85.6.tgz#f3c16252b804c18db66dc9fcf0a9a41c4c901623"
+  integrity sha512-r7EwqFlbhhq91QVdFgnXO7erEB3fNfdqysZ6+8OPZxxmNyPrIHTzFdSUu3/KBNz1AFGiUHpiK0VrYijAWCasGw==
   dependencies:
     carbon-icons "^7.0.7"
     flatpickr "4.5.7"