diff --git a/.changeset/four-pens-dress.md b/.changeset/four-pens-dress.md new file mode 100644 index 00000000000..9fb21dd4a11 --- /dev/null +++ b/.changeset/four-pens-dress.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': minor +--- + +Added support for setting `maxHeight` and `minHeight` on `Popover.Pane` and `Combobox` diff --git a/polaris-react/src/components/Combobox/Combobox.tsx b/polaris-react/src/components/Combobox/Combobox.tsx index 39aaaa483e4..0c52e5def71 100644 --- a/polaris-react/src/components/Combobox/Combobox.tsx +++ b/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 ? ( - + diff --git a/polaris-react/src/components/Popover/components/Pane/tests/Pane.test.tsx b/polaris-react/src/components/Popover/components/Pane/tests/Pane.test.tsx index b05c0f4d4e6..ab67acdc38a 100644 --- a/polaris-react/src/components/Popover/components/Pane/tests/Pane.test.tsx +++ b/polaris-react/src/components/Popover/components/Pane/tests/Pane.test.tsx @@ -181,6 +181,26 @@ describe('', () => { ); + const popoverPane = mountWithApp( + + + , + ); + + expect(popoverPane).toContainReactComponent(Scrollable, { + style, + }); + }); + + it('sets a height on Scrollable', () => { + const height = '100px'; + const style = {height}; + const Children = () => ( + +

Text

+
+ ); + const popoverPane = mountWithApp( @@ -191,6 +211,46 @@ describe('', () => { style, }); }); + + it('sets a maxHeight on Scrollable', () => { + const height = '100px'; + const style = {maxHeight: height}; + const Children = () => ( + +

Text

+
+ ); + + const popoverPane = mountWithApp( + + + , + ); + + expect(popoverPane).toContainReactComponent(Scrollable, { + style, + }); + }); + + it('sets a minHeight on Scrollable', () => { + const height = '100px'; + const style = {minHeight: height}; + const Children = () => ( + +

Text

+
+ ); + + const popoverPane = mountWithApp( + + + , + ); + + expect(popoverPane).toContainReactComponent(Scrollable, { + style, + }); + }); }); describe('captureOverscroll', () => {