diff --git a/addons/backgrounds/src/decorators/withBackground.ts b/addons/backgrounds/src/decorators/withBackground.ts index defad6f99c71..26ce596afc29 100644 --- a/addons/backgrounds/src/decorators/withBackground.ts +++ b/addons/backgrounds/src/decorators/withBackground.ts @@ -1,7 +1,12 @@ import { StoryFn as StoryFunction, StoryContext, useMemo, useEffect } from '@storybook/addons'; import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants'; -import { clearStyles, addBackgroundStyle, getBackgroundColorByName } from '../helpers'; +import { + clearStyles, + addBackgroundStyle, + getBackgroundColorByName, + isReduceMotionEnabled, +} from '../helpers'; export const withBackground = (StoryFn: StoryFunction, context: StoryContext) => { const { globals, parameters } = context; @@ -29,10 +34,11 @@ export const withBackground = (StoryFn: StoryFunction, context: StoryContext) => context.viewMode === 'docs' ? `#anchor--${context.id} .docs-story` : '.sb-show-main'; const backgroundStyles = useMemo(() => { + const transitionStyle = 'transition: background-color 0.3s;'; return ` ${selector} { background: ${selectedBackgroundColor} !important; - transition: background-color 0.3s; + ${isReduceMotionEnabled() ? '' : transitionStyle} } `; }, [selectedBackgroundColor, selector]); diff --git a/addons/backgrounds/src/helpers/index.ts b/addons/backgrounds/src/helpers/index.ts index 6fead3837610..4f8a84991abe 100644 --- a/addons/backgrounds/src/helpers/index.ts +++ b/addons/backgrounds/src/helpers/index.ts @@ -1,10 +1,15 @@ -import { document } from 'global'; +import { document, window } from 'global'; import dedent from 'ts-dedent'; import { logger } from '@storybook/client-logger'; import { Background } from '../types'; +export const isReduceMotionEnabled = () => { + const prefersReduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)'); + return prefersReduceMotion.matches; +}; + export const getBackgroundColorByName = ( currentSelectedValue: string, backgrounds: Background[] = [],