ebay-filter-menu: search field header

[randybascue]

Problem

We have received requests across multiple teams for a search field to be available as a header option in menus. The search field is preferred when there is a large amount of values in a menu and the list is being launched from a filter menu.

Solution

Add support for a search field in a header of the menu component.

Acceptance criteria

• A property is available to reveal a search field at the top of the menu.
• The search field narrows the list as characters are entered.
• The search field can be cleared quickly with a trailing clear button.
• The search field matches the design specifications.

Screenshots

Figma link

Engineering pre-requisites

• Supports dark mode.
• Supports responsive design.
• Tokens have been provided (or already exist).

[randybascue]

This is a ticket for discussion. Still needs to go through checks. Will discuss on Wednesday

[namtheho]

Related to this — https://www.figma.com/design/fKIKRqbxJF0IuP0yjIJrdC/Brand-Hub?node-id=1377-167641&node-type=frame&t=t3Z0qGXU5pJEwQIF-0

[agliga]

Should be good to implement, just need final specs from design.

[namtheho]

This is not applicable to us

Here are some additional context for the requirements pulled from this doc: https://docs.google.com/document/d/1_4pWNKJ-ZnJT6tRht7zibtlukhpzRJSi894-r4-bGUg/edit?tab=t.0

• Multi-Brand selector - functional requirements (designs here)
• Sort brands alphabetically
• Allow search for brands
• Once a brand is being typed, automatically start filtering for brands with each keystroke
• Only update dashboard content when apply button is clicked (i.e. selected brands do not impact the page data until the apply button is clicked)
• If the user has access to only one brand, disable drop-down
• Allow multi-select (up to 40)
• Differentiate between parent and children brands (i.e. hyphenation Parent Brand - child brand)
• Only children should be selectable, but once parent is selected, all children are selected. If Parent is unselected, all children are selected.
• Only show brands that are available in the selected marketplace
• Error state when no brand is found.

[randybascue]

[randybascue]

CleanShot.2024-11-04.at.10.39.50.mp4

[randybascue]

https://www.figma.com/design/jFbAR0o364WhsjELfxl2SI/Playbook-2.0-%2F-Components?node-id=7939-7963&node-type=frame&t=Oz2rCxRuOGwNIOBw-11

[randybascue]

@agliga @ArtBlue added visual examples, an animated example, and a link to the Playbook page with a section added for the search behavior

[randybascue]