-
Notifications
You must be signed in to change notification settings - Fork 526
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
Fix: TextInput styling regression with icon and block prop usage #1592
Conversation
🦋 Changeset detectedLatest commit: 9ea076f The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
size-limit report 📦
|
) | ||
} | ||
|
||
export const WithLeadingIcon = (args: TextInputProps) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great addition!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's very smart!
Summary
The
TextInput
component suffers from a visual regression when you use bothicon
andblock
props together.This PR fixes the regression, while attempting to ensure that no further regressions are introduced.
Changes
TextInput
Screenshots and 🎥
Before:
Screen.Recording.2021-11-10.at.13.59.38.mov
After:
Screen.Recording.2021-11-10.at.14.06.26.mov
New Storybook:
Screen.Recording.2021-11-10.at.14.07.46.mov
Reviewer notes
TextInput
component will undergoalpha
=>beta
refactoring shortly and the longer-term solution should perhaps, come from acss
classname instead (I'm unsure if it already exists)Merge checklist