refactor(MessageBar): migrate slide & fade to motion components

change/@fluentui-react-message-bar-72abc821-ab32-4cac-8dd2-4c8dce4c810e.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "refactor(MessageBar): migrate slide & fade to motion components",
+  "packageName": "@fluentui/react-message-bar",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-message-bar/library/package.json

@@ -21,13 +21,14 @@
     "@fluentui/react-button": "^9.3.97",
     "@fluentui/react-icons": "^2.0.245",
     "@fluentui/react-jsx-runtime": "^9.0.47",
+    "@fluentui/react-motion": "^9.6.4",
+    "@fluentui/react-motion-components-preview": "^0.4.0",
     "@fluentui/react-shared-contexts": "^9.21.1",
     "@fluentui/react-link": "^9.3.4",
     "@fluentui/react-theme": "^9.1.23",
     "@fluentui/react-utilities": "^9.18.18",
     "@griffel/react": "^1.5.22",
-    "@swc/helpers": "^0.5.1",
-    "react-transition-group": "^4.4.1"
+    "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0 <19.0.0",

packages/react-components/react-message-bar/library/src/components/MessageBar/MessageBar.types.ts

@@ -48,5 +48,8 @@ export type MessageBarProps = ComponentProps<MessageBarSlots> &
 export type MessageBarState = ComponentState<MessageBarSlots> &
   Required<Pick<MessageBarProps, 'layout' | 'intent' | 'shape'>> &
   Pick<MessageBarContextValue, 'actionsRef' | 'bodyRef' | 'titleId'> & {
+    /**
+     * @deprecated Code is unused, replaced by motion components
+     */
     transitionClassName: string;
   };

packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBar.ts

@@ -21,6 +21,7 @@ export const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HT
   const autoReflow = layout === 'auto';
   const { ref: reflowRef, reflowing } = useMessageBarReflow(autoReflow);
   const computedLayout = autoReflow ? (reflowing ? 'multiline' : 'singleline') : layout;
+  // eslint-disable-next-line deprecation/deprecation
   const { className: transitionClassName, nodeRef } = useMessageBarTransitionContext();
   const actionsRef = React.useRef<HTMLDivElement | null>(null);
   const bodyRef = React.useRef<HTMLDivElement | null>(null);

packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBarStyles.styles.ts

@@ -114,7 +114,6 @@ export const useMessageBarStyles_unstable = (state: MessageBarState): MessageBar
     state.layout === 'multiline' && styles.rootMultiline,
     state.shape === 'square' && styles.square,
     rootIntentStyles[state.intent],
-    state.transitionClassName,
     state.root.className,
   );
 

packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.motions.tsx

@@ -0,0 +1,70 @@
+import { motionTokens, createPresenceComponent, PresenceDirection, AtomMotion } from '@fluentui/react-motion';
+
+// TODO: import these atoms from react-motion-components-preview once they're available there
+
+/**
+ * Generates a motion atom object for a fade in or fade out.
+ * @param direction - The functional direction of the motion: 'enter' or 'exit'.
+ * @param duration - The duration of the motion in milliseconds.
+ * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
+ * @returns A motion atom object with opacity keyframes and the supplied duration and easing.
+ */
+const fadeAtom = (
+  direction: PresenceDirection,
+  duration: number,
+  easing: string = motionTokens.curveLinear,
+): AtomMotion => {
+  const keyframes = [{ opacity: 0 }, { opacity: 1 }];
+  if (direction === 'exit') {
+    keyframes.reverse();
+  }
+  return {
+    keyframes,
+    duration,
+    easing,
+  };
+};
+
+/**
+ * Generates a motion atom object for an X or Y translation, from a specified distance to zero.
+ * @param direction - The functional direction of the motion: 'enter' or 'exit'.
+ * @param axis - The axis of the translation: 'X' or 'Y'.
+ * @param distance - The distance to slide; it can be a percentage or pixels.
+ * @param duration - The duration of the motion in milliseconds.
+ * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveDecelerateMid`.
+ */
+const slideAtom = (
+  direction: PresenceDirection,
+  axis: 'X' | 'Y',
+  distance: string,
+  duration: number,
+  easing: string = motionTokens.curveDecelerateMid,
+): AtomMotion => {
+  const keyframes = [{ transform: `translate${axis}(${distance})` }, { transform: 'translate${axis}(0)' }];
+  if (direction === 'exit') {
+    keyframes.reverse();
+  }
+  return {
+    keyframes,
+    duration,
+    easing,
+  };
+};
+
+export const SlideInFadeOut = createPresenceComponent(() => {
+  const duration = motionTokens.durationGentle;
+
+  return {
+    enter: [fadeAtom('enter', duration), slideAtom('enter', 'Y', '-100%', duration)],
+
+    exit: fadeAtom('exit', duration),
+  };
+});
+
+export const FadeOut = createPresenceComponent(() => {
+  return {
+    enter: [],
+
+    exit: fadeAtom('exit', motionTokens.durationGentle),
+  };
+});

packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.types.ts

@@ -18,6 +18,7 @@ export type MessageBarGroupProps = ComponentProps<MessageBarGroupSlots> & {
  */
 export type MessageBarGroupState = ComponentState<MessageBarGroupSlots> &
   Pick<MessageBarGroupProps, 'animate'> & {
+    // TODO: deprecate these 2 obsolete props?
     enterStyles: string;
     exitStyles: string;
     children: React.ReactElement[];

packages/react-components/react-message-bar/library/src/components/MessageBarGroup/renderMessageBarGroup.tsx

@@ -3,8 +3,8 @@
 
 import { assertSlots } from '@fluentui/react-utilities';
 import type { MessageBarGroupState, MessageBarGroupSlots } from './MessageBarGroup.types';
-import { TransitionGroup } from 'react-transition-group';
-import { MessageBarTransition } from './MessageBarTransition';
+import { PresenceGroup } from '@fluentui/react-motion';
+import { SlideInFadeOut, FadeOut } from './MessageBarGroup.motions';
 
 /**
  * Render the final JSX of MessageBarGroup
@@ -14,18 +14,17 @@ export const renderMessageBarGroup_unstable = (state: MessageBarGroupState) => {
 
   return (
     <state.root>
-      <TransitionGroup component={null}>
-        {state.children.map(child => (
-          <MessageBarTransition
-            animate={state.animate}
-            key={child.key}
-            enterClassName={state.enterStyles}
-            exitClassName={state.exitStyles}
-          >
-            {child}
-          </MessageBarTransition>
-        ))}
-      </TransitionGroup>
+      <PresenceGroup>
+        {state.children.map(child =>
+          state.animate === 'both' ? (
+            // enter with slide and fade; exit with fade
+            <SlideInFadeOut key={child.key}>{child}</SlideInFadeOut>
+          ) : (
+            // no enter motion; exit with fade
+            <FadeOut key={child.key}>{child}</FadeOut>
+          ),
+        )}
+      </PresenceGroup>
     </state.root>
   );
 };

packages/react-components/react-message-bar/library/src/components/MessageBarGroup/useMessageBarGroupStyles.styles.ts

@@ -7,6 +7,7 @@ export const messageBarGroupClassNames: SlotClassNames<MessageBarGroupSlots> = {
   root: 'fui-MessageBarGroup',
 };
 
+// TODO: delete this obsolete code to save bytes?
 /**
  * Styles for the root slot
  */
@@ -49,6 +50,7 @@ export const useMessageBarGroupStyles_unstable = (state: MessageBarGroupState):
 
   const styles = useStyles();
   state.root.className = mergeClasses(messageBarGroupClassNames.root, state.root.className);
+  // TODO: delete these 2 lines to save bytes?
   state.enterStyles = mergeClasses(styles.base, styles.enter);
   state.exitStyles = mergeClasses(styles.base, styles.exit);
   return state;

packages/react-components/react-message-bar/library/src/contexts/messageBarTransitionContext.ts

@@ -1,6 +1,9 @@
 import * as React from 'react';
 
 export type MessageBarTransitionContextValue = {
+  /**
+   * @deprecated CSS className is no longer used for this transition, replaced by motion components
+   */
   className: string;
   nodeRef: React.Ref<HTMLDivElement | null>;
 };
@@ -16,7 +19,7 @@ export const messageBarTransitionContextDefaultValue: MessageBarTransitionContex
 };
 
 /**
- * Context to pass animation className to MessageBar components
+ * Context to pass nodeRef for animation to MessageBar components
  * @internal
  */
 export const MessageBarTransitionContextProvider = messageBarTransitionContext.Provider;

packages/react-components/react-motion-components-preview/library/src/atoms/fade-atom.ts

@@ -0,0 +1 @@
+import { PresenceDirection, motionTokens } from '@fluentui/react-motion';