feat(motion): introduce opacity atom and refactor collapse and fade c…

packages/react-components/react-motion-components-preview/library/src/components/Atoms/Atoms.ts

@@ -0,0 +1,34 @@
+import { AtomMotion } from '@fluentui/react-motion';
+import type { MotionAtomProps } from './Atoms.types';
+
+export const motionAtom = ({
+  keyframes,
+  fill = 'both',
+  ...props
+}: MotionAtomProps & { keyframes: Keyframe[] }): AtomMotion => ({
+  keyframes,
+  ...props,
+});
+
+export const opacityAtom = ({
+  fromOpacity = 0,
+  toOpacity = 1,
+  ...props
+}: { fromOpacity?: number; toOpacity?: number } & MotionAtomProps): AtomMotion =>
+  motionAtom({
+    keyframes: [{ opacity: fromOpacity }, { opacity: toOpacity }],
+    ...props,
+  });
+
+export const scaleAtom = ({
+  fromScale = 0.9,
+  toScale = 1,
+  ...props
+}: { fromScale?: number; toScale?: number } & MotionAtomProps): AtomMotion =>
+  motionAtom({
+    keyframes: [
+      { transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'visible' },
+      { transform: `scale3d(${toScale}, ${toScale}, 1)` },
+    ],
+    ...props,
+  });

packages/react-components/react-motion-components-preview/library/src/components/Atoms/Atoms.types.ts

@@ -0,0 +1,7 @@
+export type MotionAtomProps = {
+  duration: number;
+  easing: string;
+  delay?: number;
+  direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
+  fill?: 'none' | 'forwards' | 'backwards' | 'both';
+};

packages/react-components/react-motion-components-preview/library/src/components/Atoms/index.ts

@@ -0,0 +1 @@
+export { opacityAtom, scaleAtom } from './Atoms';

packages/react-components/react-motion-components-preview/library/src/components/Collapse/Collapse.test.ts

@@ -1,6 +1,42 @@
-import { expectPresenceMotionFunction, expectPresenceMotionArray } from '../../testing/testUtils';
+import { motionTokens, PresenceComponent } from '@fluentui/react-motion';
+import { expectPresenceMotionFunction, getMotionFunction } from '../../testing/testUtils';
 import { Collapse } from './Collapse';
 
+function expectPresenceMotionArray(component: PresenceComponent) {
+  const presenceMotionFn = getMotionFunction(component);
+
+  // eslint-disable-next-line @nx/workspace-no-restricted-globals
+  expect(presenceMotionFn?.({ element: document.createElement('div') })).toMatchObject({
+    enter: expect.arrayContaining([
+      expect.objectContaining({
+        duration: expect.any(Number),
+        easing: expect.any(String),
+        keyframes: expect.any(Array),
+      }),
+    ]),
+    exit: expect.arrayContaining([
+      expect.objectContaining({
+        duration: expect.any(Number),
+        easing: expect.any(String),
+        keyframes: expect.any(Array),
+      }),
+      expect.objectContaining({
+        duration: motionTokens.durationNormal,
+        easing: motionTokens.curveEasyEaseMax,
+        keyframes: expect.arrayContaining([
+          expect.objectContaining({ maxHeight: '0px' }),
+          expect.objectContaining({ maxHeight: '0' }),
+        ]),
+      }),
+      expect.objectContaining({
+        duration: motionTokens.durationNormal,
+        easing: motionTokens.curveEasyEaseMax,
+        keyframes: expect.arrayContaining([expect.objectContaining({ paddingBottom: '0', paddingTop: '0' })]),
+      }),
+    ]),
+  });
+}
+
 describe('Collapse', () => {
   it('stores its motion definition as a static function', () => {
     expectPresenceMotionFunction(Collapse);

packages/react-components/react-motion-components-preview/library/src/components/Collapse/Collapse.ts

@@ -1,14 +1,8 @@
 import { motionTokens, createPresenceComponent, AtomMotion } from '@fluentui/react-motion';
 import type { PresenceMotionFnCreator } from '../../types';
 import type { CollapseDelayedVariantParams, CollapseRuntimeParams, CollapseVariantParams } from './collapse-types';
-import {
-  sizeEnterAtom,
-  whitespaceEnterAtom,
-  opacityEnterAtom,
-  opacityExitAtom,
-  sizeExitAtom,
-  whitespaceExitAtom,
-} from './collapse-atoms';
+import { sizeEnterAtom, whitespaceEnterAtom, sizeExitAtom, whitespaceExitAtom } from './collapse-atoms';
+import { opacityAtom } from '../Atoms';
 
 /** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay. */
 export const createCollapseDelayedPresence: PresenceMotionFnCreator<
@@ -47,7 +41,7 @@ export const createCollapseDelayedPresence: PresenceMotionFnCreator<
     // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
     if (animateOpacity) {
       enterAtoms.push(
-        opacityEnterAtom({
+        opacityAtom({
           duration: enterOpacityDuration,
           easing: enterEasing,
           delay: enterDelay,
@@ -61,9 +55,10 @@ export const createCollapseDelayedPresence: PresenceMotionFnCreator<
     // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.
     if (animateOpacity) {
       exitAtoms.push(
-        opacityExitAtom({
+        opacityAtom({
           duration: exitOpacityDuration,
           easing: exitEasing,
+          direction: 'reverse',
         }),
       );
     }

packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapse-atoms.ts

@@ -115,41 +115,3 @@ export const whitespaceExitAtom = ({
     delay,
   };
 };
-
-// ----- OPACITY -----
-
-export const opacityEnterAtom = ({
-  duration,
-  easing,
-  delay = 0,
-  fromOpacity = 0,
-  toOpacity = 1,
-}: {
-  duration: number;
-  easing: string;
-  delay?: number;
-  fromOpacity?: number;
-  toOpacity?: number;
-}): AtomMotion => ({
-  keyframes: [{ opacity: fromOpacity }, { opacity: toOpacity }],
-  duration,
-  easing,
-  delay,
-  fill: 'both',
-});
-
-export const opacityExitAtom = ({
-  duration,
-  easing,
-  fromOpacity = 0,
-  toOpacity = 1,
-}: {
-  duration: number;
-  easing: string;
-  fromOpacity?: number;
-  toOpacity?: number;
-}): AtomMotion => ({
-  keyframes: [{ opacity: toOpacity }, { opacity: fromOpacity }],
-  duration,
-  easing,
-});

packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.test.tsx

@@ -40,8 +40,12 @@ describe('Fade motion component', () => {
     // Testing fade out motion
     rerender(<Fade visible={false}>{testElement}</Fade>);
     expect(animateSpy).toHaveBeenCalledWith(
-      [{ opacity: 1 }, { opacity: 0 }],
-      expect.objectContaining({ duration: motionTokens.durationNormal, easing: motionTokens.curveEasyEase }),
+      [{ opacity: 0 }, { opacity: 1 }],
+      expect.objectContaining({
+        direction: 'reverse',
+        duration: motionTokens.durationNormal,
+        easing: motionTokens.curveEasyEase,
+      }),
     );
   });
 

packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.ts

@@ -1,19 +1,7 @@
 import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
 import type { PresenceMotionCreator } from '../../types';
-
-type FadeVariantParams = {
-  /** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */
-  enterDuration?: number;
-
-  /** Easing curve for the enter transition (fade-in). Defaults to the `easeEase` value.  */
-  enterEasing?: string;
-
-  /** Time (ms) for the exit transition (fade-out). Defaults to the `enterDuration` param for symmetry. */
-  exitDuration?: number;
-
-  /** Easing curve for the exit transition (fade-out). Defaults to the `enterEasing` param for symmetry.  */
-  exitEasing?: string;
-};
+import type { FadeVariantParams } from './Fade.types';
+import { opacityAtom } from '../Atoms';
 
 /** Define a presence motion for fade in/out  */
 export const createFadePresence: PresenceMotionCreator<FadeVariantParams> = ({
@@ -22,8 +10,8 @@ export const createFadePresence: PresenceMotionCreator<FadeVariantParams> = ({
   exitDuration = enterDuration,
   exitEasing = enterEasing,
 } = {}) => ({
-  enter: { duration: enterDuration, easing: enterEasing, keyframes: [{ opacity: 0 }, { opacity: 1 }] },
-  exit: { duration: exitDuration, easing: exitEasing, keyframes: [{ opacity: 1 }, { opacity: 0 }] },
+  enter: opacityAtom({ duration: enterDuration, easing: enterEasing }),
+  exit: opacityAtom({ duration: exitDuration, easing: exitEasing, direction: 'reverse' }),
 });
 
 /** A React component that applies fade in/out transitions to its children. */

packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.types.ts

@@ -0,0 +1,13 @@
+export type FadeVariantParams = {
+  /** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */
+  enterDuration?: number;
+
+  /** Easing curve for the enter transition (fade-in). Defaults to the `easeEase` value.  */
+  enterEasing?: string;
+
+  /** Time (ms) for the exit transition (fade-out). Defaults to the `enterDuration` param for symmetry. */
+  exitDuration?: number;
+
+  /** Easing curve for the exit transition (fade-out). Defaults to the `enterEasing` param for symmetry.  */
+  exitEasing?: string;
+};

packages/react-components/react-motion-components-preview/library/src/components/Scale/Scale.test.ts

@@ -1,6 +1,29 @@
-import { expectPresenceMotionFunction, expectPresenceMotionObject } from '../../testing/testUtils';
+import { PresenceComponent } from '@fluentui/react-motion';
+import { expectPresenceMotionFunction, getMotionFunction } from '../../testing/testUtils';
 import { Scale } from './Scale';
 
+export function expectPresenceMotionObject(component: PresenceComponent) {
+  const presenceMotionFn = getMotionFunction(component);
+
+  // eslint-disable-next-line @nx/workspace-no-restricted-globals
+  expect(presenceMotionFn?.({ element: document.createElement('div') })).toMatchObject({
+    enter: expect.arrayContaining([
+      expect.objectContaining({
+        duration: expect.any(Number),
+        easing: expect.any(String),
+        keyframes: expect.any(Array),
+      }),
+    ]),
+    exit: expect.arrayContaining([
+      expect.objectContaining({
+        duration: expect.any(Number),
+        easing: expect.any(String),
+        keyframes: expect.any(Array),
+      }),
+    ]),
+  });
+}
+
 describe('Scale', () => {
   it('stores its motion definition as a static function', () => {
     expectPresenceMotionFunction(Scale);

packages/react-components/react-motion-components-preview/library/src/components/Scale/Scale.ts

@@ -1,46 +1,66 @@
-import {
-  motionTokens,
-  PresenceMotionFn,
-  createPresenceComponent,
-  createPresenceComponentVariant,
-} from '@fluentui/react-motion';
+import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
+import { PresenceMotionFnCreator } from '../../types';
+import { opacityAtom, scaleAtom } from '../Atoms';
+import { ScaleRuntimeParams_unstable, ScaleVariantParams_unstable } from './Scale.types';
 
 /** Define a presence motion for scale in/out */
-const scaleMotion: PresenceMotionFn<{ animateOpacity?: boolean }> = ({ animateOpacity = true }) => {
-  const fromOpacity = animateOpacity ? 0 : 1;
-  const toOpacity = 1;
-  const fromScale = 0.9; // Could be a custom param in the future
-  const toScale = 1;
-
-  const enterKeyframes = [
-    { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'visible' },
-    { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },
-  ];
-
-  const exitKeyframes = [
-    { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },
-    { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'hidden' },
-  ];
-
-  return {
-    enter: {
-      duration: motionTokens.durationGentle,
-      easing: motionTokens.curveDecelerateMax,
-      keyframes: enterKeyframes,
-    },
-    exit: { duration: motionTokens.durationNormal, easing: motionTokens.curveAccelerateMax, keyframes: exitKeyframes },
-  };
-};
+export const createScalePresence: PresenceMotionFnCreator<ScaleVariantParams_unstable, ScaleRuntimeParams_unstable> =
+  ({
+    enterDuration = motionTokens.durationGentle,
+    enterEasing = motionTokens.curveEasyEaseMax,
+    exitDuration = motionTokens.durationNormal,
+    exitEasing = motionTokens.curveAccelerateMax,
+  } = {}) =>
+  ({ animateOpacity = true }) => ({
+    enter: [
+      scaleAtom({
+        duration: enterDuration,
+        easing: enterEasing,
+      }),
+      ...(animateOpacity
+        ? [
+            opacityAtom({
+              duration: enterDuration,
+              easing: enterEasing,
+            }),
+          ]
+        : []),
+    ],
+    exit: [
+      scaleAtom({
+        duration: exitDuration,
+        easing: exitEasing,
+        direction: 'reverse',
+      }),
+      ...(animateOpacity
+        ? [
+            opacityAtom({
+              duration: exitDuration,
+              easing: exitEasing,
+              direction: 'reverse',
+            }),
+          ]
+        : []),
+    ],
+  });
 
 /** A React component that applies scale in/out transitions to its children. */
-export const Scale = createPresenceComponent(scaleMotion);
+export const Scale = createPresenceComponent(createScalePresence());
 
-export const ScaleSnappy = createPresenceComponentVariant(Scale, {
-  enter: { duration: motionTokens.durationNormal, easing: motionTokens.curveDecelerateMax },
-  exit: { duration: motionTokens.durationFast, easing: motionTokens.curveAccelerateMax },
-});
+export const ScaleSnappy = createPresenceComponent(
+  createScalePresence({
+    enterDuration: motionTokens.durationNormal,
+    enterEasing: motionTokens.curveDecelerateMax,
+    exitDuration: motionTokens.durationFast,
+    exitEasing: motionTokens.curveAccelerateMax,
+  }),
+);
 
-export const ScaleRelaxed = createPresenceComponentVariant(Scale, {
-  enter: { duration: motionTokens.durationSlow, easing: motionTokens.curveDecelerateMax },
-  exit: { duration: motionTokens.durationGentle, easing: motionTokens.curveAccelerateMax },
-});
+export const ScaleRelaxed = createPresenceComponent(
+  createScalePresence({
+    enterDuration: motionTokens.durationSlow,
+    enterEasing: motionTokens.curveDecelerateMax,
+    exitDuration: motionTokens.durationGentle,
+    exitEasing: motionTokens.curveAccelerateMax,
+  }),
+);

packages/react-components/react-motion-components-preview/library/src/components/Scale/Scale.types.ts

@@ -0,0 +1,20 @@
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export type ScaleVariantParams_unstable = {
+  /** Time (ms) for the enter transition. Defaults to the `durationNormal` value (200 ms). */
+  enterDuration?: number;
+
+  /** Easing curve for the enter transition. Defaults to the `easeEaseMax` value.  */
+  enterEasing?: string;
+
+  /** Time (ms) for the exit transition. Defaults to the `enterDuration` param for symmetry. */
+  exitDuration?: number;
+
+  /** Easing curve for the exit transition. Defaults to the `enterEasing` param for symmetry.  */
+  exitEasing?: string;
+};
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export type ScaleRuntimeParams_unstable = {
+  /** Whether to animate the opacity. Defaults to `true`. */
+  animateOpacity?: boolean;
+};

packages/react-components/react-motion-components-preview/library/src/testing/testUtils.ts

@@ -1,6 +1,6 @@
 import type { PresenceComponent, PresenceMotionFn } from '@fluentui/react-motion';
 
-function getMotionFunction(component: PresenceComponent): PresenceMotionFn | null {
+export function getMotionFunction(component: PresenceComponent): PresenceMotionFn | null {
   const symbols = Object.getOwnPropertySymbols(component);
 
   for (const symbol of symbols) {