[feat] Create <rh-dropdown> element

[wesruv]

Description

Make a dropdown that can accept links or buttons that has the correct a11y properties.

PFE-Dropdown was a solid attempt at this but the aria attributes are setup incorrectly, see: patternfly/patternfly-elements#2054 (comment)

I don't know anything about Patternfly React's dropdown, but it looks like it's following the same design and has features I'd be interested in: https://www.patternfly.org/v4/components/dropdown

One pattern that PFE didn't cover that it looks like PF React Dropdown did was the dropdown should close if it loses focus, and you should only be able to have one open at a time.

Acceptance Criteria

• Design done
• Development done

Image

Link to design doc

https://www.patternfly.org/v4/components/dropdown/design-guidelines

Other resources

No response

[wesruv]

I switched up the labels to what I think sounded right.

[bennypowers]

See also patternfly/patternfly-elements#2049

[markcaron]

Blocked by PFE 3.0 release (patternfly/patternfly-elements#2596)

[hellogreg]

Partially exists as rh-menu

[markcaron]

@adamjohnson @bennypowers @zeroedin, we should look into what's left to wrap up <rh-menu> to close this loop.

[marionnegp]

@markcaron, since the design here is referencing PFv4, do we want to revisit it quickly to make sure it's still the design direction we want to use? I don't think that should block starting to development for some of the typical dropdown functionality though.

[adamjohnson]

Indeed, I was just going to mention that we're missing a Figma for this component.

Also relevant for the design phase: <rh-dropdown> is likely made for freeform content (eg: primary nav dropdowns) whereas <rh-menu> follows the APG Menu Pattern:

A menu is a widget that offers a list of choices to the user, such as a set of actions or functions. Menu widgets behave like native operating system menus, such as the menus that pull down from the menubars commonly found at the top of many desktop application windows.

Looking at <rh-menu> right now, it looks like this:

<rh-menu> is not fully baked.