Menu/MenuItem - should support drill-[up/out] icon/layout in menu list

[mcoker]

re: #9587 and this issue to make the same update in core patternfly/patternfly#5950. Not sure if this is a breaking change or not, probably depends on how we go about implementing it.

In the drilldown with breadcrumb menu examples, in the breadcrumb dropdown, we have items that present (and seem to function) as drill-[up/out] items with a back arrow at the start of the item, and clicking on the item takes you up a level in the breadcrumb hierarchy. However, our component doesn't support this layout - our examples are using a user-supplied icon passed as the icon prop -

patternfly-react/packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx

Lines 130 to 138 in e27aac2

	<DropdownItem
	key="dropdown-start"
	icon={<AngleLeftIcon />}
	onClick={(event: any) =>
	drillOut(event, 'breadcrumbs-drilldownMenuStart', 'group:app_grouping_start', startRolloutBreadcrumb)
	}
	>
	Start rollout
	</DropdownItem>

Some issues with this are:

1. It doesn't work by default in RTL since we can't predictably target and mirror/flip that menu item icon for the user since that could be a non-directional icon or they may have opted for some other type of directional icon there that shouldn't be flipped.
2. Since it's a user supplied icon, there is the possibility for inconsistency
3. I could be wrong, but I don't know if a user could pass an actual icon to any of those items since the prop is being used for the back arrow.

We have a direction="up" prop that puts the correct icon container and icon on a drill-up/out icon and works in RTL, but that is specific to the top/first item in a drilled-in drilldown menu. The prop applies other logic to that item that isn't appropriate for use in the breadcrumb items, so we can't use that prop there.

patternfly-react/packages/react-core/src/components/Menu/MenuItem.tsx

Lines 366 to 370 in e27aac2

	{direction === 'up' && (
	<span className={css(styles.menuItemToggleIcon)}>
	<AngleLeftIcon aria-hidden />
	</span>
	)}

Ideally we could do something like update the direction prop so it could be used in these breadcrumb menu items or maybe introduce some new kind of prop for an item that indicates clicking it does some kind of "back" action and it just borrows the way direction="up" includes the icon in the item.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.