primer / brand

React components and Primitives for GitHub marketing websites
https://primer.style/brand
MIT License
72 stars 32 forks source link

Disable motion when reduced-motion preference is enabled #805

Closed rezrah closed 2 weeks ago

rezrah commented 2 weeks ago

Summary

Resolves https://github.com/primer/brand/issues/804

Animation is already heavily reduced when this OS setting is enabled, but staggered animation has not been disabled.

This change disables all motion, to ensure a consistent experience for users with this preference enabled.

List of notable changes:

What should reviewers focus on?

Steps to test:

  1. Review the code diff
  2. Use this story to test the lack of motion

Contributor checklist:

Reviewer checklist:

Screenshots:

Please try to provide before and after screenshots or videos

Before After
https://github.com/user-attachments/assets/11b6bfbb-49b0-4fa8-8dc6-87927976912b https://github.com/user-attachments/assets/efacddfb-9566-4064-87a3-f4cd6c390217
Before After
![Screenshot 2024-10-30 at 16 08 17](https://github.com/user-attachments/assets/56b8dd94-002c-4ffd-9e56-d43576ad0331) ![Screenshot 2024-10-30 at 16 08 33](https://github.com/user-attachments/assets/a77c52c6-5bc3-48a1-af77-7da59a90d9a6)
changeset-bot[bot] commented 2 weeks ago

🦋 Changeset detected

Latest commit: e505b49a849611eb22972692941c216ea38d9904

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

This PR includes changesets to release 6 packages | Name | Type | | ------------------------ | ----- | | @primer/react-brand | Patch | | @primer/brand-primitives | Patch | | @primer/brand-e2e | Patch | | @primer/brand-fonts | Patch | | @primer/brand-config | Patch | | @primer/brand-storybook | 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

github-actions[bot] commented 2 weeks ago

🟢 No design token changes found

github-actions[bot] commented 2 weeks ago

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.