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
:experimentand:betabadge 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:
- Create
Pajamas::ExperimentBadgeComponentwith parity toGlExperimentBadge - Document the component in design.gitlab.com
- Migrate existing
shared/beta_badgeusages to the new component - Remove the outdated
shared/beta_badgepartial
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
Related
- MR implementing the component: gitlab-org/gitlab!214511 (merged)
- Vue migration issue: gitlab-org/gitlab#582194 (closed)
- Parent epic: gitlab-org&17549 (Component: Badge)
- Part of the broader component maturity improvement effort
Edited by Dan MH