Skip to content

Simplified badges FF

Sascha Eggenberger requested to merge simplified-badges-ff into master

What does this MR do and why?

Simplified badges FF: Reduce badge variants down to a single size, one size fits all 🎉

We're also simplifying the labels the same way, see Simplified labels FF (!140239 - merged)

What

This MR introduces the FF :simplified_badges:

For testing purposes we moved the changes from GitLab UI gitlab-ui!3307 directly to GitLab as this is a change which spans over the hole product and can make a lot of impacts.

Once verified we'll move things to GitLab UI and remove those overrides again from the product.

Variant Before After
sm badge_sm_before badge_after
md badge_md_before badge_after
lg badge_lg_before badge_after

Why

In gitlab-ui!3307 we try to reduce the GlBadge variants down to a single size to:

  • Increase hit target for small badges
  • Ease the developer experience
  • Streamline the use of badges

For easier testing we temporarily bring the updated badge styles to GitLab (behind this FF) and once verified we can refactor GitLab and move the styles into GitLab UI (MR: gitlab-ui!3307)

We've chosen a badge size which is in between the current sm and md variants which is 20px height. This seems to be the ideal middle ground to also align nicely within text blocks (like used in the markdown/rich text editor).

Exceptions

There are a few exceptions where we manually change the size of GlBadge to adjust to it's surrounding/parent component:

  1. Badge in Button component
  2. Badge in Avatars inline component

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

See gitlab-ui!3307

How to set up and validate locally

  1. Enable FF echo "Feature.enable(:simplified_badges)" | rails c
  2. Verify badges are all the same size

Related to feat(badge): Reduce variants (gitlab-ui!3307), !140239 (merged), #424396 (closed)

Edited by Sascha Eggenberger

Merge request reports