Simplified badges FF
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 (merged) 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 |
||
md |
||
lg |
Why
In gitlab-ui!3307 (merged) 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 (merged))
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:
- Badge in Button component
- 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
How to set up and validate locally
- Enable FF
echo "Feature.enable(:simplified_badges)" | rails c
- Verify badges are all the same size
Related to feat(badge): Reduce variants (gitlab-ui!3307 - merged), !140239 (merged), #424396 (closed)