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

…animations

packages/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,
+  });

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

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

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

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