FilteredActionList inherits height and maxHeight from its parent

[jfuchs]

This PR updates FilteredActionList so that its root HTML element is styled with height: inherit; max-height: inherit. This prevents a bug where FilteredActionList sizes itself larger than the Overlay that contains it, preventing scrolling.

Closes https://github.com/github/primer/issues/333

Screenshots

before:

CleanShot.2021-09-30.at.10.11.37.mp4

after:

CleanShot.2021-10-05.at.12.09.13.mp4

Merge checklist

• Added/updated tests
• Added/updated documentation
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: fe18735

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	55.41 KB (0%)
dist/browser.umd.js	55.73 KB (0%)

[jfuchs]

@dusave was kind enough to verify that this fixes the bug in new projects

[jfuchs]

After speaking with @vdepizzol, I wanted to offer a tweak on this: Remove the height/maxHeight styling from FilteredActionList, but then extend FilteredActionList to accept styles via sx, then pass the height/maxHeight from SelectPanel's render of FilteredActionList:

<FilteredActionList
  // other stuff
  sx={{height: 'inherit', maxHeight: 'inherit'}}
/>

edit: gonna do this

[smockle]

Since the FilteredActionListProps interface now extends SxProp, someone may pass a listProps that includes sx, right? If they do, line 166 below will overwrite the sx value they pass. Would we want to merge (i.e. sx={{ ...listProps.sx, height: 'inherit', maxHeight: 'inherit' }})?

[jfuchs]

I might have this wrong, but I think we're safe as is because the SelectPanelProps type doesn't include an sx prop, and listProps is just a "rest" destructuring of the SelectPanel props?

[smockle]

@jfuchs I might be missing something, but it seems that SelectPanelProps does contain sx, via Omit<FilteredActionListProps, 'selectionVariant'>:

react/src/SelectPanel/SelectPanel.tsx

Lines 34 to 35 in c4926a2

	export type SelectPanelProps = SelectPanelBaseProps &
	Omit<FilteredActionListProps, 'selectionVariant'> &

[jfuchs]

Yep, sorry — you're right, it is in there. Updated!