3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-19 09:37:43 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(theme): fix collapsible sidebar behavior when prefers-reduced-motion (#8971)

Browse source
This commit is contained in:
Sébastien Lorber 2023-05-12 12:18:34 +02:00 • committed by GitHub
parent 3170515c89
commit 905fe7f4b4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 20 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

7
packages/docusaurus-theme-common/src/components/Collapsible/index.tsx
View file

@ -17,6 +17,7 @@ import React, {
type ReactNode,
} from 'react';
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
import {prefersReducedMotion} from '../../utils/accessibilityUtils';
const DefaultAnimationEasing = 'ease-in-out';
@ -65,10 +66,6 @@ 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.
@ -76,7 +73,7 @@ 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()) {
if (prefersReducedMotion()) {
// Not using 0 because it prevents onTransitionEnd to fire and bubble up :/
// See https://github.com/facebook/docusaurus/pull/8906
return 1;