feat(OverflowMenu): Use next dropdown and dropdownItems

[tlabaj]

What: Closes #8071

Updated the OverflowMenu to

• Use next DropdownItems under the hood.
• Use next Dropdown in the examples.

Additional issues:

[patternfly-build]

Preview: https://patternfly-react-pr-8359.surge.sh

A11y report: https://patternfly-react-pr-8359-a11y.surge.sh

[nicolethoen]

Looks like the error is a typescript issue:

[evwilkin]

Add imports here before they're used in examples below

Suggested change

	import { Dropdown, DropdownList } from '@patternfly/react-core/next';

[nicolethoen]

By using an alias for Dropdown to call it DropdownNext in the examples, are we setting a precedent that will make updating the imports in the future harder for doing, with codemods for example, for people who copy that pattern and later want to switch from the next dropdown to the official dropdown, etc?

[thatblindgeye]

Looks good! I am noticing that in the examples, the menu width is only as wide as the kebab toggle, so all but the first letter the menu items get cut off. We could pass minWidth to the DropdownNext in the examples or expose the popperMatchesTriggerWidth prop in the Next Dropdown component to set it on Popper.

[tlabaj]

popperMatchesTriggerWidth

@mcoker what are your thoughts on this?

[mcoker]

@tlabaj since it's a dropdown menu, the menu should ideally have a min-width of the toggle width, but should grow to fit the size of the menu content if the content is wider than the toggle.

[tlabaj]

@thatblindgeye @mcoker this issue has been opened to address menu widths #8682

Should I leave this as is for now or add a width in the interim?

[mcoker]

@tlabaj IMO leave it as is, and update components that use popper to have the appropriate size set either as part of #8682, or maybe separate tasks for each thing that needs to be updated. I may be misunderstanding, but that issue says it will set defaults for <Menu>, so that may take care of this since it's using dropdown-next, which uses menu?

[tlabaj]

I may be misunderstanding, but that issue says it will set defaults for <Menu>, so that may take care of this since it's using dropdown-next, which uses menu?

@mcoker correct

[tlabaj]

Using the Dropdown as DropdownNext alias like other examples seems like it might be a temporary fix).

@erik @nicolethoen Correct. the alias is a temp solution until we deprecate old dropdown. Since there is an issue in the framework.

[thatblindgeye]

The above demos look to be loading now.

The below comment would also apply to Table's "Composable: Actions Overflow" example, as it has a similar class/styling issue.

[thatblindgeye]

Reapproving for the above comments from Sarah and myself 🎉

[mcarrano]

Looks good to me. Is there something specific I should be looking for?

[tlabaj]

Looks good to me. Is there something specific I should be looking for?

@mcarrano Just that the overflow menu appears as expected with the Next dropdown implementation.

[mcarrano]

Looks good to me. Is there something specific I should be looking for?

@mcarrano Just that the overflow menu appears as expected with the Next dropdown implementation.

It does!

[patternfly-build]

Your changes have been released in:

• @patternfly/react-code-editor@5.0.0-alpha.38
• @patternfly/react-core@5.0.0-alpha.38
• @patternfly/react-docs@6.0.0-alpha.41
• demo-app-ts@5.0.0-alpha.21
• @patternfly/react-integration@5.0.0-alpha.8
• @patternfly/react-table@5.0.0-alpha.38

Thanks for your contribution! 🎉