Add Pajamas::ExperimentBadgeComponent
What does this MR do and why?
Add Pajamas::ExperimentBadgeComponent
This creates a Rails ViewComponent equivalent to the GitLab UI GlExperimentBadge component, supporting both 'experiment' and 'beta' badge types with informative popovers.
This component is important because it contains key legal text. The current approach for multiple components is likely to miss updates — which is already the case. A single vue implementation, and haml implementation reduces this risk.
Key features:
- Supports both :experiment and :beta types
- Configurable popover placement (top, bottom, left, right)
- Links to official GitLab development stages documentation
- Reuses existing BetaBadge translations
- Includes Lookbook preview with custom layout for popover support
This component will be used to replace the existing _beta_badge.html.haml partial in a follow-up MR, providing better flexibility and parity with the GitLab UI component.
notes:
- the existing
shared/beta_badgeonly displays (out of date) information forbetafeatures, it can't be used for experiment features. - Rather than try and change the exist
shared/beta_badgeto match GlExperimentalBadge, I thought it would be better to create a new component with parity, migrate, and then removeshared/beta_badge.
is component will be documented in design.gitlab.com in a follow-up MR.
Close button limitations
This approach uses Bootstrap popovers which don't have a built-in close button prop (or at least I couldn't find it).
References
Screenshots or screen recordings
| Before | After |
|---|---|
| No component |
|
| No component |
|
See it in the design system: https://design.gitlab.com/patterns/feature-management#glexperimentbadge
How to set up and validate locally
See it in the lookbook
https://127.0.0.1:3000/rails/lookbook/inspect/pajamas/experiment_badge/
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

