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_badge only displays (out of date) information for beta features, it can't be used for experiment features.
  • Rather than try and change the exist shared/beta_badge to match GlExperimentalBadge, I thought it would be better to create a new component with parity, migrate, and then remove shared/beta_badge .

is component will be documented in design.gitlab.com in a follow-up MR.

Related to: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/tree/main/packages/gitlab-ui/src/components/experimental/experiment_badge

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 Screenshot 2025-11-28 at 10.20.30.png
No component Screenshot 2025-11-28 at 10.20.35.png

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.

Edited by Dan MH

Merge request reports

Loading