From f1e62c8957666396bd53f07a0f5018ca5395cc07 Mon Sep 17 00:00:00 2001
From: Deborah Chan <deborah.chan@shopify.com>
Date: Tue, 3 Dec 2019 14:32:19 -0500
Subject: [PATCH] Add fluidContent prop to Popover

---
 UNRELEASED.md                                       |  1 +
 src/components/Popover/Popover.scss                 |  5 +++++
 src/components/Popover/Popover.tsx                  |  2 ++
 .../components/PopoverOverlay/PopoverOverlay.tsx    | 11 ++++++++++-
 src/components/Popover/tests/Popover.test.tsx       | 13 +++++++++++++
 5 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 636f208e310..863c1a133a4 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -17,6 +17,7 @@
 - `Page` no longer renders navigation or actions in print mode ([#2469](https://github.com/Shopify/polaris-react/pull/2469))
 - Added an `emptyState` prop to `ResourceList` ([#2160](https://github.com/Shopify/polaris-react/pull/2160))
 - Migrated `Dropzone` to a functional component and reduce complexity ([#2360](https://github.com/Shopify/polaris-react/pull/2360))
+- Added `fluidContent` prop to `Popover` ([#2494](https://github.com/Shopify/polaris-react/pull/2494))
 
 ### Bug fixes
 
diff --git a/src/components/Popover/Popover.scss b/src/components/Popover/Popover.scss
index 000f889bad3..7bd7d7f6b56 100644
--- a/src/components/Popover/Popover.scss
+++ b/src/components/Popover/Popover.scss
@@ -86,6 +86,11 @@ $content-max-width: rem(400px);
   max-height: none;
 }
 
+.Content-fluidContent {
+  max-height: none;
+  max-width: none;
+}
+
 .Pane {
   flex: 1 1 0%;
   max-width: 100%;
diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
index 41f3a5a7dcd..5bffeb64172 100644
--- a/src/components/Popover/Popover.tsx
+++ b/src/components/Popover/Popover.tsx
@@ -41,6 +41,8 @@ export interface PopoverProps {
   fullWidth?: boolean;
   /** Allow popover to stretch to fit content vertically */
   fullHeight?: boolean;
+  /** Allow popover content to determine the overlay width/height */
+  fluidContent?: boolean;
   /** Remains in a fixed position */
   fixed?: boolean;
   /** Used to illustrate the type of popover element */
diff --git a/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx b/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx
index c03bb3e9b50..b6190519526 100644
--- a/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx
+++ b/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx
@@ -40,6 +40,7 @@ export interface PopoverOverlayProps {
   children?: React.ReactNode;
   fullWidth?: boolean;
   fullHeight?: boolean;
+  fluidContent?: boolean;
   preferredPosition?: PreferredPosition;
   preferredAlignment?: PreferredAlignment;
   active: boolean;
@@ -179,7 +180,14 @@ export class PopoverOverlay extends React.PureComponent<
   private renderPopover = (overlayDetails: OverlayDetails) => {
     const {measuring, desiredHeight, positioning} = overlayDetails;
 
-    const {id, children, sectioned, fullWidth, fullHeight} = this.props;
+    const {
+      id,
+      children,
+      sectioned,
+      fullWidth,
+      fullHeight,
+      fluidContent,
+    } = this.props;
 
     const className = classNames(
       styles.Popover,
@@ -193,6 +201,7 @@ export class PopoverOverlay extends React.PureComponent<
     const contentClassNames = classNames(
       styles.Content,
       fullHeight && styles['Content-fullHeight'],
+      fluidContent && styles['Content-fluidContent'],
     );
 
     const content = (
diff --git a/src/components/Popover/tests/Popover.test.tsx b/src/components/Popover/tests/Popover.test.tsx
index e25c99b97fe..1fb859cdbd4 100644
--- a/src/components/Popover/tests/Popover.test.tsx
+++ b/src/components/Popover/tests/Popover.test.tsx
@@ -159,6 +159,19 @@ describe('<Popover />', () => {
     expect(popoverOverlay.prop('fullWidth')).toBe(true);
   });
 
+  it('passes fluidContent to PopoverOverlay', () => {
+    const popover = mountWithAppProvider(
+      <Popover
+        active
+        fluidContent
+        activator={<div>Activator</div>}
+        onClose={spy}
+      />,
+    );
+    const popoverOverlay = findByTestID(popover, 'popoverOverlay');
+    expect(popoverOverlay.prop('fluidContent')).toBe(true);
+  });
+
   it('calls onClose when you click outside the Popover', () => {
     mountWithAppProvider(
       <Popover