Add a shimmer to the merge button behind a feature flag

What does this MR do and why?

Adds an animated gradient ring and soft glow around the merge button in the merge request widget, shown on hover. It's a Play Labs experiment from the Play Labs design sprint, behind a new beta feature flag, merge_button_shimmer, off by default and checked per signed-in user.

Styles live in the merge request page bundle instead of @gitlab/ui. Reviewers on the design system MR agreed to implement in GitLab first, scoped to this button, so other teams can't adopt the effect before its usage is documented. It can move to @gitlab/ui later.

  • The class goes on the merge button's GlButtonGroup in ready_to_merge.vue. That group always holds the merge button, alone or with the merge-moment dropdown, so one class covers both shapes and the ring wraps the whole control.
  • Vue only applies it while the button is usable. isMergeButtonDisabled already covers an in-flight merge request and auto-merge strategies still loading.
  • It doesn't render under reduced motion, and it steps aside while focus is inside the button group so it never covers the focus ring.
  • Colors are existing brand purple, pink, and orange tokens behind a pale neutral highlight. light-dark() gives dark mode the lighter tints and light mode the deeper ones, which don't wash out on white.

Commits:

  • Add the merge_button_shimmer feature flag
  • Add a shimmer to the merge button behind a feature flag

References

Screenshots or screen recordings

Before After

How to set up and validate locally

  1. In a Rails console:

    Feature.enable(:merge_button_shimmer)
  2. Open any merge request that's ready to merge, for example http://127.0.0.1:3000/gitlab-org/gitlab-test/-/merge_requests/10

  3. Hover the merge button: a gradient ring and glow appear around it, or around the whole split button when the merge-moment dropdown is shown.

  4. Check the ring disappears when the button is disabled, while keyboard focus is in the button group, and with reduced motion enabled in the OS.

  5. Toggle light and dark mode.

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 Adam Ferch

Merge request reports

Loading
Loading