Popover.pane - Adding max and min height to popover pane

.changeset/four-pens-dress.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added support for setting `maxHeight` and `minHeight` on `Popover.Pane` and `Combobox`

polaris-react/src/components/Combobox/Combobox.tsx

@@ -32,6 +32,10 @@ export interface ComboboxProps {
   /** Height to set on the Popover Pane. */
   height?: string;
   /** Callback fired when the bottom of the listbox is reached. Use to lazy load when listbox option data is paginated. */
+  maxHeight?: string;
+  /** Min Height to set on the Popover Pane. */
+  minHeight?: string;
+  /** Callback fired when the bottom of the lisbox is reached. Use to lazy load when listbox option data is paginated. */
   onScrolledToBottom?(): void;
   /** Callback fired when the popover closes */
   onClose?(): void;
@@ -44,6 +48,8 @@ export function Combobox({
   preferredPosition = 'below',
   willLoadMoreOptions,
   height,
+  maxHeight,
+  minHeight,
   onScrolledToBottom,
   onClose,
 }: ComboboxProps) {
@@ -167,7 +173,12 @@ export function Combobox({
       onClose={handleClose}
     >
       {Children.count(children) > 0 ? (
-        <Popover.Pane onScrolledToBottom={onScrolledToBottom} height={height}>
+        <Popover.Pane
+          onScrolledToBottom={onScrolledToBottom}
+          height={height}
+          maxHeight={maxHeight}
+          minHeight={minHeight}
+        >
           <ComboboxListboxContext.Provider value={listboxContextValue}>
             <ComboboxListboxOptionContext.Provider
               value={listboxOptionContextValue}

polaris-react/src/components/Popover/components/Pane/Pane.tsx

@@ -13,8 +13,12 @@ export interface PaneProps {
   sectioned?: boolean;
   /** The pane content */
   children?: React.ReactNode;
-  /** Sets a fixed height and max-height on the Scrollable */
+  /** Sets a fixed height on the Scrollable */
   height?: string;
+  /** Sets maxHeight on the Scrollable */
+  maxHeight?: string;
+  /** Sets minHeight on the Scrollable */
+  minHeight?: string;
   /** Callback when the bottom of the popover is reached by mouse or keyboard  */
   onScrolledToBottom?(): void;
   /**
@@ -35,6 +39,8 @@ export function Pane({
   sectioned,
   children,
   height,
+  maxHeight,
+  minHeight,
   subdued,
   onScrolledToBottom,
 }: PaneProps) {
@@ -47,9 +53,8 @@ export function Pane({
   const content = sectioned
     ? wrapWithComponent(children, Section, {})
     : children;
-  const style = height
-    ? {height, maxHeight: height, minHeight: height}
-    : undefined;
+
+  const style = {height, maxHeight, minHeight};
 
   return fixed ? (
     <div style={style} className={className}>

polaris-react/src/components/Popover/components/Pane/tests/Pane.test.tsx

@@ -181,6 +181,26 @@ describe('<Pane />', () => {
         </TextContainer>
       );
 
+      const popoverPane = mountWithApp(
+        <Pane height={height} maxHeight={height} minHeight={height}>
+          <Children />
+        </Pane>,
+      );
+
+      expect(popoverPane).toContainReactComponent(Scrollable, {
+        style,
+      });
+    });
+
+    it('sets a height on Scrollable', () => {
+      const height = '100px';
+      const style = {height};
+      const Children = () => (
+        <TextContainer>
+          <p>Text</p>
+        </TextContainer>
+      );
+
       const popoverPane = mountWithApp(
         <Pane height={height}>
           <Children />
@@ -191,6 +211,46 @@ describe('<Pane />', () => {
         style,
       });
     });
+
+    it('sets a maxHeight on Scrollable', () => {
+      const height = '100px';
+      const style = {maxHeight: height};
+      const Children = () => (
+        <TextContainer>
+          <p>Text</p>
+        </TextContainer>
+      );
+
+      const popoverPane = mountWithApp(
+        <Pane maxHeight={height}>
+          <Children />
+        </Pane>,
+      );
+
+      expect(popoverPane).toContainReactComponent(Scrollable, {
+        style,
+      });
+    });
+
+    it('sets a minHeight on Scrollable', () => {
+      const height = '100px';
+      const style = {minHeight: height};
+      const Children = () => (
+        <TextContainer>
+          <p>Text</p>
+        </TextContainer>
+      );
+
+      const popoverPane = mountWithApp(
+        <Pane minHeight={height}>
+          <Children />
+        </Pane>,
+      );
+
+      expect(popoverPane).toContainReactComponent(Scrollable, {
+        style,
+      });
+    });
   });
 
   describe('captureOverscroll', () => {