Component Design
Background/Goal
The DropdownMenu component needs to be designed and specified before its implementation as part of the TypeaheadSearch component.
| This Figma file contains the specifications for the Dropdown Menu component. |
User stories
As a designer and developer, I need to be able to reuse a system-compliant DropdownMenu, in order to combine it with components that need to display a list of selectable items (such as Dropdown/Select, Combobox, Lookup, TypeaheadSearch).
Considerations
- The DropdownMenu component wraps a list of MenuItems (see design task: T300625)
The Menu component should display and accommodate (in terms of height) a number of items that is set by default. The number should of course be overridden in case that the available number of options < default number of displayed items. This number should be based on current patterns and probably be between 6 and 8 (to be validated with the rest of the PatternLab team).(Not part of this task's acceptance criteria; will be handled in T306932)
Implementers of the component should be able to define the number of items to be displayed by default. Recommendations regarding the minimum (3) and the maximum (10) number of items will be provided.(Not part of this task's acceptance criteria; will be handled in T306932)
Implementers of the component should be able to enable (or disable – depending on what we consider to be the default) the scroll functionality(Not part of this task's acceptance criteria; will be handled in T306932)
- The menu can display a loading state: initially, due to e.g. an API delay; or as a way to indicate that options are being refreshed (in case it's combined with a typeahead input)
Development considerations
The DropdownMenu is what can be considered a "subcomponent": a system element that can only accomplish its purpose when combined with some types of input. We might want to document this fact (as well as allowed combinations) as part of the component's documentation to prevent potential misuse.
Acceptance criteria (or Done)
- All the interactive states and behavior of the DropdownMenu (based on the current visual design) are documented.
- All the visual properties of the DropdownMenu are specified
- Keyboard navigation support is defined
Component implementation
Background
This component (called Menu) has been implemented in Codex, but is missing some new elements.
Acceptance criteria
- All elements of the design spec are met and approved by the design team
- New version of the component meets accessibility standards
- New Menu features are demonstrated on the docs site
