[core] feat(InputGroup): add leftElement prop #4063
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
adidahiya
suggested changes
Apr 20, 2020
adidahiya
approved these changes
Apr 20, 2020
adidahiya
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #4039
Checklist
Changes proposed in this pull request:
Related discussion: #4039 (comment)
This PR adds a new
leftElementto theInputGroup, which should allow users a better option for injecting left-aligned content than the currentleftIconprop. The currentleftIconprop allows content, but is not styled in a good enough way to align things correctly.Reviewers should focus on:
This PR uses the same approach as
rightElementcurrently does for calculating necessary padding.It also adds the styling for the icon (color, margins, etc) that is currently being applied to leftIcon. I chose to do this because I feel it may be common to add
<Icon>inleftElement, for example when a custom icon is specified.I modified the example in the docs to have one usage. I felt it was good to illustrate how it can be used, but of course feel free to ask me to revert it.
Another note - this PR actually fixes another bug with
InputGroupwhensmall={true}. The padding-right calculations forrightElementwas causing theInputGroupto always have a right-padding of 10px by default, but thesmallvariant was supposed to have 8px. My changes in this PR ensures that calculated padding is now only applied when custom content is provided.