New Select design that works better when MultiSelect is used

[acelaya]

When we introduced support for multiple selection in selects via MultiSelect, we did not make any visual change to the component itself.

That means the listbox allows multiple options in the "selected" state when using that component, but we got some user feedback that it is not immediately obvious this is possible.

A new design was proposed, where checkboxes are displayed on every option when multi-selection is allowed, helping users understand when a select allows multiple options and when it doesn't: https://www.figma.com/design/rugQ2tONStRF3RL9UXZaGW/Search-Explorations?node-id=1862-693&t=dYvG3ythTTeUNTCy-0

Notice the design above also covers the topic of including an optional search box. That's not meant to be covered by this issue and will be addressed separately.

For consistency, the standard select (AKA single-select or simply Select) will suffer some UI changes as well (they can be seen in the design), which we want to propagate everywhere where the component is used.

Behavior definition

Based on what is described in slack, the listbox should have three possible modes, via the two existing components:

• Select -> single-selection only. Users won't be able to select more than one option.
• MultiSelect -> multi-selection. Options will always display a checkbox next to them to indicate more than one can be selected.
• MultiSelect with Shift key support -> it will look like single-selection mode and behave like it (clicking an option will deselect previous one), but while Shift key is pressed, checkboxes will appear and multi-selection will be allowed.

I would suggest deferring the third option for now, and focusing on having a single select and a multi-select mode, each with the needed UI changes to make it more user friendly, and later enhance those modes if needed.

TODO/WIP

• New look and feel
• Use checkboxes in MultiSelect options
• Multi-selection via checkboxes only
• Allow applying and cancelling multi-selection (EDIT: We are delaying this piece of work and implement it only if needed)
  
• Add darker border to input while listbox is open
• Make "nullish" values be properly marked as selected.
• Make MultiSelect take control keys (Shift, Ctrl and/or CMD) into consideration for multi-selection #1673: Extracted to its own issue

[acelaya]

Only two pieces of work are left, but we have decided to defer them and implement them afterwards if needed.

I have tested the component in downstream projects and it works well:

select-ui-client-2024-08-21_15.28.46.mp4

select-ui-dashboard-2024-08-21_15.29.45.mp4

select-ui-grading-bar-2024-08-21_15.31.12.mp4

select-ui-groups-2024-08-21_15.32.14.mp4

I'll close this as completed and release a new version of the library.