[Popover] Fix default value

mui · Jun 5, 2018 · 95a45f2 · 95a45f2
1 parent ab3bc94
commit 95a45f2
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -826,4 +826,25 @@ describe('<Popover />', () => {
       popoverActions.updatePosition();
     });
   });
+
+  describe('prop: transitionDuration', () => {
+    it('should apply the auto property if supported', () => {
+      const wrapper = shallow(
+        <Popover {...defaultProps}>
+          <div />
+        </Popover>,
+      );
+      assert.strictEqual(wrapper.find(Grow).props().timeout, 'auto');
+    });
+
+    it('should not apply the auto property if not supported', () => {
+      const TransitionComponent = props => <div {...props} />;
+      const wrapper = shallow(
+        <Popover {...defaultProps} TransitionComponent={TransitionComponent}>
+          <div />
+        </Popover>,
+      );
+      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
@@ -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: <StepContent /> is only designed for use with the vertical stepper.',
   );
 
+  let transitionDuration = transitionDurationProp;
+
+  if (transitionDurationProp === 'auto' && !TransitionComponent.muiSupportAuto) {
+    transitionDuration = undefined;
+  }
+
   return (
     <div className={classNames(classes.root, { [classes.last]: last }, className)} {...other}>
       <TransitionComponent

diff --git a/packages/material-ui/src/StepContent/StepContent.test.js b/packages/material-ui/src/StepContent/StepContent.test.js
@@ -7,7 +7,7 @@ import Collapse from '../Collapse';
 describe('<StepContent />', () => {
   let shallow;
   let mount;
-  const props = {
+  const defaultProps = {
     orientation: 'vertical',
   };
 
@@ -21,7 +21,7 @@ describe('<StepContent />', () => {
   });
 
   it('renders a div', () => {
-    const wrapper = shallow(<StepContent {...props}>Here is the content</StepContent>);
+    const wrapper = shallow(<StepContent {...defaultProps}>Here is the content</StepContent>);
     assert.strictEqual(wrapper.type(), 'div');
   });
 
@@ -30,7 +30,7 @@ describe('<StepContent />', () => {
       <StepContent
         style={{ paddingRight: 200, color: 'purple', border: '1px solid tomato' }}
         role="Tabpanel"
-        {...props}
+        {...defaultProps}
       >
         Lorem ipsum
       </StepContent>,
@@ -44,7 +44,7 @@ describe('<StepContent />', () => {
 
   it('renders children inside an Collapse component', () => {
     const wrapper = shallow(
-      <StepContent {...props}>
+      <StepContent {...defaultProps}>
         <div className="test-content">This is my content!</div>
       </StepContent>,
     );
@@ -54,4 +54,25 @@ describe('<StepContent />', () => {
     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(
+        <StepContent {...defaultProps}>
+          <div />
+        </StepContent>,
+      );
+      assert.strictEqual(wrapper.find(Collapse).props().timeout, 'auto');
+    });
+
+    it('should not apply the auto property if not supported', () => {
+      const TransitionComponent = props => <div {...props} />;
+      const wrapper = shallow(
+        <StepContent {...defaultProps} TransitionComponent={TransitionComponent}>
+          <div />
+        </StepContent>,
+      );
+      assert.strictEqual(wrapper.find(TransitionComponent).props().timeout, undefined);
+    });
+  });
 });