fix(Password): Wrong icon for show/hide password toggle

[SoyDiego]

Fix #15826

⚠️ EDIT

You can read all my research @cetincakiroglu and decide what is the best option to follow because now I don't know what is the correct way.

This topic is a little bit confused, because:

If you see Facebook you can see the solution like this PR:

If you check Angular Material Docs too:

But If you check Material UI Core, the opposite:

And if youread the opinion of ChatGPT you can see this explanation:

When you are implementing a toggle to show or hide the password in an input, the icon should reflect the action that will be performed when clicking on it. Here is the guide for the use of the icons:

    Eye Icon:
        Usage: When the password is currently hidden.
        Purpose: Indicates that clicking will show the password.

    Eye Slashed Icon:
        Usage: When the password is currently visible.
        Purpose: Indicates that clicking will hide the password.

Problem

Solution

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
primeng	⬜️ Ignored (Inspect)	Visit Preview		Jun 11, 2024 6:46pm

[rosenthalj]

@SoyDiego

Your changes have resulted in a mismatch with the show/hide icon templates. I tried to create a pull request to your branch, but failed.

Your PR should be updated with the following changes:

Note: Your PR fixes the PrimeNG demo, but would break code that were using the show and/or hide icon templates

[SoyDiego]

@SoyDiego

Your changes have resulted in a mismatch with the show/hide icon templates. I tried to create a pull request to your branch, but failed.

Your PR should be updated with the following changes:

Note: Your PR fixes the PrimeNG demo, but would break code that were using the show and/or hide icon templates

Thanks for double check. I will add your code too. I did fast, thanks again

[SoyDiego]

@SoyDiego

Your changes have resulted in a mismatch with the show/hide icon templates. I tried to create a pull request to your branch, but failed.

Your PR should be updated with the following changes:

Note: Your PR fixes the PrimeNG demo, but would break code that were using the show and/or hide icon templates

Now I did the modifications. Could you check it again, please?

Thanks!

[SoyDiego]

code show/hide icon templates are now consistent with the Eye/EyeSlash icons

Thanks again, also I edit the description of the PR. I don't know why was giving me 207 files changed for the formatting and right now, anyone. Now I removed the previous text and only I left the important. Thanks for review :)

[SoyDiego]

I updated my description of this PR after a lot of research. I think PrimeNG Team should be decide what is the correct way because there are differents opinions

[rosenthalj]

• I have no idea what the correct solution is
• I hate to suggested this but a flag could be added as an input to this component to define the behavior
• A tooltip could be added to the component to describe the "current" state and could also inform the user that the icon can be clicked to change the state

FYI: I don't currently use this component

[sandrotonon]

IMHO the current behaviour is correct. A button always should indicate what the status (in this case the visibility) WILL BE after clicking, or what its going to do, not what its current status is.

[cetincakiroglu]

This one is a design choice I've asked our designer, and he said it depends on the company. In our choice, it refers to the state to be shown next when it is clicked.