From 68a25bcf11324e980503e2a1744dc860aa24859b Mon Sep 17 00:00:00 2001
From: Robin Cussol <me@robincussol.com>
Date: Thu, 7 Sep 2023 16:33:29 +0200
Subject: [PATCH] fix(Textarea): show 'readOnly' as 'disabled' visually

This commit ensures the same background color and text color for
the 'disabled' state apply to Textarea in 'readOnly' mode.

We keep the normal cursor in 'readOnly' (as it's intended the
user should be able to interact with the textarea and select the
value for example).

Slack: https://skypicker.slack.com/archives/C7T7QG7M5/p1693824510622729

Jira: FEPLT-1737
---
 .../orbit-components/src/Textarea/Textarea.stories.tsx |  2 ++
 packages/orbit-components/src/Textarea/index.tsx       | 10 ++++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/orbit-components/src/Textarea/Textarea.stories.tsx b/packages/orbit-components/src/Textarea/Textarea.stories.tsx
index 22a2243aa4..16c9add1ac 100644
--- a/packages/orbit-components/src/Textarea/Textarea.stories.tsx
+++ b/packages/orbit-components/src/Textarea/Textarea.stories.tsx
@@ -108,6 +108,7 @@ export const Playground = () => {
   const help = text("Help", "");
   const error = text("Error", "Something went wrong.");
   const disabled = boolean("Disabled", false);
+  const readOnly = boolean("Read-only", false);
   const resize = select("resize", Object.values(RESIZE_OPTIONS), RESIZE_OPTIONS.VERTICAL);
   const maxLength = number("maxLength", Infinity);
   const dataTest = text("dataTest", "test");
@@ -127,6 +128,7 @@ export const Playground = () => {
       rows={rows}
       required={required}
       disabled={disabled}
+      readOnly={readOnly}
       maxLength={maxLength}
       resize={resize}
       onChange={action("change")}
diff --git a/packages/orbit-components/src/Textarea/index.tsx b/packages/orbit-components/src/Textarea/index.tsx
index b8521778a1..0e10ae149f 100644
--- a/packages/orbit-components/src/Textarea/index.tsx
+++ b/packages/orbit-components/src/Textarea/index.tsx
@@ -74,7 +74,7 @@ interface StyledTextAreaProps extends Partial<Props> {
 }
 
 const StyledTextArea = styled.textarea<StyledTextAreaProps>`
-  ${({ theme, resize, fullHeight, error, disabled }) => css`
+  ${({ theme, resize, fullHeight, error, disabled, readOnly }) => css`
     appearance: none;
     box-sizing: border-box;
     display: block;
@@ -83,10 +83,12 @@ const StyledTextArea = styled.textarea<StyledTextAreaProps>`
     padding: ${getPadding};
     box-shadow: inset 0 0 0 ${theme.orbit.borderWidthInput}
       ${error ? theme.orbit.borderColorInputError : theme.orbit.borderColorInput};
-    background-color: ${disabled
+    background-color: ${disabled || readOnly
       ? theme.orbit.backgroundInputDisabled
       : theme.orbit.backgroundInput};
-    color: ${disabled ? theme.orbit.colorTextInputDisabled : theme.orbit.colorTextInput};
+    color: ${disabled || readOnly
+      ? theme.orbit.colorTextInputDisabled
+      : theme.orbit.colorTextInput};
     font-size: ${getFontSize};
     line-height: ${getLineHeight};
     cursor: ${disabled ? "not-allowed" : "text"};
@@ -110,7 +112,7 @@ const StyledTextArea = styled.textarea<StyledTextAreaProps>`
     }
 
     &:hover {
-      box-shadow: ${!disabled &&
+      box-shadow: ${!(disabled || readOnly) &&
       css`inset 0 0 0 ${theme.orbit.borderWidthInput} ${
         error ? theme.orbit.borderColorInputErrorHover : theme.orbit.borderColorInputHover
       }`};