fix: added readonly state variant to passwordInput

[riddhybansal]

Closes #16922

PasswordInput does not have readonly state

Changelog

New

• Added readonly state and test cases for the same

Testing / Reviewing

Check if readonly state of passwordInput is working as intented.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	5a8451e
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/66bc789279b92800085cbcdf
😎 Deploy Preview	https://deploy-preview-17031--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 site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	5a8451e
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/66bc7892438ee80009c16abd
😎 Deploy Preview	https://deploy-preview-17031--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 site configuration.

[2nikhiltom]

LGTM

[alisonjoseph]

Looks like the show/hide icon is missing styling for readOnly, I believe it should use the $icon-disabled token, and not have any hover states/cursor change.

[riddhybansal]

Looks like the show/hide icon is missing styling for readOnly, I believe it should use the $icon-disabled token, and not have any hover states/cursor change.

I thought of a same but I could see hover things in disabled state as well , thought its what designed. So do we need to use the $icon-disabled token, and not have any hover states/cursor changes for both disable and readOnly state

[riddhybansal]

Looks like the show/hide icon is missing styling for readOnly, I believe it should use the $icon-disabled token, and not have any hover states/cursor change.

I thought of a same but I could see hover things in disabled state as well , thought its what designed. So do we need to use the $icon-disabled token, and not have any hover states/cursor changes for both disable and readOnly state

Fixed for both disable and readonly state

[alisonjoseph]

I had one question about the cursor, I'm wondering if the show/hide cursor shouldn't change on hover when in readonly. @laurenmrice?

[Kritvi-bhatia17]

I had one question about the cursor, I'm wondering if the show/hide cursor shouldn't change on hover when in readonly. @laurenmrice?

Hi @alisonjoseph @riddhybansal,

I checked the readonly state for Combobox and NumberInput (which have interactive elements similar to PasswordInput) and noticed that the cursor does not change on hover.
However, @laurenmrice can confirm this for further validation.

Screen.Recording.2024-08-02.at.1.49.44.PM.mov

---

Also, a small doubt: are we planning to add the readonly state to the FluidPasswordInput as well?

[laurenmrice]

@Kritvi-bhatia17 @riddhybansal

When hovering over the eye icon button in the read-only state, the cursor should be an arrow and not a pointer. We use the pointer cursor when you can actually interact with the icon button when its no longer in the read-only state.

[Kritvi-bhatia17]

Also, a small doubt: are we planning to add the readonly state to the FluidPasswordInput as well?

Hi @riddhybansal, could you please confirm this?

[alisonjoseph]

This LGTM. Did you want to add to the fluid version also, or create a new issue?

@Kritvi-bhatia17 do we already have issues for design to add to Figma? Looks like read-only states are missing there also. 👀

[riddhybansal]

This LGTM. Did you want to add to the fluid version also, or create a new issue?

@Kritvi-bhatia17 do we already have issues for design to add to Figma? Looks like read-only states are missing there also. 👀

I guess there are missing read only states for many fluid components we can tackle them together as a list of task maybe

[laurenmrice]

Yeah, lets add the fluid in at a future date in a separate PR. Looks good to me @riddhybansal ! ⭐️