fix: remove icon from readonly text input

carbon-design-system · Oct 24, 2022 · 4a0a4ff · 4a0a4ff
1 parent 3eed88a
commit 4a0a4ff
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 32 deletions.
diff --git a/packages/react/src/components/TextInput/TextInput.js b/packages/react/src/components/TextInput/TextInput.js
@@ -128,7 +128,6 @@ const TextInput = React.forwardRef(function TextInput(
     [`${prefix}--text-input__invalid-icon`]:
       normalizedProps.invalid || normalizedProps.warn,
     [`${prefix}--text-input__invalid-icon--warning`]: normalizedProps.warn,
-    [`${prefix}--text-input__readonly-icon`]: readOnly,
   });
 
   const label = labelText ? (

diff --git a/packages/react/src/internal/useNormalizedInputProps.js b/packages/react/src/internal/useNormalizedInputProps.js
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { WarningFilled, WarningAltFilled, EditOff } from '@carbon/icons-react';
+import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 
 const prefix = 'cds';
 
@@ -65,28 +65,24 @@ export function useNormalizedInputProps({
     helperId: `${id}-helper-text`,
   };
 
-  if (readOnly) {
-    normalizedProps.icon = EditOff;
-  } else {
-    if (normalizedProps.invalid) {
-      normalizedProps.icon = WarningFilled;
-      normalizedProps.validation = (
-        <div
-          className={`${prefix}--form-requirement`}
-          id={normalizedProps.invalidId}>
-          {invalidText}
-        </div>
-      );
-    } else if (normalizedProps.warn) {
-      normalizedProps.icon = WarningAltFilled;
-      normalizedProps.validation = (
-        <div
-          className={`${prefix}--form-requirement`}
-          id={normalizedProps.warnId}>
-          {warnText}
-        </div>
-      );
-    }
+  if (normalizedProps.invalid) {
+    normalizedProps.icon = WarningFilled;
+    normalizedProps.validation = (
+      <div
+        className={`${prefix}--form-requirement`}
+        id={normalizedProps.invalidId}>
+        {invalidText}
+      </div>
+    );
+  } else if (normalizedProps.warn) {
+    normalizedProps.icon = WarningAltFilled;
+    normalizedProps.validation = (
+      <div
+        className={`${prefix}--form-requirement`}
+        id={normalizedProps.warnId}>
+        {warnText}
+      </div>
+    );
   }
 
   return normalizedProps;

diff --git a/packages/styles/scss/components/text-input/_text-input.scss b/packages/styles/scss/components/text-input/_text-input.scss
@@ -94,17 +94,13 @@
     width: 100%;
   }
 
-  .#{$prefix}--text-input__invalid-icon,
-  .#{$prefix}--text-input__readonly-icon {
+  .#{$prefix}--text-input__invalid-icon {
     position: absolute;
     // top/transform used to center invalid icon in IE11
     top: 50%;
     right: $spacing-05;
-    transform: translateY(-50%);
-  }
-
-  .#{$prefix}--text-input__invalid-icon {
     fill: $support-error;
+    transform: translateY(-50%);
   }
 
   .#{$prefix}--text-input__invalid-icon--warning {
@@ -175,8 +171,7 @@
   }
 
   .#{$prefix}--text-input--invalid,
-  .#{$prefix}--text-input--warning,
-  .#{$prefix}--text-input-wrapper--readonly .#{$prefix}--text-input {
+  .#{$prefix}--text-input--warning {
     padding-right: $spacing-08;
   }