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

[maradwan26]

Closes #21116

Updates the PasswordInput readOnly state to allow for the user to toggle the password visibility in both React and Web Components

Changelog

New

• Added test cases to cover this change
• Fixed an issue where the Show/Hide password tooltip would flicker when clicking the eye svg inside of the button (web components)

Changed

• Updated the logic for the state of the toggle password visibility button to only be disabled if disabled is true and exclude readOnly

Testing / Reviewing

• Go to PasswordInput stories in both React and WC
• Go to FluidPasswordInput stories in React
• Toggling the password visibility should work when readOnly is true
• Should match design spec

Note

The implementation for the WC FluidPasswordInput is still in progress, however, similarly to the React version, the readOnly state handling is covered by the base PasswordInput. I pulled down that branch and tested the changes there, and it functionally works, so I believe once that PR is merged it should be good

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

• Reviewed every line of the diff
• [ ] Updated documentation and storybook examples
• Wrote passing tests that cover this change
• Addressed any impact on accessibility (a11y)
• Tested for cross-browser consistency
• Validated that this code is ready for review and status checks should pass

[netlify]

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	38655f7
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/693c0299e2bd4500080bc3f5
😎 Deploy Preview	https://deploy-preview-21158--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[codecov]

Codecov Report

❌ Patch coverage is 69.23077% with 4 lines in your changes missing coverage. Please review.
✅ Project coverage is 92.34%. Comparing base (d424925) to head (38655f7).
⚠️ Report is 4 commits behind head on main.

Files with missing lines	Patch %	Lines
...ts/src/components/password-input/password-input.ts	66.66%	4 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #21158      +/-   ##
==========================================
- Coverage   92.34%   92.34%   -0.01%     
==========================================
  Files         530      530              
  Lines       40855    40862       +7     
  Branches     5922     5864      -58     
==========================================
+ Hits        37727    37733       +6     
- Misses       2976     2978       +2     
+ Partials      152      151       -1     

Flag	Coverage Δ
main-packages	85.71% <100.00%> (ø)
web-components	96.08% <66.66%> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	38655f7
🔍 Latest deploy log	https://app.netlify.com/projects/carbon-elements/deploys/693c029902c84e0008c5e905
😎 Deploy Preview	https://deploy-preview-21158--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	38655f7
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/693c0299e9dce900083b8197
😎 Deploy Preview	https://deploy-preview-21158--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[laurenmrice]

@maradwan26 Thanks for making this PR. It is looking good but there are just a couple things that need to be changed to match the design spec.

---

React

Default style

• In readOnly, The view icon should not get a visual color change on hover. It should always be $icon-primary, on enabled and hover states.
• The tooltip should also be using the icon button tooltip height. The alignment of the caret on the tooltip is also off and it should match how WC is doing it. The spacing between the button and the tooltip should be 4px. I have a feeling this is a problem with the icon button component in React. That can be addressed in a separate PR if it needs to be.

Fluid style

• In readOnly, The input text and dots should be $text-secondary for the fluid style.
• In readOnly, The view icon should not get a visual color change on hover. It should always be $icon-primary. This also should be the same in the enabled state.
• In the tooltip, I would just say “Hide password” and “Show password” like we do for the Default style for consistency.
• Same tooltip issue as above in the default style, but I think its a problem in the icon button component in React.

---

WC

Default style

• In readOnly, The view icon should not get a visual color change on hover. It should always be $icon-primary, on enabled and hover states.
• In the tooltip, Keep the p in "password" lowercase to match React and our content guidelines.
• The tooltip should also be using the icon button tooltip height. That can be addressed in a separate PR if it needs to be.

Like you mentioned earlier, we can review Fluid in WC when it is complete.

[maradwan26]

@laurenmrice

Applied changes! 🚀

React

Default style

• In readOnly, The view icon should not get a visual color change on hover. It should always be $icon-primary, on enabled and hover states.

Done ✅

• The tooltip should also be using the icon button tooltip height. The alignment of the caret on the tooltip is also off and it should match how WC is doing it. The spacing between the button and the tooltip should be 4px. I have a feeling this is a problem with the icon button component in React. That can be addressed in a separate PR if it needs to be.

Tooltip height and spacing is fixed.

I think alignment is fixed too since it looks the same for React and WC.

Fluid style

• In readOnly, The input text and dots should be $text-secondary for the fluid style.

Done ✅ , fixed it for fluid textinput as well

• In readOnly, The view icon should not get a visual color change on hover. It should always be $icon-primary. This also should be the same in the enabled state.
• In the tooltip, I would just say “Hide password” and “Show password” like we do for the Default style for consistency.

Done ✅

• Same tooltip issue as above in the default style, but I think its a problem in the icon button component in React.

Fixed ✅ , changes from the default passwordInput were carried over

---

WC

Default style

• In readOnly, The view icon should not get a visual color change on hover. It should always be $icon-primary, on enabled and hover states.
• In the tooltip, Keep the p in "password" lowercase to match React and our content guidelines.
• The tooltip should also be using the icon button tooltip height. That can be addressed in a separate PR if it needs to be.

Done ✅

[heloiselui]

LGTM!