Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Toggleable password input #1159

Merged
merged 2 commits into from
Dec 11, 2023

Conversation

jonathanmsnow
Copy link
Contributor

Adds a hide/show ability through a directive that can be applied to inputs which resolves issue #462

Comment on lines +33 to +40
.medium-icon {
font-size: 2em;
}

.eye-icon {
vertical-align: middle;
}

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[non-blocking] Would be nice for these styles not to sit in the global app.scss, but it looks like directives can't apply stylesheets directly. I do see some mention of directives supporting a host property here, though https://stackoverflow.com/a/35915497/21691840


setup() {
// Create the eye icon for showing/hiding password
this.eyeIcon = this.renderer.createElement("ion-icon");
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed while testing that this needs cursor: pointer. For accessibility, it'd also be nice for this to be a button (which would solve the problem anyway). You could use the icon-only button here

@julianpoy
Copy link
Owner

Will add the cursor: pointer style to this since that's really the only issue here. Super appreciate the PR, thank you!

@julianpoy julianpoy merged commit 095b55b into julianpoy:master Dec 11, 2023
3 checks passed
@jonathanmsnow jonathanmsnow deleted the toggleable-password-input branch December 23, 2023 04:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants