Add Searchable Listbox to Page and IndexTable's actions

[MitchLillie]

Searchable Listbox for Page and IndexTable actions

Actions are used to interact with resources as well as launch apps. Adding a search box and a "show {n} more" link allows Merchants to better find the action they're looking for.

Required components

The Page component will depend on the Listbox and Text field components.

The IndexTable component will also depend on the Listbox and Text field components.

Examples

Note: All of the below apply to both Page and IndexTable. The component that activates them is the "More actions" button for Page and the kebab button (when items have been selected) for IndexTable.

Searchable listbox with action sections

This is shown when:

• there are built-in actions in addition to app actions (shows different sections)
  • Note: on narrower screens, built-in actions become collapsed into the listbox
• there are more than 10 total items (shows the searchbar)
• there are 10 or fewer items in a specific section (does not show the "show all {n} actions")

Searchable list

This is shown when:

• there are only app actions to display, no built-in (does not show different sections)
  • Note: on narrower screens, built-in actions become collapsed into the listbox
• there are more than 10 total items (shows the searchbar)
• there are more than 10 items in a specific section (shows the "show all {n} actions")

App actions list

This is shown when:

• there are only app actions to display, no built-in (does not show different sections)
  • Note: on narrower screens, built-in actions become collapsed into the listbox
• there are 10 or fewer total items (does not show the searchbar)
• there are 10 or fewer items in a specific section (does not show the "show all {n} actions")

Props

I propose that this behavior be built-in to Polaris and made available without a prop.

Best practices

The searchable listbox for actions should:

• Enable merchants with large numbers of extensions and built-in actions to find what they're looking for
• Not get in the way of merchants with few extensions or built-in actions

Context

This proposal is part of the Action Extensions project. As we provide Partners new ways to add extensions, we anticipate the need for searching and organizing the actions menus will increase.

References

• Action Extensions tech doc - https://docs.google.com/document/d/1BEAHpkfeyUTaxW3B18LjojimDmqNLr1Fc2wfpMXzQ64/edit
• Mockups for Action Extensions - https://www.figma.com/proto/afrUykUTB0n4GB4evE5F6R/%F0%9F%92%8EAdmin-UI-extension-patterns?node-id=398-111475&scaling=scale-down&page-id=295%3A118673&starting-point-node-id=398%3A111475&show-proto-sidebar=1
• Post in Admin UX (WxM) with an initial proposal - https://shopify.workplace.com/groups/1294395484626415/permalink/1321299791935984/
• Investigation of changes needed - https://github.com/Shopify/app-ui/issues/36#issuecomment-1468527331

[MitchLillie]

cc: @chloerice @AaronSpringut

[chloerice]

Mitch and I discussed this use case in depth. I think using the searchable list pattern is the best path forward. The only difference in this case would be that Listbox would be replaced with ActionList, as Listbox is for input selection and this use case is for searchable menu actions. The ActionList as it is today has a lot of whitespace and either needs to increase in density across the board (ideal), or support a condensed variant (not ideal), because right now the bulk action menu rollup in Shopify/web overrides the CSS of ActionList.Item in order to reduce the excess padding.

[BaggioGiacomo]

Hi @MaxCloutier, @MitchLillie
Is it possible to change the placeholder of the searchbar inside the ActionList?
I don't want it do be Search actions, I want it to be just Search or Search field

(Shopify Forms app do this)