From f8edeb081643e2b5b8096f19d178e31e15e1f4b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= Date: Fri, 17 Feb 2023 13:03:38 +0100 Subject: [PATCH] feat(theme-classic): respect `prefers-reduced-motion: reduce` mediaquery, bump Infima to alpha.43 (#8674) --- packages/docusaurus-theme-classic/package.json | 2 +- .../src/theme/CodeBlock/Content/styles.module.css | 2 +- .../src/theme/CodeBlock/CopyButton/styles.module.css | 2 +- .../src/components/Collapsible/index.tsx | 7 +++++++ yarn.lock | 8 ++++---- 5 files changed, 14 insertions(+), 7 deletions(-) diff --git a/packages/docusaurus-theme-classic/package.json b/packages/docusaurus-theme-classic/package.json index 247e1dbb306c..350502b911d5 100644 --- a/packages/docusaurus-theme-classic/package.json +++ b/packages/docusaurus-theme-classic/package.json @@ -35,7 +35,7 @@ "@mdx-js/react": "^1.6.22", "clsx": "^1.2.1", "copy-text-to-clipboard": "^3.0.1", - "infima": "0.2.0-alpha.42", + "infima": "0.2.0-alpha.43", "lodash": "^4.17.21", "nprogress": "^0.2.0", "postcss": "^8.4.21", diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/styles.module.css index 88ba4a7f9a59..b48a28c6438f 100644 --- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/styles.module.css @@ -72,7 +72,7 @@ border-radius: var(--ifm-global-radius); padding: 0.4rem; line-height: 0; - transition: opacity 200ms ease-in-out; + transition: opacity var(--ifm-transition-fast) ease-in-out; opacity: 0; } diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/CopyButton/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/CopyButton/styles.module.css index 776c1960b58f..c9e0ac5a3bfc 100644 --- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/CopyButton/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/CopyButton/styles.module.css @@ -24,7 +24,7 @@ opacity: inherit; width: inherit; height: inherit; - transition: all 0.15s ease; + transition: all var(--ifm-transition-fast) ease; } .copyButtonSuccessIcon { diff --git a/packages/docusaurus-theme-common/src/components/Collapsible/index.tsx b/packages/docusaurus-theme-common/src/components/Collapsible/index.tsx index 39c6ce63fdf1..ca0da9d02a9a 100644 --- a/packages/docusaurus-theme-common/src/components/Collapsible/index.tsx +++ b/packages/docusaurus-theme-common/src/components/Collapsible/index.tsx @@ -65,6 +65,10 @@ function applyCollapsedStyle(el: HTMLElement, collapsed: boolean) { el.style.height = collapsedStyles.height; } +function userPrefersReducedMotion(): boolean { + return window.matchMedia('(prefers-reduced-motion: reduce)').matches; +} + /* Lex111: Dynamic transition duration is used in Material design, this technique is good for a large number of items. @@ -72,6 +76,9 @@ https://material.io/archive/guidelines/motion/duration-easing.html#duration-easi https://github.com/mui-org/material-ui/blob/e724d98eba018e55e1a684236a2037e24bcf050c/packages/material-ui/src/styles/createTransitions.js#L40-L43 */ function getAutoHeightDuration(height: number) { + if (userPrefersReducedMotion()) { + return 0; + } const constant = height / 36; return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10); } diff --git a/yarn.lock b/yarn.lock index a849200a8f47..ce71ad55cf79 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9009,10 +9009,10 @@ infer-owner@^1.0.4: resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467" integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A== -infima@0.2.0-alpha.42: - version "0.2.0-alpha.42" - resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.42.tgz#f6e86a655ad40877c6b4d11b2ede681eb5470aa5" - integrity sha512-ift8OXNbQQwtbIt6z16KnSWP7uJ/SysSMFI4F87MNRTicypfl4Pv3E2OGVv6N3nSZFJvA8imYulCBS64iyHYww== +infima@0.2.0-alpha.43: + version "0.2.0-alpha.43" + resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.43.tgz#f7aa1d7b30b6c08afef441c726bac6150228cbe0" + integrity sha512-2uw57LvUqW0rK/SWYnd/2rRfxNA5DDNOh33jxF7fy46VWoNhGxiUQyVZHbBMjQ33mQem0cjdDVwgWVAmlRfgyQ== inflight@^1.0.4: version "1.0.6"