Popover.pane - Adding max and min height to popover pane (#11535)

closes: #11534
<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Open it as a draft if it’s a work in progress
-->

### WHY are these changes introduced?

The combobox does not have a prop to accept maxHeight to set the height
from default. The height prop on combobox when set, gives empty space
when filtering the suggestions.
<img width="1080" alt="31-31-aqwrw-uillp"
src="https://github.com/Shopify/polaris/assets/56687545/e1d8751b-852d-4dcb-8982-f65f3dd8ada1">

[This PR](#5685) introduces the
height component to the Popover.pane. The fix was for TagAutocomplete in
web. I have not been able to figure out what the issue was and how to
test this change against them.

### WHAT is this pull request doing?
This PR adds the minHeight and maxHeight as props for combobox and
popover.pane component.


 <details>
    <summary>video of after changes</summary>


https://github.com/Shopify/polaris/assets/56687545/21558e77-0af4-4c50-8c4e-cf1c724cc611


  </details>

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

  Include a video if your changes include interactive content.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

  <details>
    <summary>Summary of your gif(s)</summary>
    <img src="..." alt="Description of what the gif shows">
  </details>
-->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

Using main branch: 
- For
[MultiselectVerticalContent](https://github.com/Shopify/polaris/blob/main/polaris-react/src/components/Combobox/Combobox.stories.tsx#L460)
update the list to add more options, say 30-40 items more.
- Set [height in the
combobox](https://github.com/Shopify/polaris/blob/main/polaris-react/src/components/Combobox/Combobox.stories.tsx#L564-L580)
to say `300px` to limit the height of the suggestions dropdown
- Filter suggestions and observe the extra space at the bottom of the
filtered list.

Using this branch:
- For
[MultiselectVerticalContent](https://github.com/Shopify/polaris/blob/main/polaris-react/src/components/Combobox/Combobox.stories.tsx#L460)
update the list to add more options, say 30-40 items more.
- Set maxHeight in the combobox to `300px`
- Filter suggestions and observe that there are no extra space at the
bottom of the filtered list.





### 🎩 checklist

- [ ] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

.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', () => {