fix: added readonly state variant to passwordInput (#17031)

* fix: added readonly state variant to passwordInput * fix: disabled toggle button for readonly * Update packages/react/src/components/TextInput/PasswordInput.tsx Co-authored-by: Alison Joseph <alisonejoseph@Gmail.com> * fix: icon for disable and readonly state * fix: cursor --------- Co-authored-by: Alison Joseph <alisonejoseph@Gmail.com>
carbon-design-system · Aug 14, 2024 · 695ef81 · 695ef81
1 parent 185c4cf
commit 695ef81
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 1 deletion.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -6190,6 +6190,9 @@ Map {
       "placeholder": Object {
         "type": "string",
       },
+      "readOnly": Object {
+        "type": "bool",
+      },
       "showPasswordLabel": Object {
         "type": "string",
       },
@@ -8848,6 +8851,9 @@ Map {
         "placeholder": Object {
           "type": "string",
         },
+        "readOnly": Object {
+          "type": "bool",
+        },
         "showPasswordLabel": Object {
           "type": "string",
         },

diff --git a/packages/react/src/components/TextInput/PasswordInput.tsx b/packages/react/src/components/TextInput/PasswordInput.tsx
@@ -242,6 +242,7 @@ const PasswordInput = React.forwardRef(function PasswordInput(
     placeholder,
     type: inputType,
     className: textInputClasses,
+    readOnly,
     ref,
     ...rest,
   };
@@ -250,6 +251,7 @@ const PasswordInput = React.forwardRef(function PasswordInput(
     `${prefix}--text-input-wrapper`,
     `${prefix}--password-input-wrapper`,
     {
+      [`${prefix}--text-input-wrapper--readonly`]: readOnly,
       [`${prefix}--text-input-wrapper--light`]: light,
       [`${prefix}--text-input-wrapper--inline`]: inline,
       [`${prefix}--text-input--fluid`]: isFluid,
@@ -362,7 +364,7 @@ const PasswordInput = React.forwardRef(function PasswordInput(
         <button
           type="button"
           className={passwordVisibilityToggleClasses}
-          disabled={disabled}
+          disabled={disabled || readOnly}
           onClick={handleTogglePasswordVisibility}>
           {passwordVisibilityIcon}
         </button>
@@ -448,6 +450,11 @@ PasswordInput.propTypes = {
    */
   invalid: PropTypes.bool,
 
+  /**
+   * Whether the PasswordInput should be read-only
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * Provide the text that is displayed when the control is in an invalid state
    */

diff --git a/packages/react/src/components/TextInput/__tests__/PasswordInput-test.js b/packages/react/src/components/TextInput/__tests__/PasswordInput-test.js
@@ -363,5 +363,45 @@ describe('PasswordInput', () => {
         screen.getByLabelText('PasswordInput label')
       );
     });
+
+    it('should render input as read-only when readOnly is true', () => {
+      const { getByPlaceholderText } = render(
+        <PasswordInput
+          id="input-1"
+          labelText="PasswordInput label"
+          placeholder="Enter password"
+          readOnly
+        />
+      );
+      const inputElement = getByPlaceholderText('Enter password');
+      expect(inputElement).toHaveAttribute('readonly');
+    });
+
+    it('should disable hide toggle button when readOnly is true', () => {
+      const { getByRole } = render(
+        <PasswordInput
+          id="input-1"
+          labelText="PasswordInput label"
+          placeholder="Enter password"
+          readOnly
+        />
+      );
+      const toggleButton = getByRole('button');
+      expect(toggleButton).toBeDisabled();
+    });
+
+    it('should not allow input change when readOnly is true', () => {
+      const { getByPlaceholderText } = render(
+        <PasswordInput
+          id="input-1"
+          labelText="PasswordInput label"
+          placeholder="Enter password"
+          readOnly
+        />
+      );
+      const inputElement = getByPlaceholderText('Enter password');
+      userEvent.type(inputElement, 'newpassword');
+      expect(inputElement.value).toBe('');
+    });
   });
 });
diff --git a/packages/styles/scss/components/text-input/_text-input.scss b/packages/styles/scss/components/text-input/_text-input.scss
@@ -206,6 +206,22 @@
     }
   }
 
+  .#{$prefix}--text-input--password__visibility__toggle:disabled.#{$prefix}--tooltip__trigger {
+    svg {
+      fill: $icon-disabled;
+    }
+
+    cursor: default;
+  }
+
+  .#{$prefix}--text-input--password__visibility__toggle:disabled.#{$prefix}--tooltip__trigger:hover {
+    svg {
+      fill: $icon-disabled;
+    }
+
+    cursor: default;
+  }
+
   .#{$prefix}--text-input__counter-alert {
     position: absolute;
     overflow: hidden;
@@ -354,6 +370,7 @@
     > .#{$prefix}--text-input--warning:focus {
     outline: none;
   }
+
   //-----------------------------
   // Inline Text Input
   //-----------------------------