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,21 @@
+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,
+  });

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 } from './Atoms';

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.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.types.ts

@@ -0,0 +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;
+
+  /** Easing curve for the enter transition (expand). Defaults to the `easeEaseMax` value.  */
+  enterScaleEasing?: string;
+
+  /** Time (ms) for the exit transition (collapse). Defaults to the `enterDuration` param for symmetry. */
+  exitScaleDuration?: number;
+
+  /** Easing curve for the exit transition (collapse). Defaults to the `enterEasing` param for symmetry.  */
+  exitScaleEasing?: string;
+};