From 5c1f032c0d17d99c9eb6e581e90d97f43b3d4e6d Mon Sep 17 00:00:00 2001
From: Lee Chase <lee.chase@uk.ibm.com>
Date: Tue, 25 Oct 2022 15:16:57 +0100
Subject: [PATCH 1/4] feat: readonly text input

---
 .../react/src/components/TextArea/TextArea.js | 13 +++++--
 .../TextArea/__tests__/TextArea-test.js       | 39 +++++++++++++++++++
 .../scss/components/text-area/_text-area.scss |  7 ++++
 3 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 packages/react/src/components/TextArea/__tests__/TextArea-test.js

diff --git a/packages/react/src/components/TextArea/TextArea.js b/packages/react/src/components/TextArea/TextArea.js
index 314e42adcd39..d17b0315d1bd 100644
--- a/packages/react/src/components/TextArea/TextArea.js
+++ b/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>`
diff --git a/packages/react/src/components/TextArea/__tests__/TextArea-test.js b/packages/react/src/components/TextArea/__tests__/TextArea-test.js
new file mode 100644
index 000000000000..a584d05d2212
--- /dev/null
+++ b/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);
+    });
+  });
+});
diff --git a/packages/styles/scss/components/text-area/_text-area.scss b/packages/styles/scss/components/text-area/_text-area.scss
index 8e9c6c3d0351..f20fc17a7b5c 100644
--- a/packages/styles/scss/components/text-area/_text-area.scss
+++ b/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;

From 1637723b1583d127613287c2237f44d542d0294f Mon Sep 17 00:00:00 2001
From: Lee Chase <lee.chase@uk.ibm.com>
Date: Tue, 25 Oct 2022 17:01:26 +0100
Subject: [PATCH 2/4] chore: update TextArea snapshot

---
 packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 776d94d41fb1..bedd5db77f92 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/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",
       },

From bd434dc846c8b40adba6c5a433d218be57ff002b Mon Sep 17 00:00:00 2001
From: Lee Chase <leechase@live.com>
Date: Fri, 28 Oct 2022 10:13:11 +0100
Subject: [PATCH 3/4] Update packages/react/src/components/TextArea/TextArea.js

Co-authored-by: Alison Joseph <alisonejoseph@Gmail.com>
---
 packages/react/src/components/TextArea/TextArea.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/TextArea/TextArea.js b/packages/react/src/components/TextArea/TextArea.js
index d17b0315d1bd..a682b9ad6021 100644
--- a/packages/react/src/components/TextArea/TextArea.js
+++ b/packages/react/src/components/TextArea/TextArea.js
@@ -248,7 +248,8 @@ TextArea.propTypes = {
 
   /**
    * Specify the rows attribute for the `<textarea>`
-   */ rows: PropTypes.number,
+   */ 
+   rows: PropTypes.number,
 
   /**
    * Provide the current value of the `<textarea>`

From 0fa1c4fa44d76489e11c8ed1dcdf22c39babe0a5 Mon Sep 17 00:00:00 2001
From: Lee Chase <lee.chase@uk.ibm.com>
Date: Tue, 1 Nov 2022 09:55:10 +0000
Subject: [PATCH 4/4] fix: file formatting

---
 packages/react/src/components/TextArea/TextArea.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/TextArea/TextArea.js b/packages/react/src/components/TextArea/TextArea.js
index a682b9ad6021..a91ce1a075cb 100644
--- a/packages/react/src/components/TextArea/TextArea.js
+++ b/packages/react/src/components/TextArea/TextArea.js
@@ -248,8 +248,8 @@ TextArea.propTypes = {
 
   /**
    * Specify the rows attribute for the `<textarea>`
-   */ 
-   rows: PropTypes.number,
+   */
+  rows: PropTypes.number,
 
   /**
    * Provide the current value of the `<textarea>`