Page MenuHomePhabricator

Menu: Support headers for grouping options
Open, LowestPublic

Description

Component design

Background/Goal

MenuItems present a 'header' variant with different visual style which allows the creation of groups of options within menus

Screenshot 2022-03-30 at 10.46.26.png (888×1 px, 68 KB)

This Figma file contains the design specifications for the header item component.
User stories

As a designer and developer, I need to be able to use the 'header' variant of the MenuItem component in order to present users with a distinguishable group of selectable options.

Considerations

Please do not infer an implementation preference from the phrasing used in this task: either creating a 'header' variant of the MenuItem component or adjusting its style via a prop are perfectly appropriate options.

Acceptance criteria (or Done)

  • All the visual properties of the header variant of the MenuItem are specified

Implementation

Background

Acceptance criteria


Notes:

Event Timeline

AnneT renamed this task from Add MenuItem type header to Support opgroup-like headers in Menus.Aug 2 2022, 10:01 PM
AnneT renamed this task from Support opgroup-like headers in Menus to Support optgroup-like headers in Menus.
AnneT added a subscriber: Catrope.

while implementing a series of research recommendation for Wikifunctions, we noticed that in Figma it's possible to set a MenuItem to type "Header"

CleanShot 2023-11-13 at 12.27.18@2x.png (812×2 px, 149 KB)

but we later discovered that this is not possible in code/Codex (only a footer option is available), as described by this task. Given this use case, is there space to increase the priority of this task?

(as a general feedback, it would be helpful to have better parity between Figma and Codex to avoid any potential confusion)

CCiufo-WMF renamed this task from Support optgroup-like headers in Menus to Menu: Support optgroup-like headers.Nov 29 2023, 3:18 PM
CCiufo-WMF renamed this task from Menu: Support optgroup-like headers to Menu: Support headers for grouping options.

while implementing a series of research recommendation for Wikifunctions, we noticed that in Figma it's possible to set a MenuItem to type "Header"

CleanShot 2023-11-13 at 12.27.18@2x.png (812×2 px, 149 KB)

but we later discovered that this is not possible in code/Codex (only a footer option is available), as described by this task. Given this use case, is there space to increase the priority of this task?

(as a general feedback, it would be helpful to have better parity between Figma and Codex to avoid any potential confusion)

@AAlhazwani-WMF I've updated the MenuItem in Figma to reflect that the Menu Header is not implemented in Codex yet:

  1. Included a warning message below the component's prop/variant indicating that the Header is not implemented in Codex yet.
  2. Include the same message in the main component's description so designers can read it when using this variant.

Captura de pantalla 2023-11-29 a las 12.17.24.png (1×2 px, 255 KB)

We will review the rest of Figma components in T349020: Codex Figma library: update it to match the components guidelines in the Codex site to ensure they are aligned with the Codex demo, and we will indicate the variants/props that are not implemented yet in Codex.

NOTE: If you finally use this Menu Header in your project, please make sure to indicate the developers that this variant is not implemented in Codex yet, linking to this task if needed.