Skip to content

Commit

Permalink
[TextField] Improve transitions (#19228)
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari authored Jan 22, 2020
1 parent 820ad88 commit 102c790
Showing 1 changed file with 8 additions and 13 deletions.
21 changes: 8 additions & 13 deletions packages/material-ui/src/OutlinedInput/NotchedOutline.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ import useTheme from '../styles/useTheme';
import capitalize from '../utils/capitalize';

export const styles = theme => {
const align = theme.direction === 'rtl' ? 'right' : 'left';

return {
/* Styles applied to the root element. */
root: {
Expand All @@ -23,19 +21,14 @@ export const styles = theme => {
borderRadius: 'inherit',
borderStyle: 'solid',
borderWidth: 1,
// Match the Input Label
transition: theme.transitions.create([`padding-${align}`, 'border-color', 'border-width'], {
duration: theme.transitions.duration.shorter,
easing: theme.transitions.easing.easeOut,
}),
},
/* Styles applied to the legend element when `labelWidth` is provided. */
legend: {
textAlign: 'left',
padding: 0,
lineHeight: '11px', // sync with `height` in `legend` styles
transition: theme.transitions.create('width', {
duration: theme.transitions.duration.shorter,
duration: 150,
easing: theme.transitions.easing.easeOut,
}),
},
Expand All @@ -48,19 +41,21 @@ export const styles = theme => {
visibility: 'hidden',
maxWidth: 0.01,
transition: theme.transitions.create('max-width', {
duration: theme.transitions.duration.shorter,
duration: 50,
easing: theme.transitions.easing.easeOut,
}),
'& span': {
paddingLeft: 4,
paddingRight: 6,
paddingLeft: 5,
paddingRight: 5,
},
},
/* Styles applied to the legend element is notched. */
legendNotched: {
maxWidth: 1000,
transition: theme.transitions.create('max-width', {
duration: theme.transitions.duration.shorter,
duration: 100,
easing: theme.transitions.easing.easeOut,
delay: 50,
}),
},
};
Expand Down Expand Up @@ -111,7 +106,7 @@ const NotchedOutline = React.forwardRef(function NotchedOutline(props, ref) {
<fieldset
aria-hidden
style={{
[`padding${capitalize(align)}`]: 8 + (notched ? 0 : labelWidth / 2),
[`padding${capitalize(align)}`]: 8,
...style,
}}
className={clsx(classes.root, className)}
Expand Down

0 comments on commit 102c790

Please sign in to comment.