[Overlay] add portalClassName to IOverlayableProps

packages/core/src/components/overlay/overlay.tsx

@@ -69,6 +69,12 @@ export interface IOverlayableProps extends IOverlayLifecycleProps {
      */
     usePortal?: boolean;
 
+    /**
+     * Space-delimited string of class names applied to the `Portal` element if
+     * `usePortal={true}`.
+     */
+    portalClassName?: string;
+
     /**
      * The container element into which the overlay renders its contents, when `usePortal` is `true`.
      * This prop is ignored if `usePortal` is `false`.
@@ -192,7 +198,7 @@ export class Overlay extends React.PureComponent<IOverlayProps, IOverlayState> {
             return null;
         }
 
-        const { children, className, usePortal, portalContainer, isOpen } = this.props;
+        const { children, className, usePortal, isOpen } = this.props;
 
         // TransitionGroup types require single array of children; does not support nested arrays.
         // So we must collapse backdrop and children into one array, and every item must be wrapped in a
@@ -221,7 +227,11 @@ export class Overlay extends React.PureComponent<IOverlayProps, IOverlayState> {
             </TransitionGroup>
         );
         if (usePortal) {
-            return <Portal container={portalContainer}>{transitionGroup}</Portal>;
+            return (
+                <Portal className={this.props.portalClassName} container={this.props.portalContainer}>
+                    {transitionGroup}
+                </Portal>
+            );
         } else {
             return transitionGroup;
         }

packages/core/src/components/popover/popoverSharedProps.ts

@@ -95,12 +95,6 @@ export interface IPopoverSharedProps extends IOverlayableProps, IProps {
      */
     popoverClassName?: string;
 
-    /**
-     * Space-delimited string of class names applied to the `Portal` element if
-     * `usePortal={true}`.
-     */
-    portalClassName?: string;
-
     /**
      * The position (relative to the target) at which the popover should appear.
      *

packages/core/test/dialog/dialogTests.tsx

@@ -31,6 +31,17 @@ describe("<Dialog>", () => {
         });
     });
 
+    it("portalClassName appears on Portal", () => {
+        const TEST_CLASS = "test-class";
+        const dialog = mount(
+            <Dialog isOpen={true} portalClassName={TEST_CLASS}>
+                {createDialogContents()}
+            </Dialog>,
+        );
+        assert.isDefined(document.querySelector(`.${Classes.PORTAL}.${TEST_CLASS}`));
+        dialog.unmount();
+    });
+
     it("renders contents to specified container correctly", () => {
         const container = document.createElement("div");
         document.body.appendChild(container);

packages/core/test/overlay/overlayTests.tsx

@@ -71,6 +71,17 @@ describe("<Overlay>", () => {
         document.body.removeChild(container);
     });
 
+    it("portalClassName appears on Portal", () => {
+        const CLASS_TO_TEST = "bp-test-content";
+        mountWrapper(
+            <Overlay isOpen={true} portalClassName={CLASS_TO_TEST}>
+                <p>test</p>
+            </Overlay>,
+        );
+        // search document for portal container element.
+        assert.isDefined(document.querySelector(`.${Classes.PORTAL}.${CLASS_TO_TEST}`));
+    });
+
     it("renders Portal after first opened", () => {
         mountWrapper(<Overlay isOpen={false}>{createOverlayContents()}</Overlay>);
         assert.lengthOf(wrapper.find(Portal), 0, "unexpected Portal");