refactor(Toast): replace custom motion component with CollapseDelayed (…

…#33405)

change/@fluentui-react-motion-components-preview-19d4910b-6f0a-4f0f-a0c4-d668280c25c9.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat(Collapse): add margin to whitespace animation",
+  "packageName": "@fluentui/react-motion-components-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-toast-d5b54519-be81-485d-af06-6b728958fd45.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "refactor(Toast): replace custom component with CollapseDelayed",
+  "packageName": "@fluentui/react-toast",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -68,16 +68,28 @@ export const sizeExitAtom = ({
 
 // ----- WHITESPACE -----
 
-// Whitespace animation currently includes padding, but could be extended to handle margin.
+// Whitespace animation includes padding and margin.
 const whitespaceValuesForOrientation = (orientation: CollapseOrientation) => {
-  const paddingStart = orientation === 'horizontal' ? 'paddingLeft' : 'paddingTop';
-  const paddingEnd = orientation === 'horizontal' ? 'paddingRight' : 'paddingBottom';
-  return { paddingStart, paddingEnd };
+  // horizontal whitespace collapse
+  if (orientation === 'horizontal') {
+    return {
+      paddingStart: 'paddingInlineStart',
+      paddingEnd: 'paddingInlineEnd',
+      marginStart: 'marginInlineStart',
+      marginEnd: 'marginInlineEnd',
+    };
+  }
+  // vertical whitespace collapse
+  return {
+    paddingStart: 'paddingBlockStart',
+    paddingEnd: 'paddingBlockEnd',
+    marginStart: 'marginBlockStart',
+    marginEnd: 'marginBlockEnd',
+  };
 };
 
-// Because a height of zero does not eliminate padding,
-// we will create keyframes to animate it to zero.
-// TODO: consider collapsing margin, perhaps as an option.
+// Because a height of zero does not eliminate padding or margin,
+// we will create keyframes to animate them to zero.
 export const whitespaceEnterAtom = ({
   orientation,
   duration,
@@ -87,9 +99,10 @@ export const whitespaceEnterAtom = ({
   duration: number;
   easing: string;
 }): AtomMotion => {
-  const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);
+  const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);
   return {
-    keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', offset: 0 }],
+    // Animate from whitespace of zero to the current whitespace, by omitting the ending keyframe.
+    keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', [marginStart]: '0', [marginEnd]: '0', offset: 0 }],
     duration,
     easing,
   };
@@ -106,9 +119,10 @@ export const whitespaceExitAtom = ({
   easing: string;
   delay?: number;
 }): AtomMotion => {
-  const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);
+  const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);
   return {
-    keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', offset: 1 }],
+    // Animate from the current whitespace to whitespace of zero, by using offset 1 and omitting the starting keyframe.
+    keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', [marginStart]: '0', [marginEnd]: '0', offset: 1 }],
     duration,
     easing,
     fill: 'forwards',

packages/react-components/react-toast/library/package.json

@@ -25,6 +25,7 @@
     "@fluentui/react-icons": "^2.0.245",
     "@fluentui/react-jsx-runtime": "^9.0.47",
     "@fluentui/react-motion": "^9.6.3",
+    "@fluentui/react-motion-components-preview": "^0.3.1",
     "@fluentui/react-portal": "^9.4.39",
     "@fluentui/react-shared-contexts": "^9.21.1",
     "@fluentui/react-tabster": "^9.23.1",

packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.test.tsx

@@ -35,9 +35,9 @@ const pausedTimerSelector = '[data-timer-status="paused"]';
 
 const FAKE_MOTION_DURATION = 500;
 
-jest.mock('./ToastContainerMotion', () => ({
+jest.mock('@fluentui/react-motion-components-preview', () => ({
   // eslint-disable-next-line @typescript-eslint/naming-convention
-  ToastContainerMotion: (props: PresenceComponentProps) => {
+  CollapseDelayed: (props: PresenceComponentProps) => {
     const { children, onMotionFinish, visible } = props;
 
     React.useEffect(() => {

packages/react-components/react-toast/library/src/components/ToastContainer/renderToastContainer.tsx

@@ -3,7 +3,7 @@
 import { assertSlots } from '@fluentui/react-utilities';
 import type { ToastContainerState, ToastContainerSlots, ToastContainerContextValues } from './ToastContainer.types';
 import { ToastContainerContextProvider } from '../../contexts/toastContainerContext';
-import { ToastContainerMotion } from './ToastContainerMotion';
+import { CollapseDelayed } from '@fluentui/react-motion-components-preview';
 
 /**
  * Render the final JSX of ToastContainer
@@ -17,12 +17,12 @@ export const renderToastContainer_unstable = (
 
   return (
     <ToastContainerContextProvider value={contextValues.toast}>
-      <ToastContainerMotion appear onMotionFinish={onMotionFinish} visible={visible} unmountOnExit>
+      <CollapseDelayed appear onMotionFinish={onMotionFinish} visible={visible} unmountOnExit>
         <state.root>
           {state.root.children}
           <state.timer key={updateId} />
         </state.root>
-      </ToastContainerMotion>
+      </CollapseDelayed>
     </ToastContainerContextProvider>
   );
 };