From bd6049b6c0927eb5faced097511780f282f8a194 Mon Sep 17 00:00:00 2001
From: Ariya Hidayat <ariya@metabase.com>
Date: Wed, 9 Feb 2022 21:55:46 -0800
Subject: [PATCH] Dashboard checkbox should honor reduced-motion (#20385)
---
frontend/src/metabase/components/Swapper.jsx | 30 +++++++++++++++++---
1 file changed, 26 insertions(+), 4 deletions(-)
diff --git a/frontend/src/metabase/components/Swapper.jsx b/frontend/src/metabase/components/Swapper.jsx
index 0b4cc5247a8..698e7493c04 100644
--- a/frontend/src/metabase/components/Swapper.jsx
+++ b/frontend/src/metabase/components/Swapper.jsx
@@ -2,6 +2,8 @@
import React from "react";
import { Motion, spring } from "react-motion";
+import { isReducedMotionPreferred } from "metabase/lib/dom";
+
class Swapper extends React.Component {
state = {
hovered: false,
@@ -19,6 +21,11 @@ class Swapper extends React.Component {
const { defaultElement, swappedElement, startSwapped } = this.props;
const { hovered } = this.state;
+ const preferReducedMotion = isReducedMotionPreferred();
+ const springOpts = preferReducedMotion
+ ? { stiffness: 500 }
+ : { stiffness: 170 };
+
return (
<span
onMouseEnter={() => this._onMouseEnter()}
@@ -31,12 +38,22 @@ class Swapper extends React.Component {
scale: 1,
}}
style={{
- scale: hovered || startSwapped ? spring(0) : spring(1),
+ scale:
+ hovered || startSwapped
+ ? spring(0, springOpts)
+ : spring(1, springOpts),
}}
>
{({ scale }) => {
+ const snapScale = scale < 0.5 ? 0 : 1;
+ const _scale = preferReducedMotion ? snapScale : scale;
return (
- <span style={{ display: "block", transform: `scale(${scale})` }}>
+ <span
+ style={{
+ display: "block",
+ transform: `scale(${_scale})`,
+ }}
+ >
{defaultElement}
</span>
);
@@ -47,14 +64,19 @@ class Swapper extends React.Component {
scale: 0,
}}
style={{
- scale: hovered || startSwapped ? spring(1) : spring(0),
+ scale:
+ hovered || startSwapped
+ ? spring(1, springOpts)
+ : spring(0, springOpts),
}}
>
{({ scale }) => {
+ const snapScale = scale < 0.5 ? 0 : 1;
+ const _scale = preferReducedMotion ? snapScale : scale;
return (
<span
className="absolute top left bottom right"
- style={{ display: "block", transform: `scale(${scale})` }}
+ style={{ display: "block", transform: `scale(${_scale})` }}
>
{swappedElement}
</span>
--
GitLab