[EuiFieldPassword] Support toggling of obfuscation by cchaos · Pull Request #3751 · elastic/eui

cchaos · 2020-07-15T20:49:44Z

Fixes #3153

Based on guidance mentioned in the issue and this reference, the easiest way to support is with a button icon that changes the input type from password to text.

Therefore, this PR simply adds a new prop called type: 'password' | 'text' | 'dual'. The default being 'password.'

The 'text' option is simply there to allow consumers to handle the text masking manually from outside of the component. The 'dual' option adds an EuiButtonIcon with eye/eyeClosed icons to the append of the form layout which simply toggles the type from 'password' to 'text'.

Checklist

kibanamachine · 2020-07-15T21:16:06Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3751/

cchaos · 2020-07-16T15:05:13Z

Currently just waiting on #3749

- Added props `type` and `canToggleVisibility`

…tagrid example Unnecessary to have a custom z-index as the default is much higher than the supplied one.

kibanamachine · 2020-07-21T15:47:52Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3751/

cchaos · 2020-07-21T15:52:39Z

Dependency merged, opening this up for review.

cchaos · 2020-07-21T15:53:40Z

@myasonik Adding you as a reviewer, but always as optional.

myasonik

Looked good to me with a quick pass just with keyboard and VO+ChromiEdge. Didn't go deep on it though.

Will ask that someone proof this in Windows though! I'm like 80% certain that Windows adds its own reveal button to password fields so I'd be curious to see how these interact.

cchaos · 2020-07-21T16:42:51Z

Will ask that someone proof this in Windows though! I'm like 80% certain that Windows adds its own reveal button to password fields so I'd be curious to see how these interact.

Hrrmph. I'll do a little research.

cchaos · 2020-07-21T16:45:49Z

The only thing I could find was this. https://developer.mozilla.org/en-US/docs/Archive/Web/CSS/::-ms-reveal And that box makes me side-eye implementing it...

myasonik · 2020-07-21T16:57:18Z

🤦 I'm having a foggy-brain day... I thought it existed because I saw it moments ago on ChromiEdge. And I just verified it the same on my Windows machine.

Can we hide the browser one with ::ms-reveal { display: none; }? Yours seems to be an improvement on it anyways because I couldn't find a way to navigate to it by keyboard and could only toggle it with my mouse.

cchaos · 2020-07-21T17:02:57Z

I could, just a bit wary of actually using it based on the link I mentioned above and the big ole warning box wrapped around the whole thing

kibanamachine · 2020-07-21T17:34:59Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3751/

thompsongl · 2020-07-21T23:46:23Z

That warning box is something else. I use MDN docs all the time and have never seen that style 😄

Do not use it on production sites facing the Web: it will not work for every user.

This, however, makes me think there may not be any severe effects for our case as we're not relying on it for anything beyond a visual experience. Worst case is that a user sees both. Not great, but it doesn't seem dangerous. Thoughts?

cchaos · 2020-07-22T14:23:21Z

Yeah I think so long as we're not relying on it for every user, and I'll only remove it if we're providing the custom one.

kibanamachine · 2020-07-22T14:57:29Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3751/

thompsongl

I formalized the multiple ref thing you had. There's another open PR with the same pattern, so I made a hook for it: cchaos#35

src-docs/src/views/datagrid/styling.js

elizabetdev

Tested in FF, Chrome, and Safari and LGTM! 🎉

I just noticed that in Safari the placeholder is not vertically centered. But this is happening in all input fields:

cchaos · 2020-07-23T16:27:25Z

I just noticed that in Safari the placeholder is not vertically centered. But this is happening in all input fields:

Can you make an issue?

useCombinedRefs

kibanamachine · 2020-07-23T16:49:42Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3751/

thompsongl · 2020-07-27T15:16:27Z

I think if you use the /* */ format it will show up in editor hints, otherwise I don't think this format does.

That's good to know. Thanks for fixing locally

kibanamachine · 2020-07-27T17:08:32Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3751/

cchaos added 5 commits July 21, 2020 11:11

[EuiFieldPassword] Support toggling obfuscation

763063b

- Added props `type` and `canToggleVisibility`

Removed canToggleVisibility in favor of a third type called ‘dual’

73307aa

Put focus back into input after toggling visibility

ee608fc

Back to using Ref instead of RefCallback

cc6f2d7

Use new useEuiI18n method

5e64ef3

cchaos force-pushed the prop/show_password branch from 8baa109 to 5e64ef3 Compare July 21, 2020 15:25

Quick non-related fix, remove zindex completely from popovers in da…

8ce56ce

…tagrid example Unnecessary to have a custom z-index as the default is much higher than the supplied one.

cchaos marked this pull request as ready for review July 21, 2020 15:52

cchaos requested review from elizabetdev, myasonik and thompsongl July 21, 2020 15:53

myasonik approved these changes Jul 21, 2020

View reviewed changes

Removing Edge's inernal reveal button when we're providing a custom one

adf77ee

useCombinedRefs

6a43a32

thompsongl reviewed Jul 22, 2020

View reviewed changes

src-docs/src/views/datagrid/styling.js Show resolved Hide resolved

comment

b258573

elizabetdev approved these changes Jul 23, 2020

View reviewed changes

cchaos added 3 commits July 23, 2020 12:27

Merge pull request #35 from thompsongl/prop/show_password

971a1b1

useCombinedRefs

Using /* */ comment format

c197126

Whoops

3c30ddb

thompsongl approved these changes Jul 27, 2020

View reviewed changes

cchaos added 2 commits July 27, 2020 12:44

cl

3c95d92

Merge branch 'master' into prop/show_password

cd06121

cchaos merged commit fa9e626 into elastic:master Jul 27, 2020

thompsongl mentioned this pull request Jul 31, 2020

Upgrade EUI to v27.4.0 elastic/kibana#74004

Merged

md-mq mentioned this pull request Aug 10, 2020

Password field with the dual flag and an array in append keeps appending buttons #3883

Closed

cchaos deleted the prop/show_password branch September 11, 2020 15:39

legrego mentioned this pull request Sep 14, 2020

Allow passwords to be visible on security screens elastic/kibana#77394

Merged

Conversation

cchaos commented Jul 15, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Fixes #3153

Checklist

Uh oh!

kibanamachine commented Jul 15, 2020

Uh oh!

cchaos commented Jul 16, 2020

Uh oh!

kibanamachine commented Jul 21, 2020

Uh oh!

cchaos commented Jul 21, 2020

Uh oh!

cchaos commented Jul 21, 2020

Uh oh!

myasonik left a comment

Choose a reason for hiding this comment

Uh oh!

cchaos commented Jul 21, 2020

Uh oh!

cchaos commented Jul 21, 2020

Uh oh!

myasonik commented Jul 21, 2020

Uh oh!

cchaos commented Jul 21, 2020

Uh oh!

kibanamachine commented Jul 21, 2020

Uh oh!

thompsongl commented Jul 21, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cchaos commented Jul 22, 2020

Uh oh!

kibanamachine commented Jul 22, 2020

Uh oh!

thompsongl left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

elizabetdev left a comment

Choose a reason for hiding this comment

Uh oh!

cchaos commented Jul 23, 2020

Uh oh!

kibanamachine commented Jul 23, 2020

Uh oh!

thompsongl commented Jul 27, 2020

Uh oh!

kibanamachine commented Jul 27, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

cchaos commented Jul 15, 2020 •

edited

Loading

thompsongl commented Jul 21, 2020 •

edited

Loading