PR review

microsoft · Jan 14, 2025 · 1d7e3a8 · 1d7e3a8
1 parent 32f2388
commit 1d7e3a8
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 21 deletions.
diff --git a/packages/react-components/react-motion/library/etc/react-motion.api.md b/packages/react-components/react-motion/library/etc/react-motion.api.md
@@ -9,9 +9,9 @@ import { SlotComponentType } from '@fluentui/react-utilities';
 import { SlotRenderFunction } from '@fluentui/react-utilities';
 
 // @public (undocumented)
-export type AtomMotion = {
-    keyframes: Keyframe[];
-} & KeyframeEffectOptions;
+export type AtomMotion = AtomCore & {
+    reducedMotion?: Partial<AtomCore>;
+};
 
 // @public (undocumented)
 export type AtomMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (params: {

diff --git a/packages/react-components/react-motion/library/src/hooks/useAnimateAtoms.ts b/packages/react-components/react-motion/library/src/hooks/useAnimateAtoms.ts
@@ -5,6 +5,12 @@ export const DEFAULT_ANIMATION_OPTIONS: KeyframeEffectOptions = {
   fill: 'forwards',
 };
 
+// A motion atom's default reduced motion is a simple 1 ms duration.
+// But an atom can define a custom reduced motion, overriding keyframes and/or params like duration, easing, iterations, etc.
+const DEFAULT_REDUCED_MOTION_ATOM: NonNullable<AtomMotion['reducedMotion']> = {
+  duration: 1,
+};
+
 function useAnimateAtomsInSupportedEnvironment() {
   // eslint-disable-next-line @nx/workspace-no-restricted-globals
   const SUPPORTS_PERSIST = typeof window !== 'undefined' && typeof window.Animation?.prototype.persist === 'function';
@@ -21,16 +27,17 @@ function useAnimateAtomsInSupportedEnvironment() {
       const { isReducedMotion } = options;
 
       const animations = atoms.map(motion => {
-        const { keyframes, reducedMotion, ...params } = motion;
-        const { keyframes: reducedMotionKeyframes = keyframes, ...reducedMotionParams } = reducedMotion ?? {
-          duration: 1,
-        };
+        // Grab the custom reduced motion definition if it exists, or fall back to the default reduced motion.
+        const { keyframes: motionKeyframes, reducedMotion = DEFAULT_REDUCED_MOTION_ATOM, ...params } = motion;
+        // Grab the reduced motion keyframes if they exist, or fall back to the regular keyframes.
+        const { keyframes: reducedMotionKeyframes = motionKeyframes, ...reducedMotionParams } = reducedMotion;
 
-        const animationKeyframes: Keyframe[] = isReducedMotion ? reducedMotionKeyframes : keyframes;
+        const animationKeyframes: Keyframe[] = isReducedMotion ? reducedMotionKeyframes : motionKeyframes;
         const animationParams: KeyframeEffectOptions = {
           ...DEFAULT_ANIMATION_OPTIONS,
           ...params,
 
+          // Use reduced motion overrides (e.g. duration, easing) when reduced motion is enabled
           ...(isReducedMotion && reducedMotionParams),
         };
 
@@ -39,7 +46,7 @@ function useAnimateAtomsInSupportedEnvironment() {
         if (SUPPORTS_PERSIST) {
           animation.persist();
         } else {
-          const resultKeyframe = keyframes[keyframes.length - 1];
+          const resultKeyframe = animationKeyframes[animationKeyframes.length - 1];
           Object.assign(element.style ?? {}, resultKeyframe);
         }
 

diff --git a/packages/react-components/react-motion/library/src/types.ts b/packages/react-components/react-motion/library/src/types.ts
@@ -1,15 +1,17 @@
-export type AtomMotion = { keyframes: Keyframe[] } & KeyframeEffectOptions & {
-    /**
-     * Allows to specify a reduced motion version of the animation. If provided, the settings will be used when the
-     * user has enabled the reduced motion setting in the operating system. If not provided, the duration of the
-     * animation will be overridden to be 1ms.
-     *
-     * Note, if keyframes are provided, they will be used instead of the regular keyframes.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
-     */
-    reducedMotion?: { keyframes?: Keyframe[] } & KeyframeEffectOptions;
-  };
+type AtomCore = { keyframes: Keyframe[] } & KeyframeEffectOptions;
+
+export type AtomMotion = AtomCore & {
+  /**
+   * Allows to specify a reduced motion version of the animation. If provided, the settings will be used when the
+   * user has enabled the reduced motion setting in the operating system. If not provided, the duration of the
+   * animation will be overridden to be 1ms.
+   *
+   * Note, if `keyframes` are provided, they will be used instead of the regular `keyframes`.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
+   */
+  reducedMotion?: Partial<AtomCore>;
+};
 
 export type PresenceDirection = 'enter' | 'exit';