fix(Modal): Allow users to add classes to backdrop (#11015)

We need to adjust the behavior in Virtual Assistant, but there's no way for us to target it specifically. This would let us pass a class down.

packages/react-core/src/components/Modal/Modal.tsx

@@ -19,6 +19,8 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   children: React.ReactNode;
   /** Additional classes added to the modal. */
   className?: string;
+  /** Additional classes added to the modal backdrop. */
+  backdropClassName?: string;
   /** Flag to disable focus trap. */
   disableFocusTrap?: boolean;
   /** The element to focus when the modal opens. By default the first
@@ -182,6 +184,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
         ouiaSafe={ouiaSafe}
         position={position}
         elementToFocus={elementToFocus}
+        backdropClassName={props.backdropClassName}
         {...props}
       />,
       container

packages/react-core/src/components/Modal/ModalContent.tsx

@@ -20,6 +20,8 @@ export interface ModalContentProps extends OUIAProps {
   children: React.ReactNode;
   /** Additional classes added to the modal box. */
   className?: string;
+  /** Additional classes added to the modal backdrop. */
+  backdropClassName?: string;
   /** Flag to disable focus trap. */
   disableFocusTrap?: boolean;
   /** The element to focus when the modal opens. By default the first
@@ -47,6 +49,7 @@ export interface ModalContentProps extends OUIAProps {
 }
 
 export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
+  backdropClassName,
   children,
   className,
   isOpen = false,
@@ -106,7 +109,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
     </ModalBox>
   );
   return (
-    <Backdrop>
+    <Backdrop className={css(backdropClassName)}>
       <FocusTrap
         active={!disableFocusTrap}
         focusTrapOptions={{