IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Laura Fernández 2024-04-09 13:10:37 +02:00 committed by GitHub
parent 02096c4e22
commit 00be24d6b3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/grafana-ui/src/utils/handleReducedMotion.ts Normal file
View File

@ -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;
};

1
packages/grafana-ui/src/utils/index.ts
View File

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