Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Components: add sortable, multi-selectable list #66413

Open
3 tasks
ciampo opened this issue Oct 24, 2024 · 6 comments
Open
3 tasks

Components: add sortable, multi-selectable list #66413

ciampo opened this issue Oct 24, 2024 · 6 comments
Labels
Needs Accessibility Feedback Need input from accessibility Needs Design Needs design efforts. [Package] Components /packages/components [Type] Feature New feature to highlight in changelogs.

Comments

@ciampo
Copy link
Contributor

ciampo commented Oct 24, 2024

As discussed in #64686 (review), we'd like to add a new component to the @wordpress/components package to render a "sortable, multi-selectable list".

So far

#64686 showcases the first need for such a component, although we should consider visual and API design first before getting to build it.

In terms of visual design, this is what exists in #64686 👍

Image

And in technical terms we'd likely want to

use Composite for the listbox and arrow key navigation. The other interactions will likely need to be custom.

This may be a chance to consider abstracting some of the listbox work into its own separate component (see #65801).

Next steps

At a very high level

  • Agree on design and UX (cc @WordPress/gutenberg-design )
  • Agree on functionality and API design (cc @WordPress/gutenberg-components )
  • Implement the component as private, iterate until we feel good to stabilize it

cc @swissspidy

@ciampo ciampo added [Package] Components /packages/components [Type] Feature New feature to highlight in changelogs. Needs Design Needs design efforts. labels Oct 24, 2024
@jameskoster
Copy link
Contributor

Could this be a use case for ItemGroup?

Here's a rough mockup based on the designs in #64445:

Image

@ciampo
Copy link
Contributor Author

ciampo commented Oct 24, 2024

@swissspidy what do you think?

I will note that, in any case, this would be:

  • ItemGroup for the sorting
  • combobox for the "search + select a language from a list" part

For the combobox part, we'd need to establish if the current ComboboxControl component checks all requirements. If it doesn't, we could go with a custom Ariakit implementation and then replace it with ComboboxControlV2 when ready?

@swissspidy
Copy link
Member

Interesting, thanks for sharing!

It's quite the deviation from the current battle-tested solution, which is based on the listbox pattern. At first glance it seems to cover the functionality for mouse users, but it misses things like a visual indication of the currently selected element, so that you can easily move and remove items using keyboard shortcuts. But I'll have to defer a detailed analysis to the accessibility team :)

Design-wise we'd have to see how well it could be integrated into the wp-admin/options-general.php page

@jameskoster
Copy link
Contributor

but it misses things like a visual indication of the currently selected element, so that you can easily move and remove items using keyboard shortcuts

In terms of keyboard navigation I would expect something similar to the List layout in Data Views:

list.mp4

I suggest this design mainly because compared to the version in wp-admin it has a lot of potential for reuse, particularly in the editor where similar ad hoc creations exist already (see custom shadow style creation).

@mtias
Copy link
Member

mtias commented Oct 27, 2024

I like the idea of itemgroup being a good candidate for systematizing these views. I believe I saw a few similar cases on Woo and other plugin options where a short list of items with built in drag and drop / reorder would be a solid addition. Folks were lookign at data views for it, but that seems way overboard for these simpler use cases that don't need flexible columns, data type, and various sorting options.

@jasmussen
Copy link
Contributor

Related to the ItemGroup, there are some mockups later in the thread based on this exact conversation.

@afercia afercia added the Needs Accessibility Feedback Need input from accessibility label Dec 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Accessibility Feedback Need input from accessibility Needs Design Needs design efforts. [Package] Components /packages/components [Type] Feature New feature to highlight in changelogs.
Projects
None yet
Development

No branches or pull requests

6 participants