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 (
', () => { let shallow; let mount; - const props = { + const defaultProps = { orientation: 'vertical', }; @@ -21,7 +21,7 @@ describe('', () => { }); it('renders a div', () => { - const wrapper = shallow(Here is the content); + const wrapper = shallow(Here is the content); assert.strictEqual(wrapper.type(), 'div'); }); @@ -30,7 +30,7 @@ describe('', () => { Lorem ipsum , @@ -44,7 +44,7 @@ describe('', () => { it('renders children inside an Collapse component', () => { const wrapper = shallow( - +
This is my content!
, ); @@ -54,4 +54,25 @@ describe('', () => { assert.strictEqual(content.length, 1); assert.strictEqual(content.props().children, 'This is my content!'); }); + + describe('prop: transitionDuration', () => { + it('should apply the auto property if supported', () => { + const wrapper = shallow( + +
+ , + ); + assert.strictEqual(wrapper.find(Collapse).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); + }); + }); });