feat(OverflowMenu): Use next dropdown and dropdownItems #8359

tlabaj · 2022-11-10T19:50:23Z

What: Closes #8071

Updated the OverflowMenu to

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

Additional issues:

patternfly-build · 2022-11-10T19:58:51Z

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

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

packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx

packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md

packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx

nicolethoen · 2023-01-09T18:30:56Z

Looks like the error is a typescript issue:

evwilkin · 2023-01-25T20:33:54Z

packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md

@@ -16,6 +16,7 @@ propComponents:
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
 import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';



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 · 2023-02-10T21:45:11Z

popperMatchesTriggerWidth

@mcoker what are your thoughts on this?

mcoker · 2023-02-13T16:24:51Z

@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.

packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md

tlabaj · 2023-02-15T19:36:05Z

@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 · 2023-02-15T19:49:03Z

@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 · 2023-02-15T21:23:24Z

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

packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md

packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx

tlabaj · 2023-03-03T21:50:31Z

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.

This reverts commit 92ff72c.

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.

packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx

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 · 2023-03-17T17:43:05Z

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 · 2023-03-17T19:15:05Z

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! 🎉

tlabaj added ux review css review accessibility labels Nov 10, 2022

tlabaj requested review from mcarrano, nicolethoen, mcoker, mmenestr and thatblindgeye November 10, 2022 19:50

thatblindgeye requested changes Nov 11, 2022

View reviewed changes

nicolethoen linked an issue Dec 1, 2022 that may be closed by this pull request

Overflow menu - Refactor overflow menu to use the next dropdown #8071

Closed

tlabaj force-pushed the overflow_menu branch from b35f734 to f611728 Compare December 19, 2022 18:30

tlabaj force-pushed the overflow_menu branch from f611728 to d604a24 Compare January 9, 2023 15:22

evwilkin reviewed Jan 25, 2023

View reviewed changes

tlabaj force-pushed the overflow_menu branch from 3995886 to 2110830 Compare February 1, 2023 22:51

nicolethoen reviewed Feb 7, 2023

View reviewed changes

thatblindgeye requested changes Feb 7, 2023

View reviewed changes

tlabaj force-pushed the overflow_menu branch from de1ffb7 to 1a02596 Compare February 10, 2023 22:01

thatblindgeye mentioned this pull request Feb 13, 2023

feat(OverflowMenu): Use next dropdownItems patternfly/pf-codemods#258

Closed

tlabaj force-pushed the overflow_menu branch from 9429475 to ff6d6c0 Compare February 13, 2023 22:56

thatblindgeye reviewed Feb 14, 2023

View reviewed changes

packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md Show resolved Hide resolved

thatblindgeye requested changes Feb 27, 2023

View reviewed changes

packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md Outdated Show resolved Hide resolved

packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx Outdated Show resolved Hide resolved

tlabaj force-pushed the overflow_menu branch from 7424385 to 445550d Compare March 3, 2023 21:23

Titani added 18 commits March 15, 2023 16:00

updates aria-labels

f5b087b

add item id

675ab78

update type for itemId

6dcefc9

add dropdownlist and update integration tests

5f698b7

update example that use overflowmenu

ef93a7f

update import

8e46f28

fix example imports

73f7bfe

remove alias

889ff06

fix rebase

c31de21

fix conflicts

7b7d7cf

revert merge issue

c6789d6

add back aliases

9b0bf3c

add onOpenChange to examples

06f4dba

updates from comments

7e97b02

add alias

eb760aa

update failing test

3f6b753

Revert "update failing test"

69f11a7

This reverts commit 92ff72c.

fix demo

f5c9f94

tlabaj force-pushed the overflow_menu branch from 929ac89 to f5c9f94 Compare March 15, 2023 20:09

thatblindgeye reviewed Mar 16, 2023

View reviewed changes

packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx Show resolved Hide resolved

Titani added 2 commits March 16, 2023 17:02

fix toolbar example

35339e1

update table overflow actions example

f6953d7

thatblindgeye approved these changes Mar 17, 2023

View reviewed changes

thatblindgeye added the css approved label Mar 17, 2023

mcarrano reviewed Mar 17, 2023

View reviewed changes

mcarrano approved these changes Mar 17, 2023

View reviewed changes

thatblindgeye merged commit d356f4a into patternfly:v5 Mar 17, 2023

thatblindgeye mentioned this pull request Mar 21, 2023

feat(Dropdown): deprecated old and promoted Next #8835

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(OverflowMenu): Use next dropdown and dropdownItems #8359

feat(OverflowMenu): Use next dropdown and dropdownItems #8359

tlabaj commented Nov 10, 2022

patternfly-build commented Nov 10, 2022 •

edited

nicolethoen commented Jan 9, 2023

evwilkin Jan 25, 2023

nicolethoen left a comment

thatblindgeye left a comment

tlabaj commented Feb 10, 2023

mcoker commented Feb 13, 2023

tlabaj commented Feb 15, 2023

mcoker commented Feb 15, 2023

tlabaj commented Feb 15, 2023

tlabaj commented Mar 3, 2023

thatblindgeye left a comment

thatblindgeye left a comment

mcarrano left a comment

tlabaj commented Mar 17, 2023 •

edited

mcarrano left a comment

patternfly-build commented Mar 17, 2023


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

feat(OverflowMenu): Use next dropdown and dropdownItems #8359

feat(OverflowMenu): Use next dropdown and dropdownItems #8359

Conversation

tlabaj commented Nov 10, 2022

patternfly-build commented Nov 10, 2022 • edited

nicolethoen commented Jan 9, 2023

evwilkin Jan 25, 2023

Choose a reason for hiding this comment

nicolethoen left a comment

Choose a reason for hiding this comment

thatblindgeye left a comment

Choose a reason for hiding this comment

tlabaj commented Feb 10, 2023

mcoker commented Feb 13, 2023

tlabaj commented Feb 15, 2023

mcoker commented Feb 15, 2023

tlabaj commented Feb 15, 2023

tlabaj commented Mar 3, 2023

thatblindgeye left a comment

Choose a reason for hiding this comment

thatblindgeye left a comment

Choose a reason for hiding this comment

mcarrano left a comment

Choose a reason for hiding this comment

tlabaj commented Mar 17, 2023 • edited

mcarrano left a comment

Choose a reason for hiding this comment

patternfly-build commented Mar 17, 2023

patternfly-build commented Nov 10, 2022 •

edited

tlabaj commented Mar 17, 2023 •

edited