[TextField] Avoid outline label CSS leak #19937
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
ivoiv
changed the title
|
ci/circleci: test_static seems to fail on code that was there from before, the What to do? |
Details of bundle changes.Comparing: 33a7c26...bd72783
|
ivoiv
changed the title
ivoiv
changed the title
eps1lon
requested changes
Mar 2, 2020
There was a problem hiding this comment.
@oliviertassinari Why do we actually need a separate span here?
|
@eps1lon I can't remember, we would need to look at the history. |
oliviertassinari
added
the
component: text field
|
@oliviertassinari Changed the PR. |
ivoiv
changed the title
I would still prefer a simple classname while we're at it. We can have proper documentation for that. That isn't the case for custom selectors. |
|
Considering the component is private, I wonder about the advantages between the two approaches. |
oliviertassinari
changed the title
eps1lon
approved these changes
Mar 4, 2020
oliviertassinari
approved these changes
Mar 4, 2020
|
@ivoiv Thanks for fixing this edge case :) |
eps1lon
pushed a commit
to eps1lon/material-ui
that referenced
this pull request
Mar 4, 2020
This was referenced Mar 20, 2020
EsoterikStare
pushed a commit
to EsoterikStare/material-ui
that referenced
this pull request
Mar 30, 2020
This was referenced Apr 10, 2020
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.
Currently the styles of the label in NotchedOutline of the TextField is set by the
'& span'selector in the legendLabelled class. It basically adds padding.When a label prop comes in, it's wrapped in a
<span>before it's inserted.This means that if you also send a
<span>element as the label, you get a<span><span>My Label</span></span>for the label.Because of the
'& span'selector, both elements inherit the style, meaning you get double padding and thus extra empty space around the notch.By changing the selector to a class, the padding will no longer be applied to other
spanelements sent to the label component.When sending labels other than
span, likediv, the labelspandoes not inherit the width of thedivmeaning it's only default padding(5px on each side) wide.By setting the span
displayto to a'inline-block'enables the label to expand to the width of other, non-string components sent to the label.Given code
<TextField variant="outlined" label={<span>My Label</span>}/>Current behaviour
New behaviour
This now also works with
<TextField variant="outlined" label={<div>My Label</div>}/>