Page MenuHomePhabricator

Define and add “Menu” component to the DSG
Closed, DeclinedPublic

Description

Define and add “Menu” component to the Design Style Guide

Acceptance criteria

  • Collect current implementations across products
  • Define general rules on appearance and interactivity
    • Size and (dynamic) placement
    • Interactivity/states
    • Additional menu item elements like icons or thumbnails or interactive elements
    • Menu item overflow behaviour
  • Add component to DSG

Collection of current implementations

Some examples in use right now:

image.png (1×1 px, 173 KB)

RCFilters

Event Timeline

Vector has several instances of "navigation menu buttons", which use the checkbox hack to open/close a menu primarily containing links. These menus are not considered "true" ARIA menus as they don't use "menu" and "menuitem" roles application behavior. Will the DSM Menu component handle this use case, or will there be another "NavigationMenu" component? Considering "menu" is often a ambiguous and confusing UI term, I think it'd be valuable to distinguish between the different use cases and semantics as much as possible.

User Links menu: https://jmp.sh/8LkGmXb
Language variant menu: https://jmp.sh/0b5kOt0
No js ULS menu: https://jmp.sh/NFtrx0G

Also, would the photo linked in the description be better described as a combobox/listbox? "

A combobox is a widget made up of the combination of two distinct elements: 1) a single-line textbox, and 2) an associated pop-up element for helping users set the value of the textbox. The popup may be a listbox, grid, tree, or dialog."

With DSG's best pieces becoming part of Codex this task is declined.