Enhancement: Select all for combobox

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System

https://developers.arcgis.com/calcite-design-system/

Other

295 stars 76 forks source link

Enhancement: Select all for combobox #2311

Open jgibson02 opened 3 years ago

jgibson02 commented 3 years ago

Description

Provide a way to include a "select all/none" button for ~~a pick-list~~ Combobox

Acceptance Criteria

Relevant Info

Which Component

~~pick-list~~ Combobox

Example Use Case

In ArcGIS Velocity we have a page with a data grid for items with a dropdown filter for item status (currently a calcite-react MultiSelect):

We decided to add a "select all/none" button to the list since it's common for a user to want to quickly filter down to a single/few status types but then want to go back to seeing everything.

macandcheese commented 3 years ago

Super valid. Some thoughts:

This should be an opt-in functionality.
This has also come up about the combobox as well, so any solution should be designed with both of these components in mind (dropdown multi-select too ?).
- For combobox, this might require a new prop (also valid without the select-all use case), max-displayed-chips (?), any chips after which are appended to a “+n” chip.
- Invokes the follow up question, “can you click the "+n" chip to show those items”

bstifle commented 3 years ago

Here's my design for this!

Was thinking the "Select all" label could be authored however the terminology seems fit. Same with the "all items" chip

select all

macandcheese commented 3 years ago

I think we'll want to re-evaluate the above design - I also don't think this is valid for Dropdown.

The screenshot workflow in OP is valid for Combobox as shown, but likely also Pick List as described. @asangma do you have thoughts on select / deselect workflow in pick List?

Do we want to separate this out to scope the enhancements to Combobox from those to Pick List?

jcfranco commented 2 years ago

Do we want to separate this out to scope the enhancements to Combobox from those to Pick List?

I think separate issues would be good. Do we also need to include the value list too? cc @benelan

geospatialem commented 1 year ago

Related combobox issues with select all: #2162, #3074, #4738

geospatialem commented 1 year ago

Reassigning to June for design considerations prior to development.

ashetland commented 1 year ago

Updated issue title and request to scope to Combobox.

ashetland commented 1 year ago

Proposing a new select-all prop for Combobox. Full designs and context with other issues from epic #6720 are available in this Figma file.

Designs also include updates to selection icons and hover states related to work from #7181. Calcite Icons v3.24.2 is required.

github-actions[bot] commented 1 year ago

cc @geospatialem, @brittneytewks