IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-11 08:05:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

CSS: use prefers-reduced-motion to let users skip animations (#85450)

Browse Source
This commit is contained in:
Laura Fernández 2024-04-09 15:27:28 +02:00 committed by GitHub
parent 698436aa29
commit 88f116e96b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 23 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/grafana-ui/src/components/Dropdown/Dropdown.tsx
View File

@ -13,7 +13,7 @@ import {
import React, { useEffect, useRef, useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import { ReactUtils } from '../../utils';
import { ReactUtils, handleReducedMotion } from '../../utils';
import { getPlacement } from '../../utils/tooltipUtils';
import { Portal } from '../Portal/Portal';
import { TooltipPlacement } from '../Tooltip/types';
@ -114,13 +114,17 @@ const getStyles = (duration: number) => {
appear: css({
opacity: '0',
position: 'relative',
transform: 'scaleY(0.5)',
transformOrigin: 'top',
...handleReducedMotion({
transform: 'scaleY(0.5)',
}),
}),
appearActive: css({
opacity: '1',
transform: 'scaleY(1)',
transition: `transform ${duration}ms cubic-bezier(0.2, 0, 0.2, 1), opacity ${duration}ms cubic-bezier(0.2, 0, 0.2, 1)`,
...handleReducedMotion({
transform: 'scaleY(1)',
transition: `transform ${duration}ms cubic-bezier(0.2, 0, 0.2, 1), opacity ${duration}ms cubic-bezier(0.2, 0, 0.2, 1)`,
}),
}),
};
};

9
packages/grafana-ui/src/components/IconButton/IconButton.tsx
View File

@ -7,6 +7,7 @@ import { useStyles2 } from '../../themes';
import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';
import { ComponentSize } from '../../types';
import { IconName, IconSize, IconType } from '../../types/icon';
import { handleReducedMotion } from '../../utils/handleReducedMotion';
import { Icon } from '../Icon/Icon';
import { getSvgSize } from '../Icon/utils';
import { TooltipPlacement, PopoverContent, Tooltip } from '../Tooltip';
@ -143,9 +144,11 @@ const getStyles = (theme: GrafanaTheme2, size: IconSize, variant: IconButtonVari
height: `${hoverSize}px`,
borderRadius: theme.shape.radius.default,
content: '""',
transitionDuration: '0.2s',
transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
transitionProperty: 'opacity',
...handleReducedMotion({
transitionDuration: '0.2s',
transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
transitionProperty: 'opacity',
}),
},
'&:focus, &:focus-visible': getFocusStyles(theme),

8
public/app/core/components/AppChrome/AppChromeMenu.tsx
View File

@ -6,7 +6,7 @@ import React, { useRef } from 'react';
import CSSTransition from 'react-transition-group/CSSTransition';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2, useTheme2 } from '@grafana/ui';
import { handleReducedMotion, useStyles2, useTheme2 } from '@grafana/ui';
import { useGrafana } from 'app/core/context/GrafanaContext';
import { KioskMode } from 'app/types';
@ -125,8 +125,10 @@ const getStyles = (theme: GrafanaTheme2, searchBarHidden?: boolean) => {
const getAnimStyles = (theme: GrafanaTheme2, animationDuration: number) => {
const commonTransition = {
transitionDuration: `${animationDuration}ms`,
transitionTimingFunction: theme.transitions.easing.easeInOut,
...handleReducedMotion({
transitionDuration: `${animationDuration}ms`,
transitionTimingFunction: theme.transitions.easing.easeInOut,
}),
[theme.breakpoints.down('md')]: {
overflow: 'hidden',
},

6
public/app/core/components/Login/LoginLayout.tsx
View File

@ -2,7 +2,7 @@ import { cx, css, keyframes } from '@emotion/css';
import React, { useEffect, useState } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
import { handleReducedMotion, useStyles2 } from '@grafana/ui';
import { Branding } from '../Branding/Branding';
import { BrandingSettings } from '../Branding/types';
@ -174,7 +174,9 @@ export const getLoginStyles = (theme: GrafanaTheme2) => {
transition: '0.25s ease',
}),
enterAnimation: css({
animation: `${flyInAnimation} ease-out 0.2s`,
...handleReducedMotion({
animation: `${flyInAnimation} ease-out 0.2s`,
}),
}),
};
};