fix(Toast): fix fade animation (react-bootstrap#6004)

Author: kyletsang

src/Fade.tsx

@@ -20,6 +20,7 @@ export interface FadeProps extends TransitionCallbacks {
   appear?: boolean;
   timeout?: number;
   children: React.ReactElement;
+  transitionClasses?: Record<string, string>;
 }
 
 const propTypes = {
@@ -80,6 +81,12 @@ const propTypes = {
    * You must provide a single JSX child element to this component and that element cannot be a \<React.Fragment\>
    */
   children: PropTypes.element.isRequired,
+
+  /**
+   * Applies additional specified classes during the transition. Takes an object
+   * where the keys correspond to the Transition status
+   */
+  transitionClasses: PropTypes.object,
 };
 
 const defaultProps = {
@@ -96,7 +103,7 @@ const fadeStyles = {
 };
 
 const Fade = React.forwardRef<Transition<any>, FadeProps>(
-  ({ className, children, ...props }, ref) => {
+  ({ className, children, transitionClasses = {}, ...props }, ref) => {
     const handleEnter = useCallback(
       (node, isAppearing) => {
         triggerBrowserReflow(node);
@@ -121,6 +128,7 @@ const Fade = React.forwardRef<Transition<any>, FadeProps>(
               className,
               children.props.className,
               fadeStyles[status],
+              transitionClasses[status],
             ),
           })
         }

src/Toast.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 
 import useTimeout from '@restart/hooks/useTimeout';
 import { TransitionComponent } from '@restart/ui/types';
-import Fade from './Fade';
+import ToastFade from './ToastFade';
 import ToastHeader from './ToastHeader';
 import ToastBody from './ToastBody';
 import { useBootstrapPrefix } from './ThemeProvider';
@@ -75,7 +75,7 @@ const Toast: BsPrefixRefForwardingComponent<'div', ToastProps> =
       {
         bsPrefix,
         className,
-        transition: Transition = Fade,
+        transition: Transition = ToastFade,
         show = true,
         animation = true,
         delay = 5000,

src/ToastFade.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Transition, {
+  ENTERING,
+  EXITING,
+} from 'react-transition-group/Transition';
+import Fade, { FadeProps } from './Fade';
+
+const fadeStyles = {
+  [ENTERING]: 'showing',
+  [EXITING]: 'showing show',
+};
+
+const ToastFade = React.forwardRef<Transition<any>, FadeProps>((props, ref) => (
+  <Fade {...props} ref={ref} transitionClasses={fadeStyles} />
+));
+
+ToastFade.displayName = 'ToastFade';
+
+export default ToastFade;

www/src/examples/Toast/Dismissible.js

@@ -7,7 +7,10 @@ function Example() {
 
   return (
     <Row>
-      <Col xs={6}>
+      <Col md={6} className="mb-2">
+        <Button onClick={toggleShowA} className="mb-2">
+          Toggle Toast <strong>with</strong> Animation
+        </Button>
         <Toast show={showA} onClose={toggleShowA}>
           <Toast.Header>
             <img
@@ -21,12 +24,10 @@ function Example() {
           <Toast.Body>Woohoo, you're reading this text in a Toast!</Toast.Body>
         </Toast>
       </Col>
-      <Col xs={6}>
-        <Button onClick={toggleShowA}>
-          Toggle Toast <strong>with</strong> Animation
+      <Col md={6} className="mb-2">
+        <Button onClick={toggleShowB} className="mb-2">
+          Toggle Toast <strong>without</strong> Animation
         </Button>
-      </Col>
-      <Col xs={6} className="my-1">
         <Toast onClose={toggleShowB} show={showB} animation={false}>
           <Toast.Header>
             <img
@@ -40,11 +41,6 @@ function Example() {
           <Toast.Body>Woohoo, you're reading this text in a Toast!</Toast.Body>
         </Toast>
       </Col>
-      <Col xs={6}>
-        <Button onClick={toggleShowB}>
-          Toggle Toast <strong>without</strong> Animation
-        </Button>
-      </Col>
     </Row>
   );
 }