feat(FluidTextArea): adds new fluid text area (#12053)

* feat(FluidTextArea): adds new fluid text area

* feat: add fluid text area styles

* feat: add text area stories

* chore: add tests

* feat: update fluid form story

* fix: fluid text area in modal styles

* chore: update snapshots

* fix: invalid focus

* fix: disabled resize

* fix: fluid form story source

* fix: fluid form story source

* feat(fluid-text-area): adds skeleton state

* feat(fluid-text-area): adds skeleton styles

* Update packages/react/src/components/FluidTextArea/FluidTextArea.stories.js

Co-authored-by: Josefina Mancilla <josefinanoemi4@gmail.com>
Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -9176,6 +9176,85 @@ Map {
       },
     },
   },
+  "unstable__FluidTextArea" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+      "cols": Object {
+        "type": "number",
+      },
+      "defaultValue": Object {
+        "args": Array [
+          Array [
+            Object {
+              "type": "string",
+            },
+            Object {
+              "type": "number",
+            },
+          ],
+        ],
+        "type": "oneOfType",
+      },
+      "disabled": Object {
+        "type": "bool",
+      },
+      "enableCounter": Object {
+        "type": "bool",
+      },
+      "helperText": Object {
+        "type": "node",
+      },
+      "hideLabel": Object {
+        "type": "bool",
+      },
+      "id": Object {
+        "type": "string",
+      },
+      "invalid": Object {
+        "type": "bool",
+      },
+      "invalidText": Object {
+        "type": "node",
+      },
+      "labelText": Object {
+        "isRequired": true,
+        "type": "node",
+      },
+      "light": Object {
+        "type": "bool",
+      },
+      "maxCount": Object {
+        "type": "number",
+      },
+      "onChange": Object {
+        "type": "func",
+      },
+      "onClick": Object {
+        "type": "func",
+      },
+      "placeholder": Object {
+        "type": "string",
+      },
+      "rows": Object {
+        "type": "number",
+      },
+      "value": Object {
+        "args": Array [
+          Array [
+            Object {
+              "type": "string",
+            },
+            Object {
+              "type": "number",
+            },
+          ],
+        ],
+        "type": "oneOfType",
+      },
+    },
+  },
   "unstable__FluidTextInput" => Object {
     "propTypes": Object {
       "className": Object {

packages/react/src/__tests__/index-test.js

@@ -229,6 +229,7 @@ describe('Carbon Components React', () => {
         "unstable_Pagination",
         "unstable_Text",
         "unstable_TextDirection",
+        "unstable__FluidTextArea",
         "unstable__FluidTextInput",
         "unstable_useContextMenu",
         "unstable_useFeatureFlag",

packages/react/src/components/FluidForm/FluidForm.stories.js

@@ -0,0 +1,84 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+
+import { withKnobs } from '@storybook/addon-knobs';
+import FluidForm from '.';
+import FluidTextInput from '../FluidTextInput';
+import FluidTextArea from '../FluidTextArea';
+import ModalWrapper from '../ModalWrapper';
+
+const additionalProps = {
+  className: 'some-class',
+  onSubmit: (e) => {
+    e.preventDefault();
+    action('FormSubmitted')(e);
+  },
+};
+
+const TextInputProps = {
+  className: 'some-class',
+  id: 'test2',
+  labelText: 'Text Input label',
+  placeholder: 'Placeholder text',
+};
+
+const TextAreaProps = {
+  className: 'some-class',
+  id: 'test3',
+  labelText: 'Text Area label',
+  placeholder: 'Placeholder text',
+};
+
+const InvalidPasswordProps = {
+  className: 'some-class',
+  id: 'test4',
+  labelText: 'Password',
+  value: '0000',
+};
+
+export default {
+  title: 'Experimental/FluidForm',
+  component: FluidForm,
+  decorators: [withKnobs],
+};
+
+export const Default = () => (
+  <>
+    <FluidForm {...additionalProps}>
+      <FluidTextInput {...TextInputProps} />
+      <FluidTextInput
+        type="password"
+        pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}"
+        {...InvalidPasswordProps}
+      />
+      <FluidTextArea {...TextAreaProps} />
+    </FluidForm>
+
+    <br />
+
+    <ModalWrapper
+      hasScrollingContent
+      buttonTriggerText="Fluid form in modal"
+      modalHeading="Modal heading"
+      modalLabel="Label"
+      handleSubmit={() => {}}
+      size="md">
+      <FluidForm {...additionalProps}>
+        <FluidTextInput {...TextInputProps} />
+        <FluidTextInput
+          type="password"
+          pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}"
+          {...InvalidPasswordProps}
+        />
+        <FluidTextArea {...TextAreaProps} />
+      </FluidForm>
+    </ModalWrapper>
+  </>
+);

packages/react/src/components/FluidTextArea/FluidTextArea.Skeleton.js

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+import { usePrefix } from '../../internal/usePrefix';
+import { FormContext } from '../FluidForm/FormContext';
+
+function FluidTextAreaSkeleton({ className, ...other }) {
+  const prefix = usePrefix();
+
+  return (
+    <FormContext.Provider value={{ isFluid: true }}>
+      <div
+        className={classnames(
+          `${prefix}--form-item ${prefix}--text-area--fluid__skeleton`,
+          className
+        )}
+        {...other}>
+        <span className={`${prefix}--label ${prefix}--skeleton`} />
+        <div className={`${prefix}--skeleton ${prefix}--text-area`} />
+      </div>
+    </FormContext.Provider>
+  );
+}
+
+FluidTextAreaSkeleton.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes.string,
+};
+
+export default FluidTextAreaSkeleton;

packages/react/src/components/FluidTextArea/FluidTextArea.js

@@ -0,0 +1,123 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+import TextArea from '../TextArea';
+import { usePrefix } from '../../internal/usePrefix';
+import { FormContext } from '../FluidForm/FormContext';
+
+function FluidTextArea({ className, ...other }) {
+  const prefix = usePrefix();
+  const classNames = classnames(`${prefix}--text-area--fluid`, className);
+
+  return (
+    <FormContext.Provider value={{ isFluid: true }}>
+      <TextArea className={classNames} {...other} />
+    </FormContext.Provider>
+  );
+}
+
+FluidTextArea.propTypes = {
+  /**
+   * Provide a custom className that is applied directly to the underlying
+   * `<textarea>` node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify the `cols` attribute for the underlying `<textarea>` node
+   */
+  cols: PropTypes.number,
+
+  /**
+   * Optionally provide the default value of the `<textarea>`
+   */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify whether the control is disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify whether to display the character counter
+   */
+  enableCounter: PropTypes.bool,
+
+  /**
+   * Provide text that is used alongside the control label for additional help
+   */
+  helperText: PropTypes.node,
+
+  /**
+   * Specify whether you want the underlying label to be visually hidden
+   */
+  hideLabel: PropTypes.bool,
+
+  /**
+   * Provide a unique identifier for the control
+   */
+  id: PropTypes.string,
+
+  /**
+   * Specify whether the control is currently invalid
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText: PropTypes.node,
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: PropTypes.node.isRequired,
+
+  /**
+   * `true` to use the light version. For use on $ui-01 backgrounds only.
+   * Don't use this to make tile background color same as container background color.
+   */
+  light: PropTypes.bool,
+
+  /**
+   * Max character count allowed for the textarea. This is needed in order for enableCounter to display
+   */
+  maxCount: PropTypes.number,
+
+  /**
+   * Optionally provide an `onChange` handler that is called whenever `<textarea>`
+   * is updated
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Optionally provide an `onClick` handler that is called whenever the
+   * `<textarea>` is clicked
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Specify the placeholder attribute for the `<textarea>`
+   */
+  placeholder: PropTypes.string,
+
+  /**
+   * Specify the rows attribute for the `<textarea>`
+   */
+  rows: PropTypes.number,
+
+  /**
+   * Provide the current value of the `<textarea>`
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+export default FluidTextArea;