smockle
commented
3 years ago Props suggested by issues in other GitHub repos:
-
To support usage as a controlled component, add props analogous to
DropdownMenu’s internalselection/selectstate (which supports uncontrolled usage) and internalopen/setOpenstate -
Add props for
onOpenandonClosecallback functions, and invoke them whenDropdownMenu’sOverlayopens or closes, respectively.
Requires #1064 and https://github.com/primer/components/issues/1056 Pre-requisite for https://github.com/primer/components/issues/1071
Description
DropdownMenus are used to select a value from a finite, non-user-provided list of values presented in a Popover, which is propagated to the DropdownMenu’s Source.
DropdownMenus may be positioned above or beside their Source.
While type-to-select may be supported, DropdownMenus never contain a search field. If a search field is required, SelectPanel is a more-suitable component.
List options according to how frequent they're used. Don’t make users scan through a long list of disorganized options. To help users focus on what's relevant, place the options used most often at the top.
Menus can use a Bottom sheet mobile variant that provides room for additional items, longer descriptions, and iconography.
Resources
Figma: Prototype:
Screenshots
Components
DropdownMenu
Behaviors
A DropdownMenu component renders an ActionList (
role="listbox") containing DropdownMenuListItems (role="option") into a Popover.note: Does the correct
role(and related attributes, e.g.aria-expanded,aria-owns,aria-haspopup,aria-autocomplete,aria-controls,aria-activedescendant) for a DropdownMenu and its Source depend on how the DropdownMenu is positioned (above or beside) relative to its Source? I think not, because the Source is never inside a DropdownMenu.DropdownMenuListItem
Behaviors
A DropdownMenuListItem component could be built on the ActionListItem component, to reduce props API surface area (i.e. so library consumers don’t need to use ActionListItem directly).
ActionMenuListItems should have the option role.
Props
name:
type(note: as noted in ActionListItem,variantwould be consistent with Primer’s existing prop naming) type:"singleSelection" | "multiSelection"default:"singleSelection"description: Defines the list item type, affecting the style of the list item checkbox. (Passed through to ActionListItem.)name:
leadingVisualtype:React.ReactElementdescription: An optional visual to accompany the list item. It supports octicons, avatars, or other custom elements. (Passed through to ActionListItem.)name:
texttype:stringdescription: The primary text in the list item. Use sentence case. (Passed through to ActionListItem.)name:
descriptiontype:string?description: A quick description of the list item. (Passed through to ActionListItem.)name:
descriptionTypetype:"inline" | "block"description: Defines how the description text will be placed in the list item. An inline description appears adjacent to the text prop, while block places it below in a new line. (Passed through to ActionListItem.)