feat(password-input): allow toggling password visibility when readonly is true

packages/react/src/components/FluidTextInput/FluidPasswordInput.stories.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -38,8 +38,8 @@ export const Default = (args) => (
 Default.args = {
   defaultWidth: 300,
   placeholder: 'Placeholder text',
-  showPasswordLabel: 'Show password label',
-  hidePasswordLabel: 'Hide password label',
+  showPasswordLabel: 'Show password',
+  hidePasswordLabel: 'Hide password',
   onTogglePasswordVisibility: true,
   invalid: false,
   invalidText:

packages/react/src/components/TextInput/PasswordInput.tsx

@@ -323,6 +323,11 @@ const PasswordInput = React.forwardRef(
       }
     );
 
+    const tooltipClasses = classNames(
+      `${prefix}--toggle-password-tooltip`,
+      `${prefix}--icon-tooltip`
+    );
+
     let align: PopoverAlignment | undefined = undefined;
 
     if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {
@@ -370,12 +375,12 @@ const PasswordInput = React.forwardRef(
 
         <Tooltip
           align={align}
-          className={`${prefix}--toggle-password-tooltip`}
+          className={tooltipClasses}
           label={passwordIsVisible ? hidePasswordLabel : showPasswordLabel}>
           <button
             type="button"
             className={passwordVisibilityToggleClasses}
-            disabled={disabled || readOnly}
+            disabled={disabled}
             onClick={handleTogglePasswordVisibility}>
             {passwordVisibilityIcon}
           </button>

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

@@ -377,7 +377,7 @@ describe('PasswordInput', () => {
       expect(inputElement).toHaveAttribute('readonly');
     });
 
-    it('should disable hide toggle button when readOnly is true', () => {
+    it('should not disable hide toggle button when readOnly is true', () => {
       const { getByRole } = render(
         <PasswordInput
           id="input-1"
@@ -387,7 +387,25 @@ describe('PasswordInput', () => {
         />
       );
       const toggleButton = getByRole('button');
-      expect(toggleButton).toBeDisabled();
+      expect(toggleButton).not.toBeDisabled();
+    });
+
+    it('should allow toggling password visibility when readOnly is true', async () => {
+      render(
+        <PasswordInput
+          id="input-1"
+          labelText="TextInput label"
+          hidePasswordLabel="Hide Password"
+          showPasswordLabel="Show Password"
+          readOnly
+        />
+      );
+
+      await userEvent.click(screen.getByRole('button'));
+      expect(screen.getByText('Hide Password')).toBeInTheDocument();
+
+      await userEvent.click(screen.getByRole('button'));
+      expect(screen.getByText('Show Password')).toBeInTheDocument();
     });
 
     it('should not allow input change when readOnly is true', () => {

packages/styles/scss/components/fluid-text-input/_fluid-text-input.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2023
+// Copyright IBM Corp. 2018, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -49,6 +49,11 @@
       inset-inline-start: auto;
     }
   }
+  .#{$prefix}--text-input--fluid.#{$prefix}--text-input-wrapper--readonly
+    .#{$prefix}--text-input__field-wrapper
+    .#{$prefix}--text-input {
+    color: $text-secondary;
+  }
 
   .#{$prefix}--text-input--fluid .#{$prefix}--label::-webkit-scrollbar,
   .#{$prefix}--text-input--fluid

packages/styles/scss/components/text-input/_text-input.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2023
+// Copyright IBM Corp. 2016, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -152,21 +152,13 @@
 
   .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger
     svg {
-    fill: $icon-secondary;
-    transition: fill $duration-fast-01 motion(standard, productive);
+    fill: $icon-primary;
   }
 
   .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:focus {
     @include focus-outline('outline');
   }
 
-  .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:hover
-    svg,
-  .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:focus
-    svg {
-    fill: $icon-primary;
-  }
-
   .#{$prefix}--text-input--invalid,
   .#{$prefix}--text-input--warning {
     padding-inline-end: $spacing-08;

packages/web-components/src/components/password-input/__tests__/password-input-test.js

@@ -179,14 +179,34 @@ describe('cds-password-input', () => {
     expect(input.readOnly).to.be.true;
   });
 
-  it('should disable hide/show password toggle button when readonly is true', async () => {
+  it('should not disable hide/show password toggle button when readonly is true', async () => {
     const el = await fixture(html`
       <cds-password-input readonly></cds-password-input>
     `);
     await el.updateComplete;
 
     const toggleButton = el.shadowRoot.querySelector('button[type="button"]');
-    expect(toggleButton.disabled).to.be.true;
+    expect(toggleButton.disabled).to.be.false;
+  });
+
+  it('should allow toggling password visibility when readonly is true', async () => {
+    const el = await fixture(html`
+      <cds-password-input
+        hide-password-label="Hide Password"
+        show-password-label="Show Password"></cds-password-input>
+    `);
+    const btn = el.shadowRoot.querySelector('button');
+    const tooltipContent = el.shadowRoot.querySelector(
+      'cds-tooltip-content#content'
+    );
+
+    btn.click();
+    await el.updateComplete;
+    expect(tooltipContent.textContent.trim()).to.equal('Hide Password');
+
+    btn.click();
+    await el.updateComplete;
+    expect(tooltipContent.textContent.trim()).to.equal('Show Password');
   });
 
   it('should not allow input change when readOnly is true', async () => {

packages/web-components/src/components/password-input/password-input.scss

@@ -38,6 +38,27 @@ $css--plex: true !default;
   ::slotted(#{$prefix}-slug:not([revert-active])) {
     transform: translateY(-50%);
   }
+
+  #{$prefix}-tooltip::part(popover-container) {
+    block-size: 100%;
+    inline-size: 100%;
+  }
+
+  .#{$prefix}--btn--icon-only {
+    border: none;
+    background-color: transparent;
+    block-size: 100%;
+    cursor: pointer;
+    inline-size: 100%;
+
+    &:focus {
+      @include focus-outline('outline');
+    }
+  }
+
+  .#{$prefix}--text-input--password__visibility__toggle svg {
+    pointer-events: none;
+  }
 }
 
 :host(#{$prefix}-password-input[warn]),
@@ -56,20 +77,3 @@ $css--plex: true !default;
     position: relative;
   }
 }
-
-#{$prefix}-tooltip::part(popover-container) {
-  block-size: 100%;
-  inline-size: 100%;
-}
-
-.#{$prefix}--btn--icon-only {
-  border: none;
-  background-color: transparent;
-  block-size: 100%;
-  cursor: pointer;
-  inline-size: 100%;
-
-  &:focus {
-    @include focus-outline('outline');
-  }
-}

packages/web-components/src/components/password-input/password-input.stories.ts

@@ -47,14 +47,14 @@ const args = {
   disabled: false,
   helperText: 'Optional help text',
   hideLabel: false,
-  hidePasswordLabel: 'Hide Password',
+  hidePasswordLabel: 'Hide password',
   inline: false,
   invalid: false,
   invalidText: 'Error message goes here',
   labelText: 'Text input label',
   placeholder: 'Placeholder text',
   readonly: false,
-  showPasswordLabel: 'Show Password',
+  showPasswordLabel: 'Show password',
   size: INPUT_SIZE.MEDIUM,
   tooltipAlignment: INPUT_TOOLTIP_ALIGNMENT.END,
   tooltipPosition: INPUT_TOOLTIP_DIRECTION.BOTTOM,

packages/web-components/src/components/password-input/password-input.ts

@@ -108,7 +108,7 @@ class CDSPasswordInput extends CDSTextInput {
    * Handles password visibility toggle button click
    */
   private handleTogglePasswordVisibility() {
-    if (this.disabled || this.readonly) return;
+    if (this.disabled) return;
     this.type =
       this.type === INPUT_TYPE.PASSWORD ? INPUT_TYPE.TEXT : INPUT_TYPE.PASSWORD;
   }
@@ -295,9 +295,9 @@ class CDSPasswordInput extends CDSTextInput {
             <cds-tooltip
               align="${align}"
               class="${passwordVisibilityTooltipClasses}"
-              ?disabled="${normalizedProps.disabled || readonly}">
+              ?disabled="${normalizedProps.disabled}">
               <button
-                ?disabled="${normalizedProps.disabled || readonly}"
+                ?disabled="${normalizedProps.disabled}"
                 type="button"
                 role="button"
                 class="${passwordVisibilityButtonClasses}"
@@ -307,7 +307,7 @@ class CDSPasswordInput extends CDSTextInput {
               </button>
               <cds-tooltip-content
                 id="content"
-                ?hidden="${normalizedProps.disabled || readonly}">
+                ?hidden="${normalizedProps.disabled}">
                 ${passwordIsVisible
                   ? this.hidePasswordLabel
                   : this.showPasswordLabel}
@@ -326,7 +326,14 @@ class CDSPasswordInput extends CDSTextInput {
       </div>
     `;
   }
-
+  firstUpdated() {
+    this.updateComplete.then(() => {
+      this.shadowRoot
+        ?.querySelector(`${prefix}-tooltip`)
+        ?.shadowRoot?.querySelector(`.${prefix}--tooltip`)
+        ?.classList.add(`${prefix}--icon-tooltip`);
+    });
+  }
   /**
    * A selector that will return the slug item.
    *