Skip to content

Increase component border radius

Per the decision in https://gitlab.com/gitlab-org/gitlab/-/issues/568908#note_2763982372, component border radius will be increased to match the project studio exploration.

The following design tokens and components are addressed in !5153 (merged):

  • Action design tokens
  • Control design tokens
  • Button
  • Card
  • Form controls
  • Modal
  • Pagination

The following design tokens and components are addressed in !5169 (merged):

  • Feedback design tokens
  • Alert
  • Banner
  • Popover
  • Toast
  • Tooltip

Other:

Remaining items to address:

  • Shared components
  • Components that use deprecated styles, but that aren't deprecated themself (like GlFormCombobox)

The following components are addressed in Figma via independent branches (current approach is manual updates sans variables until design tokens can be reliably synced with Figma variables):

Warning

Order of completion is important because contextual overrides may be necessary!

  • Focus ring (should support multiple radii — probably just needs to add a larger one)
  • Button (excluding link variant)
  • Form controls (override radius for nested close and clear buttons)
    • Base prefix / suffix (when changes aren't coming from button)
    • Base input child
  • Alert
  • Banner
  • Button group
  • Date picker (only change the base calendar container, the date component should remain unchanged)
  • Modal
  • Pagination
  • Popover
  • Sorting
  • Toast
  • Token
  • Tooltip
Edited by Jeremy Elder