Chore: Create `handleReduceMotion` util function to manage animations (#85785)

packages/grafana-ui/src/utils/handleReducedMotion.ts

@@ -0,0 +1,16 @@
+import { CSSInterpolation } from '@emotion/css';
+
+/**
+ * @param styles - Styles to apply when no `prefers-reduced-motion` preference is set.
+ * @param reducedMotionStyles - Styles to apply when `prefers-reduced-motion` is enabled.
+ * Applies one of `styles` or `reducedMotionStyles` depending on a users `prefers-reduced-motion` setting. Omitting `reducedMotionStyles` entirely will result in no styles being applied when `prefers-reduced-motion` is enabled. In most cases this is a reasonable default.
+ */
+export const handleReducedMotion = (styles: CSSInterpolation, reducedMotionStyles?: CSSInterpolation) => {
+  const result: Record<string, CSSInterpolation> = {
+    '@media (prefers-reduced-motion: no-preference)': styles,
+  };
+  if (reducedMotionStyles) {
+    result['@media (prefers-reduced-motion: reduce)'] = reducedMotionStyles;
+  }
+  return result;
+};

packages/grafana-ui/src/utils/index.ts

@@ -19,5 +19,6 @@ export { createLogger } from './logger';
 export { attachDebugger } from './debug';
 export * from './nodeGraph';
 export { fuzzyMatch } from './fuzzy';
+export { handleReducedMotion } from './handleReducedMotion';
 
 export { ReactUtils };