[charts] Ensure reduce motion preference disables animation on page load#14417
[charts] Ensure reduce motion preference disables animation on page load#14417JCQuintas merged 16 commits intomui:masterfrom
reduce motion preference disables animation on page load#14417Conversation
|
Deploy preview: https://deploy-preview-14417--material-ui-x.netlify.app/ |
CodSpeed Performance ReportMerging #14417 will not alter performanceComparing Summary
|
|
Failing tests are unrelated #14457 |
…mation-on-page-load
| export type AnimationProviderProps = { | ||
| /** | ||
| * If `true`, animations are skipped. | ||
| * @default undefined |
There was a problem hiding this comment.
Not a big fan of @default undefined because all props are by default undefined
May be more interesting to describe what happends by default
If unset, charts addapt the user's
prefers-reduced-motionpreferences
By the way since false does not allow to overrid the user preferences (which I think is expected) why not setting false as the default value?
There was a problem hiding this comment.
Adjusted it to:
If unset or
false, the animations respects the user'sprefers-reduced-motionsetting.
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
…mation-on-page-load
Fixes #13477
Could be a starting point for #13964
AnimationProviderwhich currently only holds theskipAnimationvalueuseReduceMotionhook, as it got merged into the provider aboveskipAnimation, but that felt unnecessary, and the chosen solution could path a way to customising animationsBy moving it to the provider, and passing it as a prop to all animations, we ensure
immediateis called with the correct prop. I've leftGlobals.assignin place just in case, but it shouldn't be necessary anymore.Testing
Emulating reduced motion in chrome
https://developer.chrome.com/docs/devtools/rendering/emulate-css#emulate_css_media_feature_prefers-reduced-motion
Running locally
pnpm --filter docs build && pnpm --filter docs serve