feat(scale): add scaleAtom and refactor Scale component for enhanced …

…animations
microsoft · Nov 12, 2024 · 75ec58b · 75ec58b
1 parent 639871a
commit 75ec58b
Show file tree

Hide file tree

Showing 8 changed files with 156 additions and 60 deletions.
diff --git a/...es/react-components/react-motion-components-preview/library/src/components/Atoms/Atoms.ts b/...es/react-components/react-motion-components-preview/library/src/components/Atoms/Atoms.ts
@@ -19,3 +19,16 @@ export const opacityAtom = ({
     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,
+  });
diff --git a/...es/react-components/react-motion-components-preview/library/src/components/Atoms/index.ts b/...es/react-components/react-motion-components-preview/library/src/components/Atoms/index.ts
@@ -1 +1 @@
-export { opacityAtom } from './Atoms';
+export { opacityAtom, scaleAtom } from './Atoms';
diff --git a/...mponents/react-motion-components-preview/library/src/components/Collapse/Collapse.test.ts b/...mponents/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);

diff --git a/...eact-components/react-motion-components-preview/library/src/components/Fade/Fade.test.tsx b/...eact-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,
+      }),
     );
   });
 

diff --git a/...act-components/react-motion-components-preview/library/src/components/Scale/Scale.test.ts b/...act-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);

diff --git a/...es/react-components/react-motion-components-preview/library/src/components/Scale/Scale.ts b/...es/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,
+  }),
+);
diff --git a/...ct-components/react-motion-components-preview/library/src/components/Scale/Scale.types.ts b/...ct-components/react-motion-components-preview/library/src/components/Scale/Scale.types.ts
@@ -1,20 +1,20 @@
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export type ScaleRuntimeParams_unstable = {
-  /** Whether to animate the opacity. Defaults to `true`. */
-  animateOpacity?: boolean;
-};
-
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export type ScaleVariantParams_unstable = {
-  /** Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms). */
-  enterScaleDuration?: number;
+  /** Time (ms) for the enter transition. Defaults to the `durationNormal` value (200 ms). */
+  enterDuration?: number;
 
-  /** Easing curve for the enter transition (expand). Defaults to the `easeEaseMax` value.  */
-  enterScaleEasing?: string;
+  /** Easing curve for the enter transition. Defaults to the `easeEaseMax` value.  */
+  enterEasing?: string;
 
-  /** Time (ms) for the exit transition (collapse). Defaults to the `enterDuration` param for symmetry. */
-  exitScaleDuration?: number;
+  /** Time (ms) for the exit transition. Defaults to the `enterDuration` param for symmetry. */
+  exitDuration?: number;
 
-  /** Easing curve for the exit transition (collapse). Defaults to the `enterEasing` param for symmetry.  */
-  exitScaleEasing?: string;
+  /** 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;
 };
diff --git a/packages/react-components/react-motion-components-preview/library/src/testing/testUtils.ts b/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) {