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);
+ });
+ });
});