docs(Dropdown): add composable dropdown demo, convert composable menu demos to typescript #6807

nicolethoen · 2022-01-17T17:35:44Z

Adds the Composable Dropdown Variants demo to the Composable Menu demos

patternfly-build · 2022-01-17T17:43:33Z

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

mcarrano

I think this looks good. My only question is that since this only represents four of many possible dropdown variants we support in the Dropdown component, do we need to include a note that this is only a sample of what you can do (vs. a complete list)?

jessiehuff

This looks good to me from an a11y standpoint. It does remind me of pre-existing issues that Dropdown has though such as tooltips on dropdown items and the Append menu document body issue.

jpuzz0 · 2022-01-18T20:46:04Z

packages/react-core/src/demos/ComposableMenu/examples/ComposableActionsMenu.tsx

+
+export const ComposableActionsMenu: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selectedItems, setSelectedItems] = React.useState([]);


We can add a type to the useState of number[] here.

And based on a separate discussion we had, boolean to the one above it.

I agree with adding a type to React.useState([]). Adding boolean to React.useState(false) seems redundant, considering this type is inferred

jpuzz0 · 2022-01-18T20:55:31Z

packages/react-core/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx

+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+
+export const ComposableContextSelector: React.FunctionComponent = () => {
+  const items: any[] = [


Is there no type associated with these or are they meant to be any?

jpuzz0

My comments aren't blocking. The demo looks good to me!

wise-king-sullyman

Looks solid. I have one typing nit.

wise-king-sullyman · 2022-01-19T20:34:00Z

packages/react-core/src/demos/ComposableMenu/examples/ComposableDrilldownMenu.tsx

+  const [activeMenu, setActiveMenu] = React.useState<string>('rootMenu');
+  const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
+  const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
+  const [menuHeights, setMenuHeights] = React.useState<any>({});


Nit: wouldn't this any be better typed with an index signature like { [id: string]: number }?

nicolethoen · 2022-01-20T16:39:32Z

I have a pending question to @mattnolting

I’m noticing that the drilldown menu example here: https://patternfly-react-pr-6807.surge.sh/demos/composable-menu#composable-drilldown-menu has an extra scroll bar when I begin drilling down. We are setting the menu height correctly (i think) but is there some extra padding or something that isn’t being accounted for?

… demos to typescript

nicolethoen · 2022-01-20T17:59:55Z

This is ready to go in (i think)

The issue I noted above in an existing bug with the drilldown menu - I noted it here: #6842

wise-king-sullyman

LGTM!

nicolethoen · 2022-01-20T18:52:20Z

@mcarrano I opened an issue to build the split button that is required to implement the other dropdown variants. I am not sure if it is reasonable at this point to assume every single example will be exactly re-implemented composably... I think collectively, these demos are telling a story of how versatile our composable approach is. and people can open issues if they want to see more examples?

mcarrano · 2022-01-20T19:03:28Z

@nicolethoen Yes, I agree. I don't think it's necessary to re-implement every example unless we are specifically asked for it.

kmcfaul

lgtm. Just need to re-add the beta flag back to the menu drilldown example.

mcoker

LGTM! Just one thing. I'm inclined to keep what's in this PR and we make a couple of changes in core to make the element that will hold an icon or image in the toggle work better.

mcoker · 2022-01-20T21:12:42Z

packages/react-core/src/demos/ComposableMenu/examples/ComposableDropdwnVariants.tsx

+        return (
+          <MenuToggle
+            ref={toggleRef}
+            icon={<Avatar src={avatarImg} alt="avatar" />}


It looks like we use .pf-c-menu-toggle__image in core for this versus .pf-c-menu-toggle__icon, though I don't know that we need both classes - curious if we could just use a single class for both.

Some other thoughts:

.pf-c-menu-toggle__image shouldn't be used right now since there is a bug in the spacing - the right margin for the image isn't being applied, so the image will touch the adjacent text.

the dropdown image toggle image element has some additional CSS. It applies a top/bottom margin, too, and uses inline-flex and flex-shrink: 0;. I'm not sure about the top/bottom margin, but I think the flex properties are good adds.

the image isn't really aligned. we could apply line-height: 1; align-self: center to the __image/icon element. This is what it looks like in the PR.

I think we could just apply all of this to a single element that holds an icon or image. wdyt @mattnolting?

@mcoker I actually added the flex-shrink prop in 4617 as the image was distorted when width became constrained. I agree, we only need one container element and it should be __image IMO.

I'm not sure about the top/bottom margin, but I think the flex properties are good adds.

We should nix top/bottom margin

the image isn't really aligned. we could apply line-height: 1; align-self: center to the __image/icon element. This is what it looks like in the PR.

👍 👍 👍

patternfly-build · 2022-01-20T22:11:03Z

Your changes have been released in:

[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
[email protected]

Thanks for your contribution! 🎉

nicolethoen requested review from kmcfaul, tlabaj and wise-king-sullyman January 17, 2022 17:35

tlabaj added the ux review label Jan 18, 2022

tlabaj requested review from mcoker and mcarrano January 18, 2022 18:57

tlabaj added the css review label Jan 18, 2022

mcarrano reviewed Jan 18, 2022

View reviewed changes

jessiehuff approved these changes Jan 18, 2022

View reviewed changes

jpuzz0 reviewed Jan 18, 2022

View reviewed changes

dlabrecq approved these changes Jan 19, 2022

View reviewed changes

nicolethoen removed the request for review from kmcfaul January 19, 2022 16:16

nicolethoen force-pushed the composable_dropdown_demos branch from ac6a824 to 6a6cb39 Compare January 19, 2022 16:31

jpuzz0 self-requested a review January 19, 2022 19:37

jpuzz0 approved these changes Jan 19, 2022

View reviewed changes

wise-king-sullyman reviewed Jan 19, 2022

View reviewed changes

nicolethoen added 4 commits January 20, 2022 12:50

docs(Dropdown): add composable dropdown demo, convert composable menu…

3d93430

… demos to typescript

update types for actions menu and context selector demos

e97e5d3

use stricter types

bf71add

a little more type specificity

8db64a8

nicolethoen force-pushed the composable_dropdown_demos branch from f648ce2 to 8db64a8 Compare January 20, 2022 17:51

wise-king-sullyman approved these changes Jan 20, 2022

View reviewed changes

nicolethoen requested a review from kmcfaul January 20, 2022 19:15

kmcfaul approved these changes Jan 20, 2022

View reviewed changes

but back erroneously removed beta tag

26f3d39

mcoker reviewed Jan 20, 2022

View reviewed changes

kmcfaul approved these changes Jan 20, 2022

View reviewed changes

kmcfaul merged commit 139eda6 into patternfly:main Jan 20, 2022

mattnolting mentioned this pull request Jan 21, 2022

Dropdown and menu toggle updates patternfly/patternfly#4635

Closed

nicolethoen deleted the composable_dropdown_demos branch February 8, 2023 13:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(Dropdown): add composable dropdown demo, convert composable menu demos to typescript #6807

docs(Dropdown): add composable dropdown demo, convert composable menu demos to typescript #6807

nicolethoen commented Jan 17, 2022

patternfly-build commented Jan 17, 2022 •

edited

Loading

mcarrano left a comment

jessiehuff left a comment

jpuzz0 Jan 18, 2022 •

edited

Loading

dlabrecq Jan 19, 2022

jpuzz0 Jan 18, 2022

jpuzz0 left a comment

wise-king-sullyman left a comment

wise-king-sullyman Jan 19, 2022 •

edited

Loading

nicolethoen commented Jan 20, 2022

nicolethoen commented Jan 20, 2022

wise-king-sullyman left a comment

nicolethoen commented Jan 20, 2022

mcarrano commented Jan 20, 2022

kmcfaul left a comment

mcoker left a comment

mcoker Jan 20, 2022

mattnolting Jan 21, 2022

patternfly-build commented Jan 20, 2022

docs(Dropdown): add composable dropdown demo, convert composable menu demos to typescript #6807

docs(Dropdown): add composable dropdown demo, convert composable menu demos to typescript #6807

Conversation

nicolethoen commented Jan 17, 2022

patternfly-build commented Jan 17, 2022 • edited Loading

mcarrano left a comment

Choose a reason for hiding this comment

jessiehuff left a comment

Choose a reason for hiding this comment

jpuzz0 Jan 18, 2022 • edited Loading

Choose a reason for hiding this comment

dlabrecq Jan 19, 2022

Choose a reason for hiding this comment

jpuzz0 Jan 18, 2022

Choose a reason for hiding this comment

jpuzz0 left a comment

Choose a reason for hiding this comment

wise-king-sullyman left a comment

Choose a reason for hiding this comment

wise-king-sullyman Jan 19, 2022 • edited Loading

Choose a reason for hiding this comment

nicolethoen commented Jan 20, 2022

nicolethoen commented Jan 20, 2022

wise-king-sullyman left a comment

Choose a reason for hiding this comment

nicolethoen commented Jan 20, 2022

mcarrano commented Jan 20, 2022

kmcfaul left a comment

Choose a reason for hiding this comment

mcoker left a comment

Choose a reason for hiding this comment

mcoker Jan 20, 2022

Choose a reason for hiding this comment

mattnolting Jan 21, 2022

Choose a reason for hiding this comment

patternfly-build commented Jan 20, 2022

patternfly-build commented Jan 17, 2022 •

edited

Loading

jpuzz0 Jan 18, 2022 •

edited

Loading

wise-king-sullyman Jan 19, 2022 •

edited

Loading