feat: add popupProps to Modal component to allow override internal Po…

…pup props (#24693) Co-authored-by: Gaston Ramirez <[email protected]>
microsoft · Sep 21, 2022 · 62aadfe · 62aadfe
1 parent 92bc886
commit 62aadfe
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 0 deletions.
diff --git a/change/@fluentui-react-b4e5742f-312c-4c83-93ad-7da95b6de7d9.json b/change/@fluentui-react-b4e5742f-312c-4c83-93ad-7da95b6de7d9.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "@fluentui/react: allowing Popup configuration on Modal component",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/etc/react.api.md b/packages/react/etc/react.api.md
@@ -6983,6 +6983,7 @@ export interface IModalProps extends React_2.RefAttributes<HTMLDivElement>, IAcc
     // @deprecated
     onLayerDidMount?: () => void;
     overlay?: IOverlayProps;
+    popupProps?: IPopupProps;
     responsiveMode?: ResponsiveMode;
     scrollableContentClassName?: string;
     styles?: IStyleFunctionOrObject<IModalStyleProps, IModalStyles>;

diff --git a/packages/react/src/components/Modal/Modal.base.tsx b/packages/react/src/components/Modal/Modal.base.tsx
@@ -128,6 +128,7 @@ export const ModalBase: React.FunctionComponent<IModalProps> = React.forwardRef<
       onDismissed,
       // eslint-disable-next-line deprecation/deprecation
       enableAriaHiddenSiblings,
+      popupProps,
     } = props;
 
     const rootRef = React.useRef<HTMLDivElement>(null);
@@ -477,6 +478,7 @@ export const ModalBase: React.FunctionComponent<IModalProps> = React.forwardRef<
             // Popup will automatically handle this based on the aria-modal setting.
             enableAriaHiddenSiblings={enableAriaHiddenSiblings}
             aria-modal={!isModeless}
+            {...popupProps}
           >
             <div className={classNames.root} role={!isModeless ? 'document' : undefined}>
               {!isModeless && (

diff --git a/packages/react/src/components/Modal/Modal.types.ts b/packages/react/src/components/Modal/Modal.types.ts
@@ -8,6 +8,7 @@ import type { ILayerProps } from '../../Layer';
 import type { IOverlayProps } from '../../Overlay';
 import type { IStyle, ITheme } from '../../Styling';
 import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities';
+import { IPopupProps } from '../Popup/Popup.types';
 
 export interface IDragOptions {
   /**
@@ -195,6 +196,11 @@ export interface IModalProps extends React.RefAttributes<HTMLDivElement>, IAcces
    * @default `{}`
    */
   focusTrapZoneProps?: IFocusTrapZoneProps;
+
+  /**
+   * Props to be passed through to Popup
+   */
+  popupProps?: IPopupProps;
 }
 
 /**