diff --git a/packages/core/src/components/overlay/overlay.tsx b/packages/core/src/components/overlay/overlay.tsx index 3be7e37f2e8..e32157635e6 100644 --- a/packages/core/src/components/overlay/overlay.tsx +++ b/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 { 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 { ); if (usePortal) { - return {transitionGroup}; + return ( + + {transitionGroup} + + ); } else { return transitionGroup; } diff --git a/packages/core/src/components/popover/popoverSharedProps.ts b/packages/core/src/components/popover/popoverSharedProps.ts index 734c24e5e1a..e8026ee9b7f 100644 --- a/packages/core/src/components/popover/popoverSharedProps.ts +++ b/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. * diff --git a/packages/core/test/dialog/dialogTests.tsx b/packages/core/test/dialog/dialogTests.tsx index 1b73fc6fc1e..14d44444e74 100644 --- a/packages/core/test/dialog/dialogTests.tsx +++ b/packages/core/test/dialog/dialogTests.tsx @@ -31,6 +31,17 @@ describe("", () => { }); }); + it("portalClassName appears on Portal", () => { + const TEST_CLASS = "test-class"; + const dialog = mount( + + {createDialogContents()} + , + ); + 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); diff --git a/packages/core/test/overlay/overlayTests.tsx b/packages/core/test/overlay/overlayTests.tsx index a2070cee186..ac4dadc9685 100644 --- a/packages/core/test/overlay/overlayTests.tsx +++ b/packages/core/test/overlay/overlayTests.tsx @@ -71,6 +71,17 @@ describe("", () => { document.body.removeChild(container); }); + it("portalClassName appears on Portal", () => { + const CLASS_TO_TEST = "bp-test-content"; + mountWrapper( + +

test

+
, + ); + // search document for portal container element. + assert.isDefined(document.querySelector(`.${Classes.PORTAL}.${CLASS_TO_TEST}`)); + }); + it("renders Portal after first opened", () => { mountWrapper({createOverlayContents()}); assert.lengthOf(wrapper.find(Portal), 0, "unexpected Portal");