From 2c01f9359d2c60e575eba2ebfb41a2416bbe43fa Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Thu, 17 Feb 2022 10:38:37 -0600
Subject: [PATCH 1/3] fix: add readonly styles

---
 .../components/text-input/_text-input.scss    | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/styles/scss/components/text-input/_text-input.scss b/packages/styles/scss/components/text-input/_text-input.scss
index 76b0e3044d70..bbe8ff2cb91d 100644
--- a/packages/styles/scss/components/text-input/_text-input.scss
+++ b/packages/styles/scss/components/text-input/_text-input.scss
@@ -96,7 +96,8 @@
     width: 100%;
   }
 
-  .#{$prefix}--text-input__invalid-icon {
+  .#{$prefix}--text-input__invalid-icon,
+  .#{$prefix}--text-input__readonly-icon {
     position: absolute;
     // top/transform used to center invalid icon in IE11
     top: 50%;
@@ -105,6 +106,10 @@
     transform: translateY(-50%);
   }
 
+  .#{$prefix}--text-input__invalid-icon {
+    fill: $support-01;
+  }
+
   .#{$prefix}--text-input__invalid-icon--warning {
     fill: $support-warning;
   }
@@ -175,7 +180,8 @@
   }
 
   .#{$prefix}--text-input--invalid,
-  .#{$prefix}--text-input--warning {
+  .#{$prefix}--text-input--warning,
+  .#{$prefix}--text-input-wrapper--readonly .#{$prefix}--text-input {
     padding-right: $spacing-08;
   }
 
@@ -381,6 +387,15 @@
     flex-direction: column;
   }
 
+  //-----------------------------
+  // Readonly
+  //-----------------------------
+
+  .#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper--readonly,
+  .#{$prefix}--text-input-wrapper--readonly .#{$prefix}--text-input {
+    background: transparent;
+  }
+
   // Windows HCM fix
   .#{$prefix}--text-input--password__visibility,
     // TODO: remove selector above

From 4e51d58cb9bcfa88d0440c7b186b2698bc065c77 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Thu, 17 Feb 2022 10:47:33 -0600
Subject: [PATCH 2/3] fix: styles

---
 packages/styles/scss/components/text-input/_text-input.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/styles/scss/components/text-input/_text-input.scss b/packages/styles/scss/components/text-input/_text-input.scss
index bbe8ff2cb91d..a2144eb1bb5f 100644
--- a/packages/styles/scss/components/text-input/_text-input.scss
+++ b/packages/styles/scss/components/text-input/_text-input.scss
@@ -102,12 +102,11 @@
     // top/transform used to center invalid icon in IE11
     top: 50%;
     right: $spacing-05;
-    fill: $support-error;
     transform: translateY(-50%);
   }
 
   .#{$prefix}--text-input__invalid-icon {
-    fill: $support-01;
+    fill: $support-error;
   }
 
   .#{$prefix}--text-input__invalid-icon--warning {

From 180ed539d4a573a7942d7b68ca64fb75170b8881 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Thu, 17 Feb 2022 11:17:44 -0600
Subject: [PATCH 3/3] fix: add readonly story

---
 .../components/TextInput/next/TextInput.stories.js    | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/react/src/components/TextInput/next/TextInput.stories.js b/packages/react/src/components/TextInput/next/TextInput.stories.js
index f4b634dc9fac..c9928eb9a19f 100644
--- a/packages/react/src/components/TextInput/next/TextInput.stories.js
+++ b/packages/react/src/components/TextInput/next/TextInput.stories.js
@@ -48,6 +48,17 @@ export const TogglePasswordVisibility = () => {
   );
 };
 
+export const ReadOnly = () => {
+  return (
+    <TextInput
+      labelText="Text input label"
+      helperText="Optional help text"
+      value="This is read only, you can't type more."
+      readOnly
+    />
+  );
+};
+
 export const WithLayer = () => {
   return (
     <>