Create and migrate HAML version of GlExperimentBadge

Problem to solve

The HAML shared/beta_badge partial in the GitLab monolith is outdated and only displays information for beta features. It cannot be used for experiment features and lacks parity with the Vue GlExperimentBadge component from GitLab UI.

This creates:

  • Inconsistent user experience between Vue and HAML implementations
  • Risk of missing important legal text updates across multiple implementations
  • Maintenance overhead from duplicated badge logic

Proposal

Create a Rails ViewComponent (Pajamas::ExperimentBadgeComponent) that provides parity with the GitLab UI GlExperimentBadge component.

Key features:

  • Support both :experiment and :beta badge types
  • Configurable popover placement (top, bottom, left, right)
  • Link to official GitLab development stages documentation
  • Reuse existing BetaBadge translations
  • Include informative popovers with legal text

Implementation steps:

  1. Create Pajamas::ExperimentBadgeComponent with parity to GlExperimentBadge
  2. Document the component in design.gitlab.com
  3. Migrate existing shared/beta_badge usages to the new component
  4. Remove the outdated shared/beta_badge partial

Benefits

  • Reduces risk of missing legal text updates by consolidating implementations
  • Provides better flexibility and feature parity with the Vue component
  • Improves maintainability by standardizing badge implementations
  • Aligns with the Badge component maturity initiative to standardize design and implementation across Vue, Rails, and Figma
Edited by Dan MH