Dropdown > Update styles

## Background

Dropdowns (trigger button that opens a panel of options) in GitLab historically used a check icon to identify a selection. Awhile ago it was proposed to update to using literal checkbox and radio `<input>`s to better represent the selection (single/multi-select). After more learning around what constitutes options within a dropdown, it' seems's clear that using literal form elements is _not_ ideal and doesn't reflect the semantics for options within a [listbox](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role) or [combobox](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role).

**Current**

![image](/uploads/6a2018fb1ac333b0f94f7b04c557d8b4/image.png)

## Proposal

Update the design of options within a dropdown panel to represent a selection without using literal form elements. This can be based on the previous design and should include the following states:

- Rest
- Hover (`:hover`)
- Focus (`:focus`)
- Active/pressed (`:active`)
- Selected

Since multi-select is a function of the component and context, and not an individual option (that uses `role="option"`), the design of an option can be the same for single and multi-select.

**Proposed design**:

![image](/uploads/6002e7764c2aa09e6f495efc19428139/image.png)

- Include a tip pointing to the referring trigger.
- Ensure the panel uses the correct [shadow](https://design.gitlab.com/layout/layers#shadows).
- Use a small :mag: icon in the search input to help with alignment and feel more in scale with the text (might consider this elsewhere in the future too).
- Selected item has rounded rectangle container.
- Border radius increased on panel to keep in proportion to border radius of elements within.
- Left aligned header.
- Option for panel action (to clear all, unassign, etc.).

### Concepts

There's a matrix of options:

- Edge-to-edge option vs. inset rounded rectangle. Space is the primary consideration, but more space could benefit distinguishing options at the cost of a bit more scrolling. The inset rounded rectangle would also be closer to how flyouts are handled in the left navigation.
- Gray vs. blue selected item background. While gray keeps the UI more subdued, the use of blue aligns with our prescribed use to indicate a current or active state and also provides more differentiation with hover states.
- Checkmark vs. border selection indicator. Space is also a consideration here, but what type of indicator makes identifying a selection quick, clear, while not impeding readability is most important.

<details><summary>👁‍🗨 View initial concepts</summary>

|  | **Blue highlight** | **Gray highlight** |
| ------ | ------ | ------ |
| **Edge-to-edge checkmark ✓** | ![image](/uploads/853b75f239fe11992139b5eaace0b749/image.png) | ![image](/uploads/43f06cd9dce1c413726feee9046cc30a/image.png) |
| **Inset rectangle checkmark ✓** | ![image](/uploads/b514790592a5fa37299dd43697a571cd/image.png) | ![image](/uploads/0072c55722317f8e707e09e8410add5a/image.png) |
| **Edge-to-edge border ⎮** | ![image](/uploads/0f7bd70470b6a06512387e197b09792d/image.png) | ![image](/uploads/0ffc282090a3f475310013761ac4594c/image.png) |

</details>

<details><summary>🎛 View more examples for comparison</summary>

|  | **Blue highlight** | **Gray highlight** |
| ------ | ------ | ------ |
| **Edge-to-edge checkmark ✓** | ![image](/uploads/c3ebc834761bccf63bd209894014e882/image.png) | ![image](/uploads/460b5b7655352680db9781e67d550c50/image.png) |
| **Inset rectangle checkmark ✓** | ![image](/uploads/da79ea31840c41c4f27c01bcb0632521/image.png) | ![image](/uploads/1f5d8bb617ee2072a8b4f0bf79655e07/image.png) |
| **Edge-to-edge border ⎮** | ![image](/uploads/5ad4eeb430ec9403a74c455199a716da/image.png) | ![image](/uploads/52dcab7d48a244918e6f30716dd367dc/image.png) |

</details>

---

**Additional considerations**:

![image](/uploads/3bba28255f23804735cafbb7123285ab/image.png)

1. Tip pointing to trigger element
1. Unbox the header (shadow on scroll)
1. Reduce header text size
1. Universal action placement (for actions like "Unassign" or "Remove all," etc.)
1. Smaller search icon in search input
1. Better left edge alignment
1. Smaller label color swatch that also matches the label shape
1. Increased outer border radius for inset rectangle option for accurate border radius scaling

Story points: 5.0