Skip to content

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

Merged
rezrah merged 7 commits into
mainfrom
bugfix/fix-textinput-icon-with-block-prop
Nov 10, 2021
Merged

Fix: TextInput styling regression with icon and block prop usage#1592
rezrah merged 7 commits into
mainfrom
bugfix/fix-textinput-icon-with-block-prop

Conversation

@rezrah

@rezrahrezrah commented Nov 10, 2021

Copy link
Copy Markdown
Contributor

Summary

The TextInput component suffers from a visual regression when you use bothicon 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 siddharthkpNovember 10, 2021 14:16
@changeset-bot

changeset-botBot commented Nov 10, 2021

Copy link
Copy Markdown

🦋 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
NameType
@primer/componentsPatch

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

github-actionsBot commented Nov 10, 2021

Copy link
Copy Markdown
Contributor

size-limit report 📦

PathSize
dist/browser.esm.js54.23 KB (+0.04% 🔺)
dist/browser.umd.js54.62 KB (+0.02% 🔺)

Comment threadsrc/TextInput.tsx Outdated
)
}

export const WithLeadingIcon = (args: TextInputProps) => {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Great addition!

@siddharthkpsiddharthkp left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

That's very smart!

@rezrah
rezrah merged commit 8d3d491 into mainNov 10, 2021
@rezrah
rezrah deleted the bugfix/fix-textinput-icon-with-block-prop branch November 10, 2021 23:03
@primer-cssprimer-css mentioned this pull request Nov 10, 2021
@primer-cssprimer-css mentioned this pull request Nov 16, 2021
Sign up for freeto 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.

3 participants

@rezrah@siddharthkp@colebemis