diff --git a/packages/material-ui/src/Collapse/Collapse.js b/packages/material-ui/src/Collapse/Collapse.js index d6680a812f299c..8be07ffe8fa301 100644 --- a/packages/material-ui/src/Collapse/Collapse.js +++ b/packages/material-ui/src/Collapse/Collapse.js @@ -254,6 +254,8 @@ Collapse.defaultProps = { timeout: duration.standard, }; +Collapse.muiSupportAuto = true; + export default withStyles(styles, { withTheme: true, name: 'MuiCollapse', diff --git a/packages/material-ui/src/Grow/Grow.js b/packages/material-ui/src/Grow/Grow.js index 439544b7a6c262..befede91acb004 100644 --- a/packages/material-ui/src/Grow/Grow.js +++ b/packages/material-ui/src/Grow/Grow.js @@ -178,4 +178,6 @@ Grow.defaultProps = { timeout: 'auto', }; +Grow.muiSupportAuto = true; + export default withTheme()(Grow); diff --git a/packages/material-ui/src/Popover/Popover.js b/packages/material-ui/src/Popover/Popover.js index da803460c4f7b7..492725d61af470 100644 --- a/packages/material-ui/src/Popover/Popover.js +++ b/packages/material-ui/src/Popover/Popover.js @@ -291,11 +291,17 @@ class Popover extends React.Component { role, transformOrigin, TransitionComponent, - transitionDuration, + transitionDuration: transitionDurationProp, TransitionProps, ...other } = this.props; + let transitionDuration = transitionDurationProp; + + if (transitionDurationProp === 'auto' && !TransitionComponent.muiSupportAuto) { + transitionDuration = undefined; + } + // If the container prop is provided, use that // If the anchorEl prop is provided, use its parent body element as the container // If neither are provided let the Modal take care of choosing the container diff --git a/packages/material-ui/src/Popover/Popover.test.js b/packages/material-ui/src/Popover/Popover.test.js index fcae9314cc2047..b87f87dd1b902a 100644 --- a/packages/material-ui/src/Popover/Popover.test.js +++ b/packages/material-ui/src/Popover/Popover.test.js @@ -826,4 +826,25 @@ describe('', () => { popoverActions.updatePosition(); }); }); + + describe('prop: transitionDuration', () => { + it('should apply the auto property if supported', () => { + const wrapper = shallow( + +
+ , + ); + assert.strictEqual(wrapper.find(Grow).props().timeout, 'auto'); + }); + + it('should not apply the auto property if not supported', () => { + const TransitionComponent = props =>
; + const wrapper = shallow( + +
+ , + ); + assert.strictEqual(wrapper.find(TransitionComponent).props().timeout, undefined); + }); + }); }); diff --git a/packages/material-ui/src/StepContent/StepContent.js b/packages/material-ui/src/StepContent/StepContent.js index 9c1690f8dfc5ad..3356b2e8f21d95 100644 --- a/packages/material-ui/src/StepContent/StepContent.js +++ b/packages/material-ui/src/StepContent/StepContent.js @@ -33,7 +33,7 @@ function StepContent(props) { optional, orientation, TransitionComponent, - transitionDuration, + transitionDuration: transitionDurationProp, TransitionProps, ...other } = props; @@ -43,6 +43,12 @@ function StepContent(props) { 'Material-UI: is only designed for use with the vertical stepper.', ); + let transitionDuration = transitionDurationProp; + + if (transitionDurationProp === 'auto' && !TransitionComponent.muiSupportAuto) { + transitionDuration = undefined; + } + return (