fix(PasswordInput): Update placement of Show/Hide button on Large input size #1136
Conversation
🦋 Changeset detectedLatest commit: 08ef260 The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
There was a problem hiding this comment.
The original issue is fixed, but there needs to be some tweaks to polish it up.
-
The size seems inconsistent with other buttons on large inputs. The perfect example of sizing, spacing, etc is the Clear button on large text inputs.
-
-
It's 40px tall, equal distances from top, bottom and right side, and the focus ring doesn't run into the border of the input.
-
One of the problems specific to the password input, is that the show/hide button changes width depending on which state it is in. We need to pick a fixed width that accommodates both text labels so it doesn't change.
-
-
-
It appears when you change from medium to large input, all of the text in the input changes appropriately in size, but we're not changing the button. We need to either change it to the medium button variant, or just change the text style within the button.
-
-
|
Almost there. Just a couple little tweaks.
In the end, we should end up with this: |
Issue: #1088
What I did
Fix placement of show / hide button in large password input. Also added input size to storybook and to the list of the component's props.
Screenshots:
Before:
After:
Checklist
How to test
Test PasswordInput component in both the small and large size