feat: readonly text area (#12388)

* feat: readonly text input

* chore: update TextArea snapshot

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

Co-authored-by: Alison Joseph <alisonejoseph@Gmail.com>

* fix: file formatting

Co-authored-by: Alison Joseph <alisonejoseph@Gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

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

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

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

@@ -120,6 +120,7 @@ const TextArea = React.forwardRef(function TextArea(
       aria-invalid={invalid || null}
       aria-describedby={invalid ? errorId : null}
       disabled={other.disabled}
+      readOnly={other.readOnly}
       style={
         other.cols
           ? {}
@@ -142,7 +143,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`} />
@@ -250,6 +253,11 @@ TextArea.propTypes = {
    */
   placeholder: PropTypes.string,
 
+  /**
+   * Whether the textarea should be read-only
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * Specify the rows attribute for 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

@@ -98,6 +98,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;