[Combobox] Add an option to limit the amount of displayed chips

[macandcheese]

Description

The Combobox can often become crowded when many chips are selected.

Propose to add a limitChips(name tbd) property that appends all additional chips after that numeric value to a non-dismissible "+n" chip.

Questions to answer:

• What chips are visible - is it decided by order entered, alphabetically, etc.
• Should there be an affordance for "no individual chips" - as in, "4 selected", 6 selected", "1 selected", etc.
  • If so, is that exclusive from this request? If not, how do they interact?
• What happens when the combobox is interacted with - do the "+3" chips appear in-combobox? in-dropdown? nowhere?

Acceptance Criteria

As a user, I can choose a number of chips to display, after which, all selected items would be appended to a non-dismissible catch-all.

Also note of Aaron's comment

For example, limit-chips="2" would result in:

This would result in a display of <chip (1) ><chip 2 (x) ><+n>

Relevant Info

MUI's "limit tags" https://mui.com/components/autocomplete/#limit-tags

No response

Which Component

Combobox

Example Use Case

My product offers a state-selection Combobox to a user. Often times, a user can select 5+ states, which clutters the combobox and causes my UI to break. I want to limit the amount of chips displayed.

[LeviRemi]

Customer example where they dislike how other containers in the same row grow in height to accommodate the ever-expanding combobox. This layout also does not scale well for large quantities of selection.

[LeviRemi]

One note from a customer. If you pursue the "no individual chips" option and have "# Selected" as the singular chip, please consider swapping "#" with "All" if every item in the list is selected:

"1 Selected" -> "2 Selected" -> "All Selected" on a list of 3, for example.

[mMa2]

The displayed selected chips keep growing and occupy too much real estate, hide other components on the UI, it is too crowded for the user to see other items. Please consider options as 1)shrink the display text 2) have a textbox labelled down to show selected items, no displaying chips

[rmstinson]

@ashetland and I met on this and discussed some ideas. Here's a link to some of the scratch work we're iterating on for discussion's sake only: https://www.figma.com/file/ujZYHdimnVC3yA2PyYOH85/Epic%3A-Combobox-Redesign?type=design&node-id=43%3A58814&t=q3Gb7wa0njY5GVwU-1

[ashetland]

Proposing a new display-mode prop that would address the need to limit the number of chips displayed while also making Combobox a more responsive component.

Full designs and context with other issues from epic #6720 are available in this Figma file.

This property does not affect selection-mode=”single”.

displayMode Values

show-all (default)

Current behavior — Combobox grows in height to accommodate chips as items are selected.

single

Combobox displays a single chip that shows the total number of selected items or “All selected” when all items are selected. (See related designs for select-all, issue #2311.)

fit-to-line

Combobox will display chips in the order they are selected, but will not grow in height. Additional selections are added to a chip that displays the number of selected items not shown (+n). When the width is small enough to only accommodate a single chip, that chip follows the behaviors outlined in single (total number or “All selected”.)

Note

Chips that display “All selected” or “n selected” or “+n” are not closable. This is to prevent a conflict with the clear-all button.

[geospatialem]

There are a few remaining items needed for resolution, including tests and additional team reviews. Reallocated to the November release for inclusion. cc: @brittneytewks

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified in 2.0.0-next.1 with the following Codepen for selectionMode of "ancestors" and "multiple" with selectionDisplay of "all", "fit", and "single".