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.

Sign up for GitHub

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

Jump to bottom

[TextField] Avoid outline label CSS leak #19937

Merged
merged 4 commits into from
Mar 4, 2020
Merged

[TextField] Avoid outline label CSS leak #19937

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9e50b27
Replaced global span style with specific class
Mar 2, 2020
878aa0e
Changed display of label span to inlineblock
Mar 2, 2020
7f51ae9
Moved dangereous html disable line
Mar 2, 2020
bd72783
Changed to simpler solution by @oliviertassinari
Mar 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 21 additions & 9 deletions packages/material-ui/src/OutlinedInput/NotchedOutline.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,12 @@ export const styles = theme => {
easing: theme.transitions.easing.easeOut,
}),
},
/* Styles applied to the label elemement. */
legendLabel: {
paddingLeft: 5,
paddingRight: 5,
display: 'inline-block',
},
/* Styles applied to the legend element. */
legendLabelled: {
display: 'block',
Expand All @@ -46,10 +52,6 @@ export const styles = theme => {
duration: 50,
easing: theme.transitions.easing.easeOut,
}),
'& span': {
paddingLeft: 5,
paddingRight: 5,
},
},
/* Styles applied to the legend element is notched. */
legendNotched: {
Expand Down Expand Up @@ -94,9 +96,16 @@ const NotchedOutline = React.forwardRef(function NotchedOutline(props, ref) {
[classes.legendNotched]: notched,
})}
>
{/* Use the nominal use case of the legend, avoid rendering artefacts. */}
{/* eslint-disable-next-line react/no-danger */}
{label ? <span>{label}</span> : <span dangerouslySetInnerHTML={{ __html: '&#8203;' }} />}
{label ? (
<span className={clsx(classes.legendLabel)}>{label}</span>
) : (
/* Use the nominal use case of the legend, avoid rendering artefacts. */
<span
className={clsx(classes.legendLabel)}
/* eslint-disable-next-line react/no-danger */
dangerouslySetInnerHTML={{ __html: '&#8203;' }}
/>
)}
</legend>
</fieldset>
);
Expand Down Expand Up @@ -125,8 +134,11 @@ const NotchedOutline = React.forwardRef(function NotchedOutline(props, ref) {
}}
>
{/* Use the nominal use case of the legend, avoid rendering artefacts. */}
{/* eslint-disable-next-line react/no-danger */}
<span dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
<span
className={clsx(classes.legendLabel)}
/* eslint-disable-next-line react/no-danger */
dangerouslySetInnerHTML={{ __html: '&#8203;' }}
/>
</legend>
</fieldset>
);
Expand Down