Merge pull request #2494 from Shopify/popover/add-fluid-content

[Popover] Add fluidContent prop

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
 

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%;

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 and height */
+  fluidContent?: boolean;
   /** Remains in a fixed position */
   fixed?: boolean;
   /** Used to illustrate the type of popover element */

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 = (

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