refactor(Popover): migrate opacity transition to Fade component

change/@fluentui-react-menu-6d777269-9ba0-4bc9-bcc4-35ccd0b6588b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "refactor(MenuPopover): migrate opacity transition to Fade component",
+  "packageName": "@fluentui/react-menu",
+  "email": "robertpenner@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-popover-9cbd1ae2-b716-4325-a154-6f0766f13802.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "refactor(Popover): migrate opacity transition to Fade component",
+  "packageName": "@fluentui/react-popover",
+  "email": "robertpenner@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-positioning-a236325b-e9a5-4ad8-bace-083cf9b4d846.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "refactor(react-positioning): migrate opacity transition to Fade component",
+  "packageName": "@fluentui/react-positioning",
+  "email": "robertpenner@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -24,6 +24,7 @@
     "@fluentui/react-aria": "^9.13.10",
     "@fluentui/react-context-selector": "^9.1.70",
     "@fluentui/react-icons": "^2.0.245",
+    "@fluentui/react-motion-components-preview": "^0.3.2",
     "@fluentui/react-portal": "^9.4.39",
     "@fluentui/react-positioning": "^9.15.13",
     "@fluentui/react-shared-contexts": "^9.21.1",

packages/react-components/react-menu/library/src/components/MenuPopover/MenuPopover.types.ts

@@ -1,5 +1,6 @@
 import type { PortalProps } from '@fluentui/react-portal';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import { MenuContextValue } from '../../contexts/menuContext';
 
 export type MenuPopoverSlots = {
   root: Slot<'div'>;
@@ -14,6 +15,7 @@ export type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;
  * State used in rendering MenuPopover
  */
 export type MenuPopoverState = ComponentState<MenuPopoverSlots> &
+  Pick<MenuContextValue, 'open'> &
   Pick<PortalProps, 'mountNode'> & {
     /**
      * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order

packages/react-components/react-menu/library/src/components/MenuPopover/renderMenuPopover.tsx

@@ -3,20 +3,23 @@
 import { assertSlots } from '@fluentui/react-utilities';
 import { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';
 import { Portal } from '@fluentui/react-portal';
+import { Fade } from '@fluentui/react-motion-components-preview';
 
 /**
  * Render the final JSX of MenuPopover
  */
 export const renderMenuPopover_unstable = (state: MenuPopoverState) => {
   assertSlots<MenuPopoverSlots>(state);
 
+  const surface = (
+    <Fade visible={state.open}>
+      <state.root />
+    </Fade>
+  );
+
   if (state.inline) {
-    return <state.root />;
+    return surface;
   }
 
-  return (
-    <Portal mountNode={state.mountNode}>
-      <state.root />
-    </Portal>
-  );
+  return <Portal mountNode={state.mountNode}>{surface}</Portal>;
 };

packages/react-components/react-menu/library/src/components/MenuPopover/useMenuPopover.ts

@@ -97,5 +97,5 @@ export const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<
     }
     onKeyDownOriginal?.(event);
   });
-  return { inline, mountNode, components: { root: 'div' }, root: rootProps };
+  return { inline, mountNode, open, components: { root: 'div' }, root: rootProps };
 };

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

@@ -24,6 +24,7 @@
     "@fluentui/keyboard-keys": "^9.0.8",
     "@fluentui/react-aria": "^9.13.10",
     "@fluentui/react-context-selector": "^9.1.70",
+    "@fluentui/react-motion-components-preview": "^0.3.2",
     "@fluentui/react-portal": "^9.4.39",
     "@fluentui/react-positioning": "^9.15.13",
     "@fluentui/react-shared-contexts": "^9.21.1",

packages/react-components/react-popover/library/src/components/PopoverSurface/PopoverSurface.types.ts

@@ -17,7 +17,7 @@ export type PopoverSurfaceSlots = {
  * PopoverSurface State
  */
 export type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> &
-  Pick<PopoverContextValue, 'appearance' | 'arrowRef' | 'inline' | 'mountNode' | 'size' | 'withArrow'> & {
+  Pick<PopoverContextValue, 'appearance' | 'arrowRef' | 'inline' | 'open' | 'mountNode' | 'size' | 'withArrow'> & {
     /**
      * CSS class for the arrow element
      */

packages/react-components/react-popover/library/src/components/PopoverSurface/renderPopoverSurface.tsx

@@ -3,6 +3,7 @@
 import { assertSlots } from '@fluentui/react-utilities';
 import { Portal } from '@fluentui/react-portal';
 import type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';
+import { Fade } from '@fluentui/react-motion-components-preview';
 
 /**
  * Render the final JSX of PopoverSurface
@@ -11,10 +12,12 @@ export const renderPopoverSurface_unstable = (state: PopoverSurfaceState) => {
   assertSlots<PopoverSurfaceSlots>(state);
 
   const surface = (
-    <state.root>
-      {state.withArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}
-      {state.root.children}
-    </state.root>
+    <Fade visible={state.open}>
+      <state.root>
+        {state.withArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}
+        {state.root.children}
+      </state.root>
+    </Fade>
   );
 
   if (state.inline) {

packages/react-components/react-popover/library/src/components/PopoverSurface/usePopoverSurface.ts

@@ -19,6 +19,7 @@ export const usePopoverSurface_unstable = (
 ): PopoverSurfaceState => {
   const contentRef = usePopoverContext_unstable(context => context.contentRef);
   const openOnHover = usePopoverContext_unstable(context => context.openOnHover);
+  const open = usePopoverContext_unstable(context => context.open);
   const setOpen = usePopoverContext_unstable(context => context.setOpen);
   const mountNode = usePopoverContext_unstable(context => context.mountNode);
   const arrowRef = usePopoverContext_unstable(context => context.arrowRef);
@@ -35,6 +36,7 @@ export const usePopoverSurface_unstable = (
   });
 
   const state: PopoverSurfaceState = {
+    open,
     inline,
     appearance,
     withArrow,

packages/react-components/react-positioning/src/createSlideStyles.ts

@@ -8,21 +8,12 @@ import { DATA_POSITIONING_PLACEMENT } from './constants';
  * @returns Griffel styles to spread to a slot
  */
 export function createSlideStyles(mainAxis: number): GriffelStyle {
-  const fadeIn = {
-    from: {
-      opacity: 0,
-    },
-    to: {
-      opacity: 1,
-    },
-  };
-
   const slideDistanceVarX = '--fui-positioning-slide-distance-x';
   const slideDistanceVarY = '--fui-positioning-slide-distance-y';
 
   return {
-    // The fade has absolute values, whereas the slide amount is relative.
-    animationComposition: 'replace, accumulate',
+    // The slide amount is relative
+    animationComposition: 'accumulate',
     animationDuration: tokens.durationSlower,
     animationTimingFunction: tokens.curveDecelerateMid,
     [slideDistanceVarX]: `0px`,
@@ -43,7 +34,6 @@ export function createSlideStyles(mainAxis: number): GriffelStyle {
     },
 
     animationName: [
-      fadeIn,
       {
         from: {
           transform: `translate(var(${slideDistanceVarX}), var(${slideDistanceVarY}))`,
@@ -55,17 +45,16 @@ export function createSlideStyles(mainAxis: number): GriffelStyle {
     // Note: at-rules have more specificity in Griffel
     '@media(prefers-reduced-motion)': {
       [`&[${DATA_POSITIONING_PLACEMENT}]`]: {
-        animationComposition: 'replace',
-        animationDuration: '1ms',
-        animationName: fadeIn,
+        // Omit the slide animation
+        animationName: {},
       },
     },
 
     // Tested in Firefox 79
     '@supports not (animation-composition: accumulate)': {
       [`&[${DATA_POSITIONING_PLACEMENT}]`]: {
-        animationComposition: 'replace',
-        animationName: fadeIn,
+        // Omit the slide animation
+        animationName: {},
       },
     },
   };