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

Fix: TextInput styling regression with icon and block prop usage #1592

Merged
merged 7 commits into from
Nov 10, 2021

Conversation

rezrah
Copy link
Contributor

@rezrah rezrah commented Nov 10, 2021

Summary

The TextInput component suffers from a visual regression when you use both icon and block props together.

This PR fixes the regression, while attempting to ensure that no further regressions are introduced.

Changes

  • Fixed highlighted issue
  • Backfilled a missing Story for TextInput

Screenshots and 🎥

Before:

Screen.Recording.2021-11-10.at.13.59.38.mov

After:
Screenshot 2021-11-10 at 14 11 25

Screen.Recording.2021-11-10.at.14.06.26.mov

New Storybook:

Screen.Recording.2021-11-10.at.14.07.46.mov

Reviewer notes

  • This is implemented as a temporary fix, as the TextInput component will undergo alpha => beta refactoring shortly and the longer-term solution should perhaps, come from a css classname instead (I'm unsure if it already exists)

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

@rezrah rezrah requested review from a team and siddharthkp November 10, 2021 14:16
@changeset-bot
Copy link

changeset-bot bot commented Nov 10, 2021

🦋 Changeset detected

Latest commit: 9ea076f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/components Patch

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

@github-actions
Copy link
Contributor

github-actions bot commented Nov 10, 2021

size-limit report 📦

Path Size
dist/browser.esm.js 54.23 KB (+0.04% 🔺)
dist/browser.umd.js 54.62 KB (+0.02% 🔺)

src/TextInput.tsx Outdated Show resolved Hide resolved
)
}

export const WithLeadingIcon = (args: TextInputProps) => {
Copy link
Member

Choose a reason for hiding this comment

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

Great addition!

Copy link
Member

@siddharthkp siddharthkp left a 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!

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.

None yet

3 participants