[Snackbar] Deprecate transition onX props (#22206)

docs/pages/api-docs/snackbar.md

@@ -39,12 +39,12 @@ The `MuiSnackbar` name can be used for providing [default props](/customization/
 | <span class="prop-name">key</span> | <span class="prop-type">any</span> |  | When displaying multiple consecutive Snackbars from a parent rendering a single &lt;Snackbar/>, add the key prop to ensure independent treatment of each message. e.g. &lt;Snackbar key={message} />, otherwise, the message may update-in-place and features such as autoHideDuration may be canceled. |
 | <span class="prop-name">message</span> | <span class="prop-type">node</span> |  | The message to display. |
 | <span class="prop-name">onClose</span> | <span class="prop-type">func</span> |  | Callback fired when the component requests to be closed. Typically `onClose` is used to set state in the parent component, which is used to control the `Snackbar` `open` prop. The `reason` parameter can optionally be used to control the response to `onClose`, for example ignoring `clickaway`.<br><br>**Signature:**<br>`function(event: object, reason: string) => void`<br>*event:* The event source of the callback.<br>*reason:* Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`. |
-| <span class="prop-name">onEnter</span> | <span class="prop-type">func</span> |  | Callback fired before the transition is entering. |
-| <span class="prop-name">onEntered</span> | <span class="prop-type">func</span> |  | Callback fired when the transition has entered. |
-| <span class="prop-name">onEntering</span> | <span class="prop-type">func</span> |  | Callback fired when the transition is entering. |
-| <span class="prop-name">onExit</span> | <span class="prop-type">func</span> |  | Callback fired before the transition is exiting. |
-| <span class="prop-name">onExited</span> | <span class="prop-type">func</span> |  | Callback fired when the transition has exited. |
-| <span class="prop-name">onExiting</span> | <span class="prop-type">func</span> |  | Callback fired when the transition is exiting. |
+| ~~<span class="prop-name">onEnter</span>~~ | <span class="prop-type">func</span> |  | *Deprecated*. Use the `TransitionProps` prop instead.<br><br>Callback fired before the transition is entering. |
+| ~~<span class="prop-name">onEntered</span>~~ | <span class="prop-type">func</span> |  | *Deprecated*. Use the `TransitionProps` prop instead.<br><br>Callback fired when the transition has entered. |
+| ~~<span class="prop-name">onEntering</span>~~ | <span class="prop-type">func</span> |  | *Deprecated*. Use the `TransitionProps` prop instead.<br><br>Callback fired when the transition is entering. |
+| ~~<span class="prop-name">onExit</span>~~ | <span class="prop-type">func</span> |  | *Deprecated*. Use the `TransitionProps` prop instead.<br><br>Callback fired before the transition is exiting. |
+| ~~<span class="prop-name">onExited</span>~~ | <span class="prop-type">func</span> |  | *Deprecated*. Use the `TransitionProps` prop instead.<br><br>Callback fired when the transition has exited. |
+| ~~<span class="prop-name">onExiting</span>~~ | <span class="prop-type">func</span> |  | *Deprecated*. Use the `TransitionProps` prop instead.<br><br>Callback fired when the transition is exiting. |
 | <span class="prop-name">open</span> | <span class="prop-type">bool</span> |  | If `true`, `Snackbar` is open. |
 | <span class="prop-name">resumeHideDuration</span> | <span class="prop-type">number</span> |  | The number of milliseconds to wait before dismissing after user interaction. If `autoHideDuration` prop isn't specified, it does nothing. If `autoHideDuration` prop is specified but `resumeHideDuration` isn't, we default to `autoHideDuration / 2` ms. |
 | <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Grow</span> | The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. |

packages/material-ui/src/Snackbar/Snackbar.js

@@ -7,6 +7,7 @@ import ClickAwayListener from '../ClickAwayListener';
 import useEventCallback from '../utils/useEventCallback';
 import capitalize from '../utils/capitalize';
 import createChainedFunction from '../utils/createChainedFunction';
+import deprecatedPropType from '../utils/deprecatedPropType';
 import Grow from '../Grow';
 import SnackbarContent from '../SnackbarContent';
 
@@ -324,27 +325,27 @@ Snackbar.propTypes = {
   /**
    * Callback fired before the transition is entering.
    */
-  onEnter: PropTypes.func,
+  onEnter: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'),
   /**
    * Callback fired when the transition has entered.
    */
-  onEntered: PropTypes.func,
+  onEntered: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'),
   /**
    * Callback fired when the transition is entering.
    */
-  onEntering: PropTypes.func,
+  onEntering: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'),
   /**
    * Callback fired before the transition is exiting.
    */
-  onExit: PropTypes.func,
+  onExit: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'),
   /**
    * Callback fired when the transition has exited.
    */
-  onExited: PropTypes.func,
+  onExited: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'),
   /**
    * Callback fired when the transition is exiting.
    */
-  onExiting: PropTypes.func,
+  onExiting: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'),
   /**
    * @ignore
    */

packages/material-ui/src/Snackbar/Snackbar.test.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import * as PropTypes from 'prop-types';
 import { expect } from 'chai';
-import { spy, useFakeTimers } from 'sinon';
+import { spy, stub, useFakeTimers } from 'sinon';
 import { getClasses } from '@material-ui/core/test-utils';
 import createMount from 'test/utils/createMount';
 import { createClientRender, fireEvent } from 'test/utils/createClientRender';
@@ -91,7 +92,7 @@ describe('<Snackbar />', () => {
         <Snackbar
           open={false}
           onClose={handleClose}
-          onExited={handleExited}
+          TransitionProps={{ onExited: handleExited }}
           message="message"
           autoHideDuration={duration}
           transitionDuration={duration / 2}
@@ -413,4 +414,123 @@ describe('<Snackbar />', () => {
       expect(container).to.contain(transitionRef.current);
     });
   });
+
+  describe('deprecated transition callback props', () => {
+    beforeEach(() => {
+      PropTypes.resetWarningCache();
+      stub(console, 'error');
+    });
+
+    afterEach(() => {
+      console.error.restore();
+    });
+
+    describe('prop: onEnter', () => {
+      it('issues a warning', () => {
+        PropTypes.checkPropTypes(
+          Snackbar.Naked.propTypes,
+          {
+            onEnter: () => [],
+          },
+          'prop',
+          'Snackbar',
+        );
+
+        expect(console.error.callCount).to.equal(1);
+        expect(console.error.firstCall.args[0]).to.equal(
+          'Warning: Failed prop type: The prop `onEnter` of `Snackbar` is deprecated. Use the `TransitionProps` prop instead.',
+        );
+      });
+    });
+
+    describe('prop: onEntering', () => {
+      it('issues a warning', () => {
+        PropTypes.checkPropTypes(
+          Snackbar.Naked.propTypes,
+          {
+            onEntering: () => [],
+          },
+          'prop',
+          'Snackbar',
+        );
+
+        expect(console.error.callCount).to.equal(1);
+        expect(console.error.firstCall.args[0]).to.equal(
+          'Warning: Failed prop type: The prop `onEntering` of `Snackbar` is deprecated. Use the `TransitionProps` prop instead.',
+        );
+      });
+    });
+
+    describe('prop: onEntered', () => {
+      it('issues a warning', () => {
+        PropTypes.checkPropTypes(
+          Snackbar.Naked.propTypes,
+          {
+            onEntered: () => [],
+          },
+          'prop',
+          'Snackbar',
+        );
+
+        expect(console.error.callCount).to.equal(1);
+        expect(console.error.firstCall.args[0]).to.equal(
+          'Warning: Failed prop type: The prop `onEntered` of `Snackbar` is deprecated. Use the `TransitionProps` prop instead.',
+        );
+      });
+    });
+
+    describe('prop: onExit', () => {
+      it('issues a warning', () => {
+        PropTypes.checkPropTypes(
+          Snackbar.Naked.propTypes,
+          {
+            onExit: () => [],
+          },
+          'prop',
+          'Snackbar',
+        );
+
+        expect(console.error.callCount).to.equal(1);
+        expect(console.error.firstCall.args[0]).to.equal(
+          'Warning: Failed prop type: The prop `onExit` of `Snackbar` is deprecated. Use the `TransitionProps` prop instead.',
+        );
+      });
+    });
+
+    describe('prop: onExiting', () => {
+      it('issues a warning', () => {
+        PropTypes.checkPropTypes(
+          Snackbar.Naked.propTypes,
+          {
+            onExiting: () => [],
+          },
+          'prop',
+          'Snackbar',
+        );
+
+        expect(console.error.callCount).to.equal(1);
+        expect(console.error.firstCall.args[0]).to.equal(
+          'Warning: Failed prop type: The prop `onExiting` of `Snackbar` is deprecated. Use the `TransitionProps` prop instead.',
+        );
+      });
+    });
+
+    describe('prop: onExited', () => {
+      it('issues a warning', () => {
+        PropTypes.checkPropTypes(
+          Snackbar.Naked.propTypes,
+          {
+            onExited: () => [],
+          },
+          'prop',
+          'Snackbar',
+        );
+
+        expect(console.error.callCount).to.equal(1);
+        expect(console.error.firstCall.args[0]).to.equal(
+          'Warning: Failed prop type: The prop `onExited` of `Snackbar` is deprecated. Use the `TransitionProps` prop instead.',
+        );
+      });
+    });
+  });
 });