feat: readonly text area

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

@@ -7604,6 +7604,9 @@ Map {
       "placeholder": Object {
         "type": "string",
       },
+      "readOnly": Object {
+        "type": "bool",
+      },
       "rows": Object {
         "type": "number",
       },

packages/react/src/components/TextArea/TextArea.js

@@ -118,6 +118,7 @@ const TextArea = React.forwardRef(function TextArea(
       aria-invalid={invalid || null}
       aria-describedby={invalid ? errorId : null}
       disabled={other.disabled}
+      readOnly={other.readOnly}
     />
   );
 
@@ -133,7 +134,9 @@ const TextArea = React.forwardRef(function TextArea(
         {counter}
       </div>
       <div
-        className={`${prefix}--text-area__wrapper`}
+        className={classNames(`${prefix}--text-area__wrapper`, {
+          [`${prefix}--text-area__wrapper--readonly`]: other.readOnly,
+        })}
         data-invalid={invalid || null}>
         {invalid && !isFluid && (
           <WarningFilled className={`${prefix}--text-area__invalid-icon`} />
@@ -239,9 +242,13 @@ TextArea.propTypes = {
   placeholder: PropTypes.string,
 
   /**
-   * Specify the rows attribute for the `<textarea>`
+   * Whether the textarea should be read-only
    */
-  rows: PropTypes.number,
+  readOnly: PropTypes.bool,
+
+  /**
+   * Specify the rows attribute for the `<textarea>`
+   */ rows: PropTypes.number,
 
   /**
    * Provide the current value of the `<textarea>`

packages/react/src/components/TextArea/__tests__/TextArea-test.js

@@ -0,0 +1,39 @@
+/**
+ * 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 TextArea from '../TextArea';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+
+describe('TextArea', () => {
+  describe('behaves as expected - Component API', () => {
+    it('should respect readOnly prop', () => {
+      const onChange = jest.fn();
+      const onClick = jest.fn();
+      render(
+        <TextArea
+          id="input-1"
+          labelText="TextArea label"
+          onClick={onClick}
+          onChange={onChange}
+          readOnly
+          value="test"
+        />
+      );
+
+      // Click events should fire
+      userEvent.click(screen.getByRole('textbox'));
+      expect(onClick).toHaveBeenCalledTimes(1);
+
+      // Change events should *not* fire
+      userEvent.type(screen.getByRole('textbox'), 'x');
+      expect(screen.getByRole('textbox')).not.toHaveValue('x');
+      expect(onChange).toHaveBeenCalledTimes(0);
+    });
+  });
+});

packages/styles/scss/components/text-area/_text-area.scss

@@ -88,6 +88,13 @@
     color: $text-disabled;
   }
 
+  //-----------------------------
+  // Readonly
+  //-----------------------------
+  .#{$prefix}--text-area__wrapper--readonly .#{$prefix}--text-area {
+    background: transparent;
+  }
+
   // V11: Possibly deprecate
   .#{$prefix}--text-area.#{$prefix}--text-area--light:disabled {
     background-color: $field-02;