Add "Show/Hide" toggle button to Password input

Idea The Password field could have an extra button to control the isPasswordVisible prop.

Proposed Solution This button would be displayed similar to the badge, but would stay inline with the Label and control the visibility of the password inside the component, as a toggle.

Example of the intended design:

Alternatives that have been discussed It has been discussed wether the badge prop should be used for this, but the UI is slightly different (it’s not inline) and this use case may be sufficiently relevant for the Password field to have this special prop.

[jonnybel]

Do we really need that? Couldn’t it be an internal message to UIKit? Do we ever want to change the labels on that actually from the outside. One could argue that’s a potential source of inconsistencies even.

I was thinking about translations, but I’m now aware that the UIKit already has a better way to deal with that, so no need for such a prop!

[tdeekens]

But I think we could drop the isPasswordVisible prop

Agreed. Managing this state internally makes sense. We only have to make sure that we will not have a case where we need the state to be controlled. That’s down to design to reason about.

The badges will be deprecated in the future for all fields (based also on feedback from design)

Okay, well that surprises me given that we don’t have them for too long. But well.

Instead of it, the only different prop would be an object with the two strings for the text of the On/Off

Do we really need that? Couldn’t it be an internal message to UIKit? Do we ever want to change the labels on that actually from the outside. One could argue that’s a potential source of inconsistencies even.

The PasswordField already has a different API: it’s the only one with the isPasswordVisible prop.

Yeah, you’re right about it.