[adityalenova]

What

AvatarStack slides its avatars apart on hover regardless of the visitor's motion preference. Closes #8649.

.AvatarItem declared:

transition:
  margin 0.2s ease-in-out,
  opacity 0.2s ease-in-out,
  mask-position 0.2s ease-in-out,
  mask-size 0.2s ease-in-out;

The margin part moves avatars across the screen, which is what prefers-reduced-motion is for. The rest of the library already opts in to motion rather than out of it — Skeleton, ProgressBar, SegmentedControl, Breadcrumbs, TooltipV2 all wrap their animation or transition declarations in @media (prefers-reduced-motion: no-preference) — so this brings AvatarStack in line with them.

How

The transition goes inside the media query and nothing else moves. The expanded positions come from the :hover / :focus-within rules further down the file, so with motion reduced the stack still reveals every avatar, it just gets there in the same frame:

.AvatarItem {
  /* ... */
  flex-shrink: 0;

  @media (prefers-reduced-motion: no-preference) {
    transition:
      margin 0.2s ease-in-out,
      opacity 0.2s ease-in-out,
      mask-position 0.2s ease-in-out,
      mask-size 0.2s ease-in-out;
  }
}

Verification

Two e2e tests added to e2e/components/AvatarStack.test.ts. They assert the behaviour rather than the stylesheet — the reduced-motion one measures the last avatar's position before and after hovering to prove the reveal still happens:

$ npx playwright test e2e/components/AvatarStack.test.ts -g "expands on hover|keeps the hover transition"
  2 passed (5.4s)

• reducedMotion: 'reduce' → computed transition-property: all with transition-duration: 0s, and hovering the body still moves the last avatar to a larger x and leaves it visible.
• reducedMotion: 'no-preference' → transition-property still contains margin and the duration is 0.2s, 0.2s, 0.2s, 0.2s.

npx stylelint packages/react/src/AvatarStack/AvatarStack.module.css reports no new problems (the three --stackSize-* warnings are pre-existing, at lines 26-34), and npx prettier --check passes on all three files.

A changeset is included (patch).

Notes

The end states are identical in both branches of the media query, so the existing visual regression baselines should hold. Playwright's animations: 'disabled' (set in playwright.config.ts for toHaveScreenshot) already fast-forwards the animated path to those same end states, so mid-transition pixels were never part of a baseline.

[changeset-bot]

🦋 Changeset detected

Latest commit: 265fa57

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota.