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

[ShabanaRumane]

closes: #11534

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.

This PR 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.

video of after changes

Screen.Recording.2024-01-31.at.11.01.53.AM.mov

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Using main branch:

• For MultiselectVerticalContent update the list to add more options, say 30-40 items more.
• Set height in the combobox 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 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
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[MichellePeens2]

I like that this is more predictable now! It's just like one would expect it to behave if it where just CSS.

[chloerice]

Hey @ShabanaRumane 👋🏽 TagsAutocomplete was given a fixed height intentionally to prevent jank when searching. The height prop on Combobox is meant to support you providing the popover a fixed height, that's why min and max are also set. If you don't want the Popover to have a fixed height, you can you just remove the height prop from the Combobox in TagsAutocomplete.

[ShabanaRumane]

Hey @ShabanaRumane 👋🏽 TagsAutocomplete was given a fixed height intentionally to prevent jank when searching. The height prop on Combobox is meant to support you providing the popover a fixed height, that's why min and max are also set. If you don't want the Popover to have a fixed height, you can you just remove the height prop from the Combobox in TagsAutocomplete.

@chloerice - We do need the height. When the height prop is set in the combobox, the height of the popover is fixed. It does not collapse if the search result is less than the height.
In the polaris example, if we enter text for search, the popover size is reduced based on the results. But when the height prop is provided, it does not reduce. It stays fixed. I am trying to fix this problem with this PR.

[chloerice]

Hey @ShabanaRumane 👋🏽 TagsAutocomplete was given a fixed height intentionally to prevent jank when searching. The height prop on Combobox is meant to support you providing the popover a fixed height, that's why min and max are also set. If you don't want the Popover to have a fixed height, you can you just remove the height prop from the Combobox in TagsAutocomplete.

@chloerice - We do need the height. When the height prop is set in the combobox, the height of the popover is fixed. It does not collapse if the search result is less than the height. In the polaris example, if we enter text for search, the popover size is reduced based on the results. But when the height prop is provided, it does not reduce. It stays fixed. I am trying to fix this problem with this PR.

Hey @ShabanaRumane! It sounds like what you want is more fine-grained control so that you can change the TagsAutocomplete from having a fixed height to having a min-height only? If you want the combobox to respond to the height of the contents, removing the height will give you that behavior. While that is not the intended UX, I understand that there are use cases where a Popover needs min/max only and don't have any issues with opening up the API to give that full control to consumers 💯

[chloerice]

Suggested change

	Adding maxHeight and minHeight as props to Popover.Pane and Combobox
	Added support for setting `maxHeight` and `minHeight` on `Popover.Pane` and `Combobox`

[translation-platform]

Localization quality issues found

The following issues may affect the quality of localized translations if they are not addressed:

• The value Clear for key Polaris.ActionList.SearchField.clearButtonLabel is very short. Short strings are more likely to be misunderstood by translators without context. Please provide additional context for the translators if possible.
• The value Search for key Polaris.ActionList.SearchField.search is very short. Short strings are more likely to be misunderstood by translators without context. Please provide additional context for the translators if possible.
• The value Search actions for key Polaris.ActionList.SearchField.placeholder is very short. Short strings are more likely to be misunderstood by translators without context. Please provide additional context for the translators if possible.

Please look out for other instances of this issue in your PR and fix them as well if possible.

Questions about these messages? Hop in the #help-localization Slack channel.

[kyledurand]

Makes sense to me, just one small clean up note 👍