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 or combobox.
Current
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:
- Include a tip pointing to the referring trigger.
- Ensure the panel uses the correct shadow.
- Use a small
🔍 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.
👁🗨 View initial concepts
Blue highlight | Gray highlight | |
---|---|---|
Edge-to-edge checkmark ✓ | ![]() |
![]() |
Inset rectangle checkmark ✓ | ![]() |
![]() |
Edge-to-edge border ⎮ | ![]() |
![]() |
🎛 View more examples for comparison
Blue highlight | Gray highlight | |
---|---|---|
Edge-to-edge checkmark ✓ | ![]() |
![]() |
Inset rectangle checkmark ✓ | ![]() |
![]() |
Edge-to-edge border ⎮ | ![]() |
![]() |
Additional considerations:
- Tip pointing to trigger element
- Unbox the header (shadow on scroll)
- Reduce header text size
- Universal action placement (for actions like "Unassign" or "Remove all," etc.)
- Smaller search icon in search input
- Better left edge alignment
- Smaller label color swatch that also matches the label shape
- Increased outer border radius for inset rectangle option for accurate border radius scaling