Draft: Add opt-in shimmer class to GlButton

What does this MR do?

Adds an opt-in gl-shimmer class for Playlabs experiments: an animated gradient ring and soft glow that appear when you hover a primary confirm button.

It's a class, not a prop, so the experiment stays out of GlButton's documented API. It lives in scss/shimmer.scss, so removing it is a one-file delete. It's inert on other variants and in button groups, except a split button, where the ring wraps the whole control.

The default is the OG brand glow: purple, pink and orange behind a pale highlight. Light mode takes the deeper 02p brand steps, since the pale tints wash out on white. Every stop is a --gl-shimmer-* custom property.

There are no stories. The effect only paints on hover, so storyshots can't see it.

Try it

Hover the buttons in the live example: Shimmer on a split button.

Integrations

None needed: additive and opt-in.

Does this MR meet the acceptance criteria?

Toggle the acceptance checklist
  • The “What does this MR do?” section explains the reasons for and scope of the change.
  • Relevant labels are applied, including ~"component:button".
  • The MR is added to a milestone.
  • A changeset is added (minor).
  • Follows GitLab UI's contributing guidelines.
  • Accessibility: decorative and hover-only, steps aside for the focus ring, and doesn't render under prefers-reduced-motion or on disabled buttons.
Edited by Adam Ferch

Merge request reports

Loading
Loading