[transition] Improve interoperability with react-transition-group (mui#8830)

Author: oliviertassinari

pages/api/collapse.md

@@ -16,7 +16,7 @@ filename: /src/transitions/Collapse.js
 | classes | Object |  | Useful to extend the style applied to components. |
 | collapsedHeight | string | '0px' | The height of the container when collapsed. |
 | <span style="color: #31a148">in *</span> | boolean |  | If `true`, the component will transition in. |
-| transitionDuration | union:&nbsp;number<br>&nbsp;{ enter?: number, exit?: number }<br>&nbsp;'auto'<br> | duration.standard | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.<br>Set to 'auto' to automatically calculate transition time based on height. |
+| timeout | union:&nbsp;number<br>&nbsp;{ enter?: number, exit?: number }<br>&nbsp;'auto'<br> | duration.standard | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.<br>Set to 'auto' to automatically calculate transition time based on height. |
 
 Any other properties supplied will be [spread to the root element](/customization/api#spread).
 

pages/api/fade.md

@@ -15,7 +15,7 @@ It's using [react-transition-group](https://github.com/reactjs/react-transition-
 |:-----|:-----|:--------|:------------|
 | <span style="color: #31a148">children *</span> | Element |  | A single child content element. |
 | <span style="color: #31a148">in *</span> | boolean |  | If `true`, the component will transition in. |
-| transitionDuration | TransitionDuration | {  enter: duration.enteringScreen,  exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
+| timeout | TransitionDuration | {  enter: duration.enteringScreen,  exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 
 Any other properties supplied will be [spread to the root element](/customization/api#spread).
 

pages/api/grow.md

@@ -16,8 +16,8 @@ It's using [react-transition-group](https://github.com/reactjs/react-transition-
 | <span style="color: #31a148">children *</span> | Element |  | A single child content element. |
 | <span style="color: #31a148">in *</span> | boolean |  | If `true`, show the component; triggers the enter or exit animation. |
 | rootRef | Function |  | Use that property to pass a ref callback to the root component. |
+| timeout | union:&nbsp;number<br>&nbsp;{ enter?: number, exit?: number }<br>&nbsp;'auto'<br> | 'auto' | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.<br>Set to 'auto' to automatically calculate transition time based on height. |
 | transitionClasses | TransitionClasses | {} | The animation classNames applied to the component as it enters or exits. This property is a direct binding to [`CSSTransition.classNames`](https://reactcommunity.org/react-transition-group/#CSSTransition-prop-classNames). |
-| transitionDuration | union:&nbsp;number<br>&nbsp;{ enter?: number, exit?: number }<br>&nbsp;'auto'<br> | 'auto' | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.<br>Set to 'auto' to automatically calculate transition time based on height. |
 
 Any other properties supplied will be [spread to the root element](/customization/api#spread).
 

pages/api/menu.md

@@ -24,7 +24,7 @@ filename: /src/Menu/Menu.js
 | onExiting | TransitionCallback |  | Callback fired when the Menu is exiting. |
 | onRequestClose | Function |  | Callback fired when the component requests to be closed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
 | open | boolean | false | If `true`, the menu is visible. |
-| transitionDuration | union:&nbsp;number<br>&nbsp;'auto'<br> | 'auto' | The length of the transition in `ms`, or 'auto' |
+| transitionDuration | union:&nbsp;number<br>&nbsp;{ enter?: number, exit?: number }<br>&nbsp;'auto'<br> | 'auto' | The length of the transition in `ms`, or 'auto' |
 
 Any other properties supplied will be [spread to the root element](/customization/api#spread).
 

pages/api/popover.md

@@ -29,7 +29,7 @@ filename: /src/Popover/Popover.js
 | <span style="color: #31a148">open *</span> | boolean |  | If `true`, the popover is visible. |
 | transformOrigin | signature | {  vertical: 'top',  horizontal: 'left',} | This is the point on the popover which will attach to the anchor's origin.<br>Options: vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)]. |
 | transitionClasses | TransitionClasses |  | The animation classNames applied to the component as it enters or exits. This property is a direct binding to [`CSSTransition.classNames`](https://reactcommunity.org/react-transition-group/#CSSTransition-prop-classNames). |
-| transitionDuration | union:&nbsp;number<br>&nbsp;'auto'<br> | 'auto' | Set to 'auto' to automatically calculate transition time based on height. |
+| transitionDuration | union:&nbsp;number<br>&nbsp;{ enter?: number, exit?: number }<br>&nbsp;'auto'<br> | 'auto' | Set to 'auto' to automatically calculate transition time based on height. |
 
 Any other properties supplied will be [spread to the root element](/customization/api#spread).
 

pages/api/slide.md

@@ -15,7 +15,7 @@ filename: /src/transitions/Slide.js
 | <span style="color: #31a148">children *</span> | Element |  | A single child content element. |
 | direction | union:&nbsp;'left'<br>&nbsp;'right'<br>&nbsp;'up'<br>&nbsp;'down'<br> | 'down' | Direction the child node will enter from. |
 | <span style="color: #31a148">in *</span> | boolean |  | If `true`, show the component; triggers the enter or exit animation. |
-| transitionDuration | TransitionDuration | {  enter: duration.enteringScreen,  exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
+| timeout | TransitionDuration | {  enter: duration.enteringScreen,  exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 
 Any other properties supplied will be [spread to the root element](/customization/api#spread).
 

src/Dialog/Dialog.js

@@ -191,7 +191,7 @@ function Dialog(props: ProvidedProps & Props) {
         {
           appear: true,
           in: open,
-          transitionDuration,
+          timeout: transitionDuration,
           onEnter,
           onEntering,
           onEntered,

src/Drawer/Drawer.js

@@ -219,7 +219,7 @@ class Drawer extends React.Component<ProvidedProps & Props, State> {
       <Slide
         in={open}
         direction={getSlideDirection(anchor)}
-        transitionDuration={transitionDuration}
+        timeout={transitionDuration}
         appear={!this.state.firstMount}
         {...SlideProps}
       >

src/Drawer/Drawer.spec.js

@@ -64,7 +64,7 @@ describe('<Drawer />', () => {
             <div />
           </Drawer>,
         );
-        assert.strictEqual(wrapper.find(Slide).props().transitionDuration, transitionDuration);
+        assert.strictEqual(wrapper.find(Slide).props().timeout, transitionDuration);
       });
 
       it("should be passed to to Modal's BackdropTransitionDuration when open=true", () => {

src/Input/InputLabel.spec.js

@@ -36,7 +36,7 @@ describe('<InputLabel />', () => {
     assert.strictEqual(wrapper.hasClass(classes.disabled), true);
   });
 
-  describe('props: FormControlClasses', () => {
+  describe('prop: FormControlClasses', () => {
     it('should be able to change the FormLabel style', () => {
       const wrapper = shallow(<InputLabel FormControlClasses={{ foo: 'bar' }}>Foo</InputLabel>);
       assert.strictEqual(wrapper.props().classes.foo, 'bar');