== Component Design
=== Background/Goal
The DropdownMenu component needs to be designed and specified before its implementation as part of the TypeaheadSearch component.
{F35021266}
| [[ https://www.figma.com/file/lhz7AnNneQIHUEVVzxebx4/Dropdown-Menu---T300565?node-id=2%3A7024 | 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
1. The DropdownMenu component wraps a list of MenuItems (see design task: T300625)
2. Menus can be configured to present a limited amount of items
3. In case there's no limitation applied, users can access to further menu items on scroll.
4. The menu can display an initial loading state (e.g. due to an API delay)
==== 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.
=== To be implemented
==== Number of items limit
This could be configurable via a prop, or we could instruct library users to limit the number of menu items they provide to the Menu component in order to set a specific limit. If we do add a prop, it should probably default to `null`, or no limit.
==== Add scroll behavior
We will need to:
- Set a max height of the menu, which may need to be calculated on the fly
- Test out and improve scrolling behavior so it meets UX standards
- Enable batch fetching of results by emitting an event when an Intersection Observer placed at the end of the menu is hit, then loading the new menu items (without deleting the old ones or causing any layout shift)
- Ensure keyboard navigation still works, and that an interactive footer (e.g. the search footer in TypeaheadSearch) can still be reached
- Figure out what to do, if anything, when there are no more results to show (show a message? just stop fetching results and assume the user will know what that means?)
==== Add inline progress bar
See T301275. Once that task is complete, the inline, indeterminate progress bar can be added to the Menu component.
=== 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 (e.g. a Lookup demo that fetches results and demonstrates the progress bar)