create contentClassName prop (react-bootstrap#5367)

* create contentClassName prop

* Pass contentClassName to modal dialog

* Add test

Author: IHIutch

src/Modal.tsx

@@ -44,6 +44,7 @@ export interface ModalProps
   backdropClassName?: string;
   animation?: boolean;
   dialogClassName?: string;
+  contentClassName?: string;
   dialogAs?: React.ElementType;
   scrollable?: boolean;
 }
@@ -110,6 +111,11 @@ const propTypes = {
    */
   dialogClassName: PropTypes.string,
 
+  /**
+   * Add an optional extra class name to .modal-content
+   */
+  contentClassName: PropTypes.string,
+
   /**
    * A Component type that provides the modal content Markup. This is a useful
    * prop when you want to use your own styles and markup to create a custom
@@ -241,6 +247,7 @@ const Modal: Modal = (React.forwardRef(
       className,
       style,
       dialogClassName,
+      contentClassName,
       children,
       dialogAs: Dialog,
       'aria-labelledby': ariaLabelledby,
@@ -477,6 +484,7 @@ const Modal: Modal = (React.forwardRef(
           role="document"
           onMouseDown={handleDialogMouseDown}
           className={dialogClassName}
+          contentClassName={contentClassName}
         >
           {children}
         </Dialog>

src/ModalDialog.tsx

@@ -12,11 +12,13 @@ export interface ModalDialogProps
   size?: 'sm' | 'lg' | 'xl';
   centered?: boolean;
   scrollable?: boolean;
+  contentClassName?: string;
 }
 
 const propTypes = {
   /** @default 'modal' */
   bsPrefix: PropTypes.string,
+  contentClassName: PropTypes.string,
 
   /**
    * Render a large, extra large or small modal.
@@ -41,6 +43,7 @@ const ModalDialog = React.forwardRef<HTMLDivElement, ModalDialogProps>(
     {
       bsPrefix,
       className,
+      contentClassName,
       centered,
       size,
       children,
@@ -64,7 +67,9 @@ const ModalDialog = React.forwardRef<HTMLDivElement, ModalDialogProps>(
           scrollable && `${dialogClass}-scrollable`,
         )}
       >
-        <div className={`${bsPrefix}-content`}>{children}</div>
+        <div className={classNames(`${bsPrefix}-content`, contentClassName)}>
+          {children}
+        </div>
       </div>
     );
   },

test/ModalSpec.js

@@ -198,6 +198,15 @@ describe('<Modal>', () => {
     ).assertSingle('.modal-dialog.my-dialog');
   });
 
+  it('Should pass contentClassName to .modal-content', () => {
+    const noOp = () => {};
+    mount(
+      <Modal show contentClassName="my-content" onHide={noOp}>
+        <strong>Message</strong>
+      </Modal>,
+    ).assertSingle('.modal-content.my-content');
+  });
+
   it('Should use dialogAs', () => {
     const noOp = () => {};