Make modal style and className props consistent

Author: tcbegley

src/components/modal/Modal.js

@@ -17,8 +17,9 @@ function Modal({
   style,
   dialog_style,
   content_style,
+  backdrop_style,
   class_name,
-  modal_class_name,
+  dialog_class_name,
   content_class_name,
   backdrop_class_name,
   autofocus,
@@ -31,10 +32,11 @@ function Modal({
   zIndex,
   dialogStyle,
   contentStyle,
+  backdropStyle,
   className,
   backdropClassName,
   contentClassName,
-  modalClassName,
+  dialogClassName,
   setProps,
   ...otherProps
 }) {
@@ -48,11 +50,12 @@ function Modal({
     <RBModal
       animation={fade}
       dialogAs={tag}
+      className={class_name || className}
       dialogStyle={dialog_style || dialogStyle}
+      dialogClassName={dialog_class_name || dialogClassName}
       contentStyle={content_style || contentStyle}
-      dialogClassName={class_name || className}
-      className={modal_class_name || modalClassName}
       contentClassName={content_class_name || contentClassName}
+      backdropStyle={backdrop_style || backdropStyle}
       backdropClassName={backdrop_class_name || backdropClassName}
       autoFocus={autofocus || autoFocus}
       enforceFocus={enforceFocus}
@@ -145,23 +148,28 @@ Modal.propTypes = {
    */
   content_style: PropTypes.object,
 
+  /**
+   * Inline CSS styles to apply to the backdrop
+   */
+  backdrop_style: PropTypes.object,
+
   /**
    * Additional CSS classes to apply to the Modal.
    */
   class_name: PropTypes.string,
 
   /**
-   * CSS class to apply to the modal.
+   * Additional CSS classes to apply to the modal.
    */
-  modal_class_name: PropTypes.string,
+  dialog_class_name: PropTypes.string,
 
   /**
-   * CSS class to apply to the backdrop.
+   * Additional CSS classes to apply to the modal-backdrop.
    */
   backdrop_class_name: PropTypes.string,
 
   /**
-   * CSS class to apply to the modal content.
+   * Additional CSS classes to apply to the modal content.
    */
   content_class_name: PropTypes.string,
 
@@ -209,6 +217,13 @@ Modal.propTypes = {
    */
   contentStyle: PropTypes.object,
 
+  /**
+   * **DEPRECATED** Use `content_style` instead.
+   *
+   * Inline CSS styles to apply to the backdrop
+   */
+  backdropStyle: PropTypes.object,
+
   /**
    * **DEPRECATED** Use `class_name` instead.
    *
@@ -219,23 +234,23 @@ Modal.propTypes = {
   /**
    * **DEPRECATED** Use `backdrop_class_name` instead
    *
-   * CSS class to apply to the backdrop.
+   * Additional CSS classes to apply to the modal-backdrop.
    */
   backdropClassName: PropTypes.string,
 
   /**
    * **DEPRECATED** Use `content_class_name` instead
    *
-   * CSS class to apply to the modal content.
+   * Additional CSS classes to apply to the modal-content.
    */
   contentClassName: PropTypes.string,
 
   /**
-   * **DEPRECATED** Use `modal_class_name` instead
+   * **DEPRECATED** Use `dialog_class_name` instead
    *
-   * CSS class to apply to the modal.
+   * Additional CSS classes to apply to the modal-dialog.
    */
-  modalClassName: PropTypes.string,
+  dialogClassName: PropTypes.string,
 
   /**
    * **DEPRECATED** Use `autofocus` instead

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

@@ -86,8 +86,14 @@ describe('Modal', () => {
       'custom-modal-backdrop'
     );
 
+    // Backdrop style
+    rerender(<Modal is_open backdrop_style={{color: 'red'}} />);
+    expect(document.body.querySelector('.modal-backdrop')).toHaveStyle({
+      color: 'red'
+    });
+
     // Dialog class name
-    rerender(<Modal is_open class_name="custom-modal-dialog" />);
+    rerender(<Modal is_open dialog_class_name="custom-modal-dialog" />);
     expect(document.body.querySelector('.modal-dialog')).toHaveClass(
       'custom-modal-dialog'
     );
@@ -106,10 +112,14 @@ describe('Modal', () => {
     });
 
     // Modal class name
-    rerender(<Modal is_open modal_class_name="custom-modal-class" />);
+    rerender(<Modal is_open class_name="custom-modal-class" />);
     expect(document.body.querySelector('.modal')).toHaveClass(
       'custom-modal-class'
     );
+
+    // Modal style
+    rerender(<Modal is_open style={{color: 'red'}} />);
+    expect(document.body.querySelector('.modal')).toHaveStyle({color: 'red'});
   });
 
   test('sets z-index with zindex and zIndex', () => {

src/private/Modal.js

@@ -39,6 +39,7 @@ const Modal = React.forwardRef(function Modal(
     children,
     dialogStyle,
     contentStyle,
+    backdropStyle,
     'data-bs-theme': dataBsTheme,
     'aria-labelledby': ariaLabelledby,
     'aria-describedby': ariaDescribedby,
@@ -219,7 +220,7 @@ const Modal = React.forwardRef(function Modal(
           backdropClassName,
           !animation && 'show'
         )}
-        style={{zIndex}}
+        style={{...backdropStyle, zIndex}}
       />
     ),
     [animation, backdropClassName, zIndex]
@@ -253,8 +254,8 @@ const Modal = React.forwardRef(function Modal(
         {...props}
         onMouseDown={handleDialogMouseDown}
         className={dialogClassName}
-        contentClassName={contentClassName}
         style={dialogStyle}
+        contentClassName={contentClassName}
         contentStyle={contentStyle}
       >
         {children}
@@ -299,6 +300,7 @@ Modal.propTypes = {
   style: PropTypes.object,
   dialogStyle: PropTypes.object,
   contentStyle: PropTypes.object,
+  backdropStyle: PropTypes.object,
   zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   size: PropTypes.string,
   fullscreen: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),