Proposal: Matched item styles (often from search

Problem

There are lots of places in the product where we change the foreground and background color to indicate an item is matching a set of conditions. For example, matches of a search string.

Examples from across the product
Image Description URL

image.png

 Use design token for in-page settings search result

Screenshot 2025-02-06 at 16.44.58.png

Screenshot 2025-02-06 at 16.45.59.png

Screenshot 2025-02-06 at 16.47.00.png

 Global search

Screenshot 2025-02-06 at 16.44.21.png

 Wiki sidebar

Screenshot 2025-02-06 at 16.35.59.png

 Text editor quick command dropdown

Screenshot 2025-02-06 at 16.43.53.png

 Child items search in work items

Screenshot 2025-02-06 at 16.43.26.png

 Command palette

Screenshot 2025-02-06 at 16.41.05.png

Proposal

  • Create a new highlight design token group with more specific categories within (!4447 (closed)).
  • Update feedback and status group definitions to be more clear (!4447 (closed)).
  • Use the following design proposal to build out the tokens.
    • Orange is closest to many browser and OS defaults for highlighting matches.
    • Blue is used for many targeted items today. Using it for hover (non-interactive) instead of neutral (like current table row hover) minimizes conflicts with neutral surfaces and avoids pedantic decisions about hover states on table rows when they are fully or partially interactive.
highlight.match.* hightlight.target.*
image image
Archive Design system provide design tokens and guidance for the default way to style these items.

Justification

  • Cross platform need identified
  • Not linked to a specific feature
  • Inconsistent styles
    • make GitLab not feel like a single platform
    • degrades usability

Requirements

  • Easy to apply, preferably with a single class
  • Maintain appropriate contrast against any background color and in any mode
  • Work across a range of contexts, such as inside a component

Solution

Search results

For in-page search results, for example global search and settings.

  • Use <mark> for semantics.
  • Use useragent styles to style foreground and background colors.

Autocomplete

For dropdown autocompletes, for example command pallet and quick actions.

  • Feature teams to create their own solutions to highlight partial matching.
  • In the future, groupdesign system could look at these as part of a larger typography effort.
Edited by Jeremy Elder