select all/remove all option in MultiSelect

[dakahn]

(original issue #4593)

Summary

There is an option to remove all the selected items from the multi select list, however if a user selected all the items and then clicked on remove all by mistake (for instance, if there is a narrow dropdown showing a list of 2 digit codes or something similar its not hard to press the remove all button by mistake), there is no way to select all with one click other than by clicking on individual items. In our case, we have drop downs with about a thousand items.

Justification

Business reason is that if there is an option to remove all selections, there should be an option to select all to undo if you remove all selections by mistake.

Desired UX and success metrics

A sample can be seen on the mdbootstrap multiselect page.

"Must have" functionality

There should be a way to select all the items in multiselect list with one click

[jnm2377]

I think this is definitely a fair ask. We see this in DataTable (select all on the toolbar). We also have an expand all option for expandable data table. I don't know what the design for this would look like. @carbon-design-system/design do y'all have any thoughts?

[aagonzales]

Yeah I think that seems fair to me as well. I wonder if it can be an optional feature or if it should always be there?

[laurenmrice]

I could see it as being an optional prop you can turn on. Deepending on if there are like 5 items vs. 25+ to choose from, people can decide to use a select all if they want to. We have gotten a lot of asks for this in the past.

[jnm2377]

Optional seems like a good idea, since some people might not need or want it.