Contextual menu scrolling

[huwshimi]

Done

• Add a prop to handle scrolling the contextual menu if it doesn't fit on the screen (handled in the same way as the search and filter dropdown: Scroll the search and filter dropdown #906).

QA

• Open src/components/ContextualMenu/ContextualMenu.stories.mdx.
• Scroll down to the "Toggle" story and duplicate the links objects so that there are quite a few links.
• add scrollOverflow: true, to the args.
• Run Storybook (yarn start).
• Open <storybook-url>/iframe.html?id=contextualmenu--toggle&viewMode=story
• Click on the button to open the menu.
• Resize your window so that the menu doesn't fit on the screen.
• The menu should resize so that it doesn't get cut off, and the content should scroll.

Screenshots

[webteam-app]

Demo starting at https://react-components-961.demos.haus

[vladimir-cucu]

Looks good to me! 🙂

[bartaz]

I don't mind having it directly implemented in React components, but seems like it would be good to ensure it's well supported from Vanilla perspective.

Currently Vanilla doesn't directly support this, and while adding max-height and overflow-x from React works now, without official Vanilla support we can't ensure it will not break at some point if changes are made to contextual menu.

I guess we could at least add an example in Vanilla with such use case (and max-height/overflow added) to make sure we don't break it by regression. Or maybe overflow-x could be set to auto by default, in CSS (I'm not sure if it would break something when it's not needed).

[huwshimi]

I don't mind having it directly implemented in React components, but seems like it would be good to ensure it's well supported from Vanilla perspective.

If we do decide to support this in Vanilla, we should also address the other dropdowns, like the one for the search and filter pattern, as we also had to fix that one recently as well: #906.

[huwshimi]

I don't mind having it directly implemented in React components, but seems like it would be good to ensure it's well supported from Vanilla perspective.

Currently Vanilla doesn't directly support this, and while adding max-height and overflow-x from React works now, without official Vanilla support we can't ensure it will not break at some point if changes are made to contextual menu.

I guess we could at least add an example in Vanilla with such use case (and max-height/overflow added) to make sure we don't break it by regression. Or maybe overflow-x could be set to auto by default, in CSS (I'm not sure if it would break something when it's not needed).

I've filed in issue so that we can follow up on this: canonical/vanilla-framework#4864.