Modal styles (#1029)

* Update vendored Modal file

* Add dialogStyle and contentStyle props to Modal

* Add tests

Author: tcbegley

src/components/modal/Modal.js

@@ -32,6 +32,10 @@ const Modal = props => {
     style,
     zindex,
     zIndex,
+    dialogStyle,
+    dialog_style,
+    contentStyle,
+    content_style,
     ...otherProps
   } = props;
 
@@ -45,6 +49,8 @@ const Modal = props => {
     <RBModal
       animation={fade}
       dialogAs={tag}
+      dialogStyle={dialog_style || dialogStyle}
+      contentStyle={content_style || contentStyle}
       dialogClassName={class_name || className}
       className={modal_class_name || modalClassName}
       contentClassName={content_class_name || contentClassName}
@@ -87,6 +93,26 @@ Modal.propTypes = {
    */
   style: PropTypes.object,
 
+  /**
+   * Inline CSS styles to apply to the dialog
+   */
+  dialog_style: PropTypes.object,
+
+  /**
+   * Inline CSS styles to apply to the dialog
+   */
+  dialogStyle: PropTypes.object,
+
+  /**
+   * Inline CSS styles to apply to the content
+   */
+  content_style: PropTypes.object,
+
+  /**
+   * Inline CSS styles to apply to the content
+   */
+  contentStyle: PropTypes.object,
+
   /**
    * Often used with CSS to style elements with common properties.
    */

src/components/modal/__tests__/Modal.test.js

@@ -75,6 +75,12 @@ describe('Modal', () => {
       'custom-modal-content'
     );
 
+    // Content style
+    rerender(<Modal is_open content_style={{backgroundColor: 'red'}} />);
+    expect(document.body.querySelector('.modal-content')).toHaveStyle({
+      backgroundColor: 'red'
+    });
+
     // Backdrop class name
     rerender(<Modal is_open backdrop_class_name="custom-modal-backdrop" />);
     expect(document.body.querySelector('.modal-backdrop')).toHaveClass(
@@ -87,6 +93,19 @@ describe('Modal', () => {
       'custom-modal-dialog'
     );
 
+    // Dialog style
+    rerender(
+      <Modal
+        is_open
+        dialog_style={{position: 'absolute', top: '10px', left: '10px'}}
+      />
+    );
+    expect(document.body.querySelector('.modal-dialog')).toHaveStyle({
+      position: 'absolute',
+      top: '10px',
+      left: '10px'
+    });
+
     // Modal class name
     rerender(<Modal is_open modal_class_name="custom-modal-class" />);
     expect(document.body.querySelector('.modal')).toHaveClass(

src/private/Modal.js

@@ -1,5 +1,5 @@
 // vendored from React-Bootstrap to allow us to set z-index of Modal backdrop
-// https://github.com/react-bootstrap/react-bootstrap/blob/93a8a0ef29409293dd69fad5873ad791634b3ed1/src/Modal.tsx
+// https://github.com/react-bootstrap/react-bootstrap/blob/be23c304fa40ddb209919b0faac1e5dd8cef53ad/src/Modal.tsx
 import React, {useCallback, useMemo, useRef, useState} from 'react';
 
 import classNames from 'classnames';
@@ -18,9 +18,10 @@ import BaseModal from '@restart/ui/Modal';
 import {getSharedManager} from 'react-bootstrap/BootstrapModalManager';
 import Fade from 'react-bootstrap/Fade';
 import ModalContext from 'react-bootstrap/ModalContext';
-import ModalDialog from 'react-bootstrap/ModalDialog';
 import {useBootstrapPrefix, useIsRTL} from 'react-bootstrap/ThemeProvider';
 
+import ModalDialog from './ModalDialog';
+
 const defaultProps = {
   show: false,
   backdrop: true,
@@ -51,7 +52,10 @@ const Modal = React.forwardRef(
       dialogClassName,
       contentClassName,
       children,
+      dialogStyle,
+      contentStyle,
       dialogAs: Dialog,
+      'data-bs-theme': dataBsTheme,
       'aria-labelledby': ariaLabelledby,
       'aria-describedby': ariaDescribedby,
       'aria-label': ariaLabel,
@@ -139,7 +143,7 @@ const Modal = React.forwardRef(
     });
 
     // We prevent the modal from closing during a drag by detecting where the
-    // the click originates from. If it starts in the modal and then ends outside
+    // click originates from. If it starts in the modal and then ends outside
     // don't close.
     const handleDialogMouseDown = () => {
       waitingForMouseUpRef.current = true;
@@ -185,13 +189,16 @@ const Modal = React.forwardRef(
     };
 
     const handleEscapeKeyDown = e => {
-      if (!keyboard && backdrop === 'static') {
-        // Call preventDefault to stop modal from closing in restart ui,
-        // then play our animation.
+      if (keyboard) {
+        onEscapeKeyDown?.(e);
+      } else {
+        // Call preventDefault to stop modal from closing in @restart/ui.
         e.preventDefault();
-        handleStaticModalAnimation();
-      } else if (keyboard && onEscapeKeyDown) {
-        onEscapeKeyDown(e);
+
+        if (backdrop === 'static') {
+          // Play static modal animation.
+          handleStaticModalAnimation();
+        }
       }
     };
 
@@ -224,19 +231,17 @@ const Modal = React.forwardRef(
     };
 
     const renderBackdrop = useCallback(
-      backdropProps => {
-        return (
-          <div
-            {...backdropProps}
-            className={classNames(
-              `${bsPrefix}-backdrop`,
-              backdropClassName,
-              !animation && 'show'
-            )}
-            style={{zIndex}}
-          />
-        );
-      },
+      backdropProps => (
+        <div
+          {...backdropProps}
+          className={classNames(
+            `${bsPrefix}-backdrop`,
+            backdropClassName,
+            !animation && 'show'
+          )}
+          style={{zIndex}}
+        />
+      ),
       [animation, backdropClassName, bsPrefix, zIndex]
     );
 
@@ -254,21 +259,23 @@ const Modal = React.forwardRef(
         className={classNames(
           className,
           bsPrefix,
-          animateStaticModal && `${bsPrefix}-static`
+          animateStaticModal && `${bsPrefix}-static`,
+          !animation && 'show'
         )}
         onClick={backdrop ? handleClick : undefined}
         onMouseUp={handleMouseUp}
+        data-bs-theme={dataBsTheme}
         aria-label={ariaLabel}
         aria-labelledby={ariaLabelledby}
         aria-describedby={ariaDescribedby}
       >
-        {/*
-        // @ts-ignore */}
         <Dialog
           {...props}
           onMouseDown={handleDialogMouseDown}
           className={dialogClassName}
           contentClassName={contentClassName}
+          style={dialogStyle}
+          contentStyle={contentStyle}
         >
           {children}
         </Dialog>

src/private/ModalDialog.js

@@ -0,0 +1,56 @@
+// vendored from React-Bootstrap to allow us to set content style
+// https://github.com/react-bootstrap/react-bootstrap/blob/be23c304fa40ddb209919b0faac1e5dd8cef53ad/src/ModalDialog.tsx
+import React from 'react';
+
+import classNames from 'classnames';
+import {useBootstrapPrefix} from 'react-bootstrap/ThemeProvider';
+
+const ModalDialog = React.forwardRef(
+  (
+    {
+      bsPrefix,
+      className,
+      contentClassName,
+      centered,
+      size,
+      fullscreen,
+      children,
+      scrollable,
+      contentStyle,
+      ...props
+    },
+    ref
+  ) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'modal');
+    const dialogClass = `${bsPrefix}-dialog`;
+
+    const fullScreenClass =
+      typeof fullscreen === 'string'
+        ? `${bsPrefix}-fullscreen-${fullscreen}`
+        : `${bsPrefix}-fullscreen`;
+
+    return (
+      <div
+        {...props}
+        ref={ref}
+        className={classNames(
+          dialogClass,
+          className,
+          size && `${bsPrefix}-${size}`,
+          centered && `${dialogClass}-centered`,
+          scrollable && `${dialogClass}-scrollable`,
+          fullscreen && fullScreenClass
+        )}
+      >
+        <div
+          className={classNames(`${bsPrefix}-content`, contentClassName)}
+          style={contentStyle}
+        >
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+
+export default ModalDialog;