fix(styles): add readonly text-input styles (#10778)

* fix: add readonly styles * fix: styles * fix: add readonly story Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Feb 23, 2022 · f711831 · f711831
1 parent 8c5e1dc
commit f711831
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git 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 (
     <>

diff --git a/packages/styles/scss/components/text-input/_text-input.scss b/packages/styles/scss/components/text-input/_text-input.scss
@@ -96,15 +96,19 @@
     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%;
     right: $spacing-05;
-    fill: $support-error;
     transform: translateY(-50%);
   }
 
+  .#{$prefix}--text-input__invalid-icon {
+    fill: $support-error;
+  }
+
   .#{$prefix}--text-input__invalid-icon--warning {
     fill: $support-warning;
   }
@@ -175,7 +179,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 +386,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