Button group and selected button - Evaluate design direction and design tokens

Purpose

Evaluate current use of design tokens for the button group component and button selected states (emoji, todo, notifications) 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.

Button group dark mode design direction

TBD

🎨 Exploration

Concept	Notes
	Close to how the current emoji button is styled. For the rest, it's quite strong and could detract from the rest of the UI, especially when some button groups are set-it-and-forget-it view preferences.
	Could work if the border stands out enough for all surfaces. The dark selected background might be odd on lighter surfaces.
	This could work well, especially since the selected states don't look like any other button states (if we were to use solid blue here, for example, that would look like the primary confirm button). Emoji would be the exception, but it does serve a different purpose.
	If we prefer to use blue and have one style for all, then something like this could work. Testing with more emoji would be recommended. Adding a shadow or glow to the emoji has been tried, but it can also blend with the emoji.
	A direction like this would allow us to handle individual buttons separately from groups. Padding and spacing would have to be explored further in the group, but it could be done.

Constraints and challenges

• There are currently four different treatments for buttons that have a selected state (see table below).
• We do state in Pajamas that an icon button shouldn't be used to toggle between two states, but changing the current UI for todo and notifications is out of scope.
• Must work on any surface.
• Must work with text, icon, and emoji.
  • Emoji can vary in color and will not always have good contrast on a background.
• An individual selected button must not be confused with other button variants.

Todo and notifications	Emoji	Group	Editor

Related components and elements

• Button
• Toggle
• Checkbox
• Radio button
• Tabs
• Dropdown listbox

Next steps

• Open a draft MR to test a few directions.
  • Determine design direction(s) that address all three use cases and make a choice.
• Create an MR to update dropdown design tokens.
• Consider any next steps for the semantic design token layer.