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

packages/grafana-ui/src/components/Dropdown/Dropdown.tsx

@@ -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)`,
+      }),
     }),
   };
 };

packages/grafana-ui/src/components/IconButton/IconButton.tsx

@@ -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),

public/app/core/components/AppChrome/AppChromeMenu.tsx

@@ -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',
     },

public/app/core/components/Login/LoginLayout.tsx

@@ -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`,
+      }),
     }),
   };
 };