fix(Modal): directly show backdrop if no animation (fix: #4190) (#4192)

src/Modal.js

@@ -273,12 +273,16 @@ class Modal extends React.Component {
   }
 
   renderBackdrop = props => {
-    const { bsPrefix, backdropClassName } = this.props;
+    const { bsPrefix, backdropClassName, animation } = this.props;
 
     return (
       <div
         {...props}
-        className={classNames(`${bsPrefix}-backdrop`, backdropClassName)}
+        className={classNames(
+          `${bsPrefix}-backdrop`,
+          backdropClassName,
+          !animation && 'show',
+        )}
       />
     );
   };

www/src/examples/Modal/WithoutAnimation.js

@@ -0,0 +1,31 @@
+function Example() {
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  return (
+    <>
+      <Button variant="primary" onClick={handleShow}>
+        Launch demo modal
+      </Button>
+
+      <Modal show={show} onHide={handleClose} animation={false}>
+        <Modal.Header closeButton>
+          <Modal.Title>Modal heading</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={handleClose}>
+            Close
+          </Button>
+          <Button variant="primary" onClick={handleClose}>
+            Save Changes
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+}
+
+render(<Example />);

www/src/pages/components/modal.js

@@ -11,6 +11,7 @@ import ModalBasic from '../../examples/Modal/Basic';
 import ModalDefaultSizing from '../../examples/Modal/DefaultSizing';
 import ModalCustomSizing from '../../examples/Modal/CustomSizing';
 import ModalVerticallyCentered from '../../examples/Modal/VerticallyCentered';
+import ModalWithoutAnimation from '../../examples/Modal/WithoutAnimation';
 import ModalGrid from '../../examples/Modal/Grid';
 import withLayout from '../../withLayout';
 
@@ -85,6 +86,14 @@ export default withLayout(function ModalSection({ data }) {
         content.
       </p>
       <ReactPlayground codeText={ModalBasic} />
+      <LinkedHeading h="3" id="modals-live">
+        Without Animation
+      </LinkedHeading>
+      <p>
+        A Modal can also be without an animation. For that set the "animation"
+        prop to <code>false</code>.
+      </p>
+      <ReactPlayground codeText={ModalWithoutAnimation} />
       <div className="bs-callout bs-callout-info">
         <div className="h4">Additional Import Options</div>
         <p>