Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

new(demo): respect prefersReducedMotion and leverage in happo #1037

Merged
merged 11 commits into from
Jan 27, 2021

Conversation

williaster
Copy link
Collaborator

@williaster williaster commented Jan 27, 2021

This PR adds the following logic discussed in #1030

📝 Documentation

  • checks for the prefersReducedMotion media query in the /xychart, /axis, and /patterns demos, and uses animated or unanimated components accordingly (also removes animationTrajectory controls accordingly).

EDIT: even if prefersReducedMotion=true, users can still toggle animation on/off.

🏠 Internal

  • sets prefersReducedMotion: true for happo tests, and removes the happo rendering timeouts that were previously needed for animations

Tested the happo examples locally, and tested gallery examples with / without prefersReducedMotion set on my OS.

@lencioni @kristw @hshoff

@coveralls
Copy link

coveralls commented Jan 27, 2021

Pull Request Test Coverage Report for Build 516451309

  • 0 of 0 changed or added relevant lines in 0 files are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage remained the same at 61.749%

Totals Coverage Status
Change from base Build 514010163: 0.0%
Covered Lines: 1786
Relevant Lines: 2753

💛 - Coveralls

Copy link
Contributor

@lencioni lencioni left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love it!

packages/visx-demo/happo/gallery.tsx Outdated Show resolved Hide resolved
from max
</label>
</div>
{!prefersReducedMotion && (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it might be nicer to always render these controls, and then just disable them and add a message explaining why so that people who visit this page with prefers reduced motion are still able to see how it can be used. It would be even better if there was a way for these people to override and enable the animations anyway if they want to see the demo with the animations without having to mess with their OS settings or whatever.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good call, I updated the examples to have an enable animation toggle with a default determined by prefersReducedMotion.

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants