-
Notifications
You must be signed in to change notification settings - Fork 715
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
Conversation
Pull Request Test Coverage Report for Build 516451309
💛 - Coveralls |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Love it!
from max | ||
</label> | ||
</div> | ||
{!prefersReducedMotion && ( |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This PR adds the following logic discussed in #1030
📝 Documentation
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
prefersReducedMotion: true
for happo tests, and removes the happo rendering timeouts that were previously needed for animationsTested the happo examples locally, and tested gallery examples with / without
prefersReducedMotion
set on my OS.@lencioni @kristw @hshoff