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.

Sign up for GitHub

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

Jump to bottom

fix(kinput): add show-masking-toggle prop [KHCP-13466] #2448

Merged
merged 8 commits into from
Oct 11, 2024
Merged

fix(kinput): add show-masking-toggle prop [KHCP-13466] #2448

merged 8 commits into from
Oct 11, 2024

Conversation

portikM
Copy link
Member

@portikM portikM commented Oct 9, 2024 •
edited
Loading

Summary

Addresses: https://konghq.atlassian.net/browse/KHCP-13466

Add showMaskingToggle prop which allows toggling masking on and off when type="password"

Screenshot 2024-10-10 at 11 20 36 AM
Screenshot 2024-10-10 at 11 20 24 AM

@portikM portikM self-assigned this Oct 9, 2024
@netlify Netlify
Copy link

netlify bot commented Oct 9, 2024 •
edited
Loading

✅ Deploy Preview for kongponents-sandbox ready!

Name Link
🔨 Latest commit 72b00c4
🔍 Latest deploy log https://app.netlify.com/sites/kongponents-sandbox/deploys/6709303aab82d600086a63d9
😎 Deploy Preview https://deploy-preview-2448--kongponents-sandbox.netlify.app
📱 Preview on mobile
Toggle QR Code...

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 Netlify
Copy link

netlify bot commented Oct 9, 2024 •
edited
Loading

✅ Deploy Preview for kongponents ready!

Name Link
🔨 Latest commit 72b00c4
🔍 Latest deploy log https://app.netlify.com/sites/kongponents/deploys/6709303ac48c3700084c9cb3
😎 Deploy Preview https://deploy-preview-2448--kongponents.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@portikM portikM marked this pull request as ready for review October 10, 2024 15:22
@portikM portikM requested a review from a team as a code owner October 10, 2024 15:22
adamdehaven
adamdehaven reviewed Oct 10, 2024
View reviewed changes
docs/components/input.md Outdated
@@ -121,6 +121,28 @@ You may also specify a native `maxlength` attribute on the KInput to limit the n
```
:::

### showMaskingToggle
Copy link
Member

Choose a reason for hiding this comment

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

suggestion: rename prop to showPasswordMaskToggle

Copy link
Member Author

Choose a reason for hiding this comment

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

Done

docs/components/input.md Outdated Show resolved Hide resolved
src/components/KInput/KInput.cy.ts Outdated Show resolved Hide resolved
src/components/KInput/KInput.vue Outdated Show resolved Hide resolved
Justineo
Justineo reviewed Oct 10, 2024
View reviewed changes
Copy link
Contributor

@Justineo Justineo left a comment •
edited
Loading

Choose a reason for hiding this comment

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

We may want to turn off the built-in password reveal for Edge in case its toggle button overlaps with ours. (Edge has a strategy that only shows the toggle button if you start typing from nothing.)

image

https://learn.microsoft.com/en-us/microsoft-edge/web-platform/password-reveal#remove-the-password-reveal-control

@Justineo
Copy link
Contributor

And long text is overlapping with the button.

image

portikM and others added 2 commits October 10, 2024 16:41
@portikM @adamdehaven
fix: apply pr feedback
1d41928 
Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>
@portikM
fix: address pr feedback
85a2906
Justineo
Justineo reviewed Oct 11, 2024
View reviewed changes
src/components/KInput/KInput.vue
<VisibilityOffIcon
v-else
decorative
/>
Copy link
Contributor

Choose a reason for hiding this comment

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

Another question: should the icon reflect the current status or action? Current implementation is opposite to our login page's password input:

image

Copy link
Member Author

Choose a reason for hiding this comment

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

Oh good catch -- I looked at some other website to look up how they handle that but aligning with our login page makes more sense. Fixed.

@portikM
Copy link
Member Author

portikM commented Oct 11, 2024

We may want to turn off the built-in password reveal for Edge in case its toggle button overlaps with ours. (Edge has a strategy that only shows the toggle button if you start typing from nothing.)

image https://learn.microsoft.com/en-us/microsoft-edge/web-platform/password-reveal#remove-the-password-reveal-control

Fixed

@portikM
Copy link
Member Author

portikM commented Oct 11, 2024

And long text is overlapping with the button.

image

Fixed

@portikM portikM enabled auto-merge (squash) October 11, 2024 14:03
Justineo
Justineo approved these changes Oct 11, 2024
View reviewed changes
Copy link
Contributor

@Justineo Justineo left a comment

Choose a reason for hiding this comment

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

LGTM 👍

@portikM portikM merged commit 0c876d0 into main Oct 11, 2024
11 checks passed
@portikM portikM deleted the fix/khcp-13466-kinput-masking-value branch October 11, 2024 14:37
kongponents-bot pushed a commit that referenced this pull request Oct 11, 2024
@semantic-release-bot
chore(release): 9.11.1 [skip ci]
2d369d5 
## [9.11.1](v9.11.0...v9.11.1) (2024-10-11)

### Bug Fixes

* **kinput:** add show-masking-toggle prop [KHCP-13466] ([#2448](#2448)) ([0c876d0](0c876d0))
@kongponents-bot
Copy link
Collaborator

🎉 This PR is included in version 9.11.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@Leopoldthecoder Leopoldthecoder mentioned this pull request Oct 15, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@adamdehaven adamdehaven adamdehaven approved these changes

@Justineo Justineo Justineo approved these changes

Assignees

@portikM portikM

Labels
released
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@portikM @Justineo @kongponents-bot @adamdehaven