Show static shimmer outline with reduced motion
What does this MR do and why?
Follow-up to !246440 (merged).
In that MR the entire ::before pseudo-element carrying the "More features" shimmer was nested inside @media (prefers-reduced-motion: no-preference), including the static inset outline. The outline is not motion-dependent, so scoping it that way meant users who prefer reduced motion saw a completely plain nav item, visually identical to one where the feature does not exist. The same applies to browsers that do not support the media feature, since no-preference does not match.
Honoring prefers-reduced-motion should mean removing the motion, not removing the affordance. This MR splits the treatment so there is a motion-free equivalent:
- The static inset outline is now drawn for everyone.
- The content layering (
z-indexon the icon and label) moves out of the query too, since the pseudo-element now exists in all cases. - Only the gradient sweep and animation remain inside
@media (prefers-reduced-motion: no-preference).
No markup, behavior, or dismissal logic changes. The callout still removes the treatment once the user opens the feature library modal.
References
- Follow-up to !246440 (merged)
- Original shimmer behavior context: !243508 (merged)
- Feature library shimmer: restore the reduced-mo... (#607550 - closed) • Austin Regnery • 19.3
Screenshots or screen recordings
Reduced motion: On
| Before | After |
|---|---|
 |
 |
How to set up and validate locally
- Enable the feature flag at https://gdk.test:3000/rails/features/feature_library_modal
- Go to a page with the sidebar, for example https://gdk.test:3000/flightjs/Flight/-/merge_requests
- In DevTools, open Rendering and set Emulate CSS prefers-reduced-motion to
reduce. Reload and confirm the "More features" nav item shows a static themed outline with no animation. - Set it back to
no-preference. Reload and confirm the gradient sweep still plays and fades out as before. - Open the modal and reload to confirm the treatment no longer appears in either mode.
To replay after dismissal, remove the callout in the Rails console:
User.find_by_username('root').callouts.where(feature_name: :feature_library_shimmer_seen).delete_allMR 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.