Skip to content

Dropdown - Evaluate design direction and design tokens

Purpose

Evaluate current use of design tokens for the dropdown component in light of gitlab-org/gitlab-services/design.gitlab.com#1886 (closed) and the dark mode design direction that was explored in order to update the current design tokens to get closer to the design direction while addressing current considerations.

Dropdown dark mode design direction

The original direction (middle below) that used a lighter background was found to be problematic in other components where contrast would be lower than acceptable (see !4640 (merged)). For the time being, the updated design direction is an intentional adaptation to align with the decisions in that MR until we can do larger exploration with more elements and styles. Although it doesn't fully satisfy the desire for a dropdown to feel as apparent as possible, it does satisfy most, if not all of the other goals that follow which lead to a more modern UI.

  • Downplay borders by not visually defining the panel edges with a light border and by using darker (knockout) borders to separate sections within the panel to the effect that borders recede as content comes forward. This reduces the number of elements casting light which simplifies the appearance.
  • Input feels inset to differentiate between content entry and option selection.
  • Subtly overlap other content.
Current Original design direction (not spec) Updated design direction
CleanShot_2024-11-06_at_14.31.22_2x CleanShot_2024-11-06_at_14.29.58_2x CleanShot_2024-11-06_at_14.28.06_2x

Constraints and challenges

  • Panel should feel layered on other content (this is achieved with a shadow, similar to other overlapping components).
    • With an intentionally limited array of neutrals, the panel will not always have a different background from the content it overlaps (as seen in the screenshots above). In addition to the shadow, the nature of the panel overlapping and visibly interrupting content below is a signifier of its presence. In other words, while brightness can be a signifier of depth, it isn't the only one.
  • In the case of a listbox the panel contents are known, but a disclosure can contain a wide variety of content.
  • Level AA contrast levels must be met for all possible content and content states contained within the panel.
  • Currently, the dropdown styles use their own set of design tokens, but the desire is for most related components to share a common visual vocabulary. Any change to the dropdown should be weighed in concert, even if the design tokens are currently contextual.
Example of failing contrast

CleanShot_2024-11-06_at_13.07.46_2x

Related components and elements

The following are related in that they overlap other content or appear brighter and more forward.

  • Drawer
  • Modal
  • Popover
  • Tooltip
  • Section

Next steps

  • Take a holistic look at visual direction (both original and current) to discover and address contrast issues, included relationships with other design tokens and components.
  • Create an MR to update dropdown design tokens.
  • Consider any next steps for the semantic design token layer.
Edited by Jeremy Elder