fix: remove icon from readonly text input (#12382)

* fix: remove icon from readonly text input

* chore: correct merge

* chore: fix text input tests

Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: 3 people

packages/react/src/components/FluidTextInput/__tests__/FluidTextInput-test.js

@@ -284,7 +284,7 @@ describe('FluidTextInput', () => {
     it('should respect readOnly prop', () => {
       const onChange = jest.fn();
       const onClick = jest.fn();
-      const { container } = render(
+      render(
         <FluidTextInput
           id="input-1"
           labelText="FluidTextInput label"
@@ -302,12 +302,6 @@ describe('FluidTextInput', () => {
       userEvent.type(screen.getByRole('textbox'), 'x');
       expect(screen.getByRole('textbox')).not.toHaveValue('x');
       expect(onChange).toHaveBeenCalledTimes(0);
-
-      // Should display the "read-only" icon
-      const icon = container.querySelector(
-        `svg.${prefix}--text-input__readonly-icon`
-      );
-      expect(icon).toBeInTheDocument();
     });
   });
 });

packages/react/src/components/TextInput/TextInput.js

@@ -142,7 +142,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 counterClasses = classNames(`${prefix}--label`, {

packages/react/src/components/TextInput/__tests__/TextInput-test.js

@@ -295,7 +295,7 @@ describe('TextInput', () => {
     it('should respect readOnly prop', () => {
       const onChange = jest.fn();
       const onClick = jest.fn();
-      const { container } = render(
+      render(
         <TextInput
           id="input-1"
           labelText="TextInput label"
@@ -313,12 +313,6 @@ describe('TextInput', () => {
       userEvent.type(screen.getByRole('textbox'), 'x');
       expect(screen.getByRole('textbox')).not.toHaveValue('x');
       expect(onChange).toHaveBeenCalledTimes(0);
-
-      // Should display the "read-only" icon
-      const icon = container.querySelector(
-        `svg.${prefix}--text-input__readonly-icon`
-      );
-      expect(icon).toBeInTheDocument();
     });
 
     it('should not render counter with only enableCounter prop passed in', () => {

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';
 import { usePrefix } from './usePrefix';
 
 /**
@@ -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;

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;
   }