breaking(react-drawer): open now only accepts a boolean instead of MotionShorthand

change/@fluentui-react-drawer-f0b39b94-dc6b-447a-aae1-919873990ecb.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "breaking: open prop now only accepts a boolean instead of MotionShorthand ",
+  "packageName": "@fluentui/react-drawer",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-drawer/etc/react-drawer.api.md

@@ -11,7 +11,6 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { DialogProps } from '@fluentui/react-dialog';
 import type { DialogSurfaceSlots } from '@fluentui/react-dialog';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import { MotionShorthand } from '@fluentui/react-motion-preview';
 import { MotionState } from '@fluentui/react-motion-preview';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';

packages/react-components/react-drawer/src/shared/DrawerBase.types.ts

@@ -1,4 +1,4 @@
-import { MotionShorthand, MotionState } from '@fluentui/react-motion-preview';
+import { MotionState } from '@fluentui/react-motion-preview';
 
 export type DrawerBaseProps = {
   /**
@@ -25,7 +25,7 @@ export type DrawerBaseProps = {
    *
    * @default false
    */
-  open?: MotionShorthand<HTMLDivElement>;
+  open?: boolean;
 };
 
 export type DrawerBaseState = Required<Pick<DrawerBaseProps, 'position' | 'size'>> & {

packages/react-components/react-drawer/stories/Drawer/DrawerMotionCustom.stories.tsx

@@ -1,20 +1,25 @@
 import * as React from 'react';
-import { Button, makeStyles, mergeClasses, shorthands, tokens } from '@fluentui/react-components';
+import { Button, makeStyles, mergeClasses, shorthands /* tokens */ } from '@fluentui/react-components';
 import { Dismiss24Regular } from '@fluentui/react-icons';
-import { useMotionClassNames, useMotion } from '@fluentui/react-motion-preview';
+// import { useMotionClassNames, useMotion } from '@fluentui/react-motion-preview';
 import { DrawerBody, DrawerHeader, DrawerHeaderTitle, InlineDrawer } from '@fluentui/react-drawer';
 
-const visibleKeyframe = {
-  ...shorthands.borderRadius(0),
-  opacity: 1,
-  transform: 'translate3D(0, 0, 0)',
-};
+/**
+ * TODO: The contents of this file should be uncommented when react-motion is stable.
+ * Note that this file is not included in the documentation, but we can keep it here for use in the future.
+ */
 
-const hiddenKeyframe = {
-  ...shorthands.borderRadius('36px'),
-  opacity: 0,
-  transform: 'translate3D(-100%, 0, 0)',
-};
+// const visibleKeyframe = {
+//   ...shorthands.borderRadius(0),
+//   opacity: 1,
+//   transform: 'translate3D(0, 0, 0)',
+// };
+
+// const hiddenKeyframe = {
+//   ...shorthands.borderRadius('36px'),
+//   opacity: 0,
+//   transform: 'translate3D(-100%, 0, 0)',
+// };
 
 const useStyles = makeStyles({
   root: {
@@ -42,68 +47,68 @@ const useStyles = makeStyles({
   },
 });
 
-const drawerWidth = '360px';
-
-const useDrawerMotionStyles = makeStyles({
-  default: {
-    width: drawerWidth,
-    willChange: 'opacity, transform, border-radius',
-  },
-
-  enter: {
-    animationDuration: tokens.durationGentle,
-    animationTimingFunction: tokens.curveDecelerateMid,
-    animationName: {
-      from: hiddenKeyframe,
-      to: visibleKeyframe,
-    },
-  },
-
-  exit: {
-    transitionDuration: tokens.durationSlower,
-    animationTimingFunction: tokens.curveAccelerateMin,
-    animationName: {
-      from: visibleKeyframe,
-      to: hiddenKeyframe,
-    },
-  },
-});
-
-const useContentMotionStyles = makeStyles({
-  default: {
-    transitionProperty: 'transform, background-color',
-    willChange: 'transform, background-color',
-  },
-
-  enter: {
-    transitionDuration: tokens.durationSlower,
-    transitionTimingFunction: tokens.curveDecelerateMid,
-    transform: `translate3D(${drawerWidth}, 0, 0)`,
-    backgroundColor: tokens.colorNeutralBackground4,
-  },
-
-  exit: {
-    transitionDuration: tokens.durationGentle,
-    transitionTimingFunction: tokens.curveAccelerateMin,
-    backgroundColor: tokens.colorNeutralBackground1,
-  },
-
-  idle: {
-    width: `calc(100% - ${drawerWidth})`,
-  },
-});
+// const drawerWidth = '360px';
+
+// const useDrawerMotionStyles = makeStyles({
+//   default: {
+//     width: drawerWidth,
+//     willChange: 'opacity, transform, border-radius',
+//   },
+
+//   enter: {
+//     animationDuration: tokens.durationGentle,
+//     animationTimingFunction: tokens.curveDecelerateMid,
+//     animationName: {
+//       from: hiddenKeyframe,
+//       to: visibleKeyframe,
+//     },
+//   },
+
+//   exit: {
+//     transitionDuration: tokens.durationSlower,
+//     animationTimingFunction: tokens.curveAccelerateMin,
+//     animationName: {
+//       from: visibleKeyframe,
+//       to: hiddenKeyframe,
+//     },
+//   },
+// });
+
+// const useContentMotionStyles = makeStyles({
+//   default: {
+//     transitionProperty: 'transform, background-color',
+//     willChange: 'transform, background-color',
+//   },
+
+//   enter: {
+//     transitionDuration: tokens.durationSlower,
+//     transitionTimingFunction: tokens.curveDecelerateMid,
+//     transform: `translate3D(${drawerWidth}, 0, 0)`,
+//     backgroundColor: tokens.colorNeutralBackground4,
+//   },
+
+//   exit: {
+//     transitionDuration: tokens.durationGentle,
+//     transitionTimingFunction: tokens.curveAccelerateMin,
+//     backgroundColor: tokens.colorNeutralBackground1,
+//   },
+
+//   idle: {
+//     width: `calc(100% - ${drawerWidth})`,
+//   },
+// });
 
 export const MotionCustom = () => {
   const styles = useStyles();
 
   const [open, setOpen] = React.useState(false);
-  const motion = useMotion<HTMLDivElement>(open);
-  const drawerMotionClassNames = useMotionClassNames(motion, useDrawerMotionStyles());
-  const contentMotionClassNames = useMotionClassNames(motion, useContentMotionStyles());
+  // const motion = useMotion<HTMLDivElement>(open);
+  // const drawerMotionClassNames = useMotionClassNames(motion, useDrawerMotionStyles());
+  // const contentMotionClassNames = useMotionClassNames(motion, useContentMotionStyles());
 
   return (
     <div className={styles.root}>
-      <InlineDrawer separator open={motion} className={drawerMotionClassNames}>
+      <InlineDrawer separator /* open={motion} className={drawerMotionClassNames} */>
         <DrawerHeader>
           <DrawerHeaderTitle
             action={
@@ -124,7 +129,7 @@ export const MotionCustom = () => {
         </DrawerBody>
       </InlineDrawer>
 
-      <div className={mergeClasses(styles.content, contentMotionClassNames)}>
+      <div className={mergeClasses(styles.content /* contentMotionClassNames */)}>
         <Button appearance="primary" onClick={() => setOpen(!open)}>
           {open ? 'Close' : 'Open'}
         </Button>

packages/react-components/react-drawer/stories/Drawer/index.stories.tsx

@@ -22,7 +22,8 @@ export { Separator } from './DrawerSeparator.stories';
 export { WithTitle } from './DrawerWithTitle.stories';
 export { WithNavigation } from './DrawerWithNavigation.stories';
 export { WithScroll } from './DrawerWithScroll.stories';
-export { MotionCustom } from './DrawerMotionCustom.stories';
+// @TODO: enable when react-motion is stable
+// export { MotionCustom } from './DrawerMotionCustom.stories';
 export { MotionDisabled } from './DrawerMotionDisabled.stories';
 export { MultipleLevels } from './DrawerMultipleLevels.stories';
 export { AlwaysOpen } from './DrawerAlwaysOpen.stories';