Skip to content

Commit b4b696c

Browse files
marcosmouramarcosmoura
authored
breaking(react-drawer): open now only accepts a boolean instead of MotionShorthand (#29736)
1 parent c30d938 commit b4b696c

File tree

5 files changed

+83
-71
lines changed

5 files changed

+83
-71
lines changed

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "breaking: open prop now only accepts a boolean instead of MotionShorthand ",
4+
"packageName": "@fluentui/react-drawer",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import type { ComponentState } from '@fluentui/react-utilities';
1111
import type { DialogProps } from '@fluentui/react-dialog';
1212
import type { DialogSurfaceSlots } from '@fluentui/react-dialog';
1313
import type { ForwardRefComponent } from '@fluentui/react-utilities';
14-
import { MotionShorthand } from '@fluentui/react-motion-preview';
1514
import { MotionState } from '@fluentui/react-motion-preview';
1615
import * as React_2 from 'react';
1716
import type { Slot } from '@fluentui/react-utilities';

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { MotionShorthand, MotionState } from '@fluentui/react-motion-preview';
1+
import { MotionState } from '@fluentui/react-motion-preview';
22

33
export type DrawerBaseProps = {
44
/**
@@ -25,7 +25,7 @@ export type DrawerBaseProps = {
2525
*
2626
* @default false
2727
*/
28-
open?: MotionShorthand<HTMLDivElement>;
28+
open?: boolean;
2929
};
3030

3131
export type DrawerBaseState = Required<Pick<DrawerBaseProps, 'position' | 'size'>> & {

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

Lines changed: 72 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,25 @@
11
import * as React from 'react';
2-
import { Button, makeStyles, mergeClasses, shorthands, tokens } from '@fluentui/react-components';
2+
import { Button, makeStyles, mergeClasses, shorthands /* tokens */ } from '@fluentui/react-components';
33
import { Dismiss24Regular } from '@fluentui/react-icons';
4-
import { useMotionClassNames, useMotion } from '@fluentui/react-motion-preview';
4+
// import { useMotionClassNames, useMotion } from '@fluentui/react-motion-preview';
55
import { DrawerBody, DrawerHeader, DrawerHeaderTitle, InlineDrawer } from '@fluentui/react-drawer';
66

7-
const visibleKeyframe = {
8-
...shorthands.borderRadius(0),
9-
opacity: 1,
10-
transform: 'translate3D(0, 0, 0)',
11-
};
7+
/**
8+
* TODO: The contents of this file should be uncommented when react-motion is stable.
9+
* Note that this file is not included in the documentation, but we can keep it here for use in the future.
10+
*/
1211

13-
const hiddenKeyframe = {
14-
...shorthands.borderRadius('36px'),
15-
opacity: 0,
16-
transform: 'translate3D(-100%, 0, 0)',
17-
};
12+
// const visibleKeyframe = {
13+
// ...shorthands.borderRadius(0),
14+
// opacity: 1,
15+
// transform: 'translate3D(0, 0, 0)',
16+
// };
17+
18+
// const hiddenKeyframe = {
19+
// ...shorthands.borderRadius('36px'),
20+
// opacity: 0,
21+
// transform: 'translate3D(-100%, 0, 0)',
22+
// };
1823

1924
const useStyles = makeStyles({
2025
root: {
@@ -42,68 +47,68 @@ const useStyles = makeStyles({
4247
},
4348
});
4449

45-
const drawerWidth = '360px';
46-
47-
const useDrawerMotionStyles = makeStyles({
48-
default: {
49-
width: drawerWidth,
50-
willChange: 'opacity, transform, border-radius',
51-
},
52-
53-
enter: {
54-
animationDuration: tokens.durationGentle,
55-
animationTimingFunction: tokens.curveDecelerateMid,
56-
animationName: {
57-
from: hiddenKeyframe,
58-
to: visibleKeyframe,
59-
},
60-
},
61-
62-
exit: {
63-
transitionDuration: tokens.durationSlower,
64-
animationTimingFunction: tokens.curveAccelerateMin,
65-
animationName: {
66-
from: visibleKeyframe,
67-
to: hiddenKeyframe,
68-
},
69-
},
70-
});
71-
72-
const useContentMotionStyles = makeStyles({
73-
default: {
74-
transitionProperty: 'transform, background-color',
75-
willChange: 'transform, background-color',
76-
},
77-
78-
enter: {
79-
transitionDuration: tokens.durationSlower,
80-
transitionTimingFunction: tokens.curveDecelerateMid,
81-
transform: `translate3D(${drawerWidth}, 0, 0)`,
82-
backgroundColor: tokens.colorNeutralBackground4,
83-
},
84-
85-
exit: {
86-
transitionDuration: tokens.durationGentle,
87-
transitionTimingFunction: tokens.curveAccelerateMin,
88-
backgroundColor: tokens.colorNeutralBackground1,
89-
},
90-
91-
idle: {
92-
width: `calc(100% - ${drawerWidth})`,
93-
},
94-
});
50+
// const drawerWidth = '360px';
51+
52+
// const useDrawerMotionStyles = makeStyles({
53+
// default: {
54+
// width: drawerWidth,
55+
// willChange: 'opacity, transform, border-radius',
56+
// },
57+
58+
// enter: {
59+
// animationDuration: tokens.durationGentle,
60+
// animationTimingFunction: tokens.curveDecelerateMid,
61+
// animationName: {
62+
// from: hiddenKeyframe,
63+
// to: visibleKeyframe,
64+
// },
65+
// },
66+
67+
// exit: {
68+
// transitionDuration: tokens.durationSlower,
69+
// animationTimingFunction: tokens.curveAccelerateMin,
70+
// animationName: {
71+
// from: visibleKeyframe,
72+
// to: hiddenKeyframe,
73+
// },
74+
// },
75+
// });
76+
77+
// const useContentMotionStyles = makeStyles({
78+
// default: {
79+
// transitionProperty: 'transform, background-color',
80+
// willChange: 'transform, background-color',
81+
// },
82+
83+
// enter: {
84+
// transitionDuration: tokens.durationSlower,
85+
// transitionTimingFunction: tokens.curveDecelerateMid,
86+
// transform: `translate3D(${drawerWidth}, 0, 0)`,
87+
// backgroundColor: tokens.colorNeutralBackground4,
88+
// },
89+
90+
// exit: {
91+
// transitionDuration: tokens.durationGentle,
92+
// transitionTimingFunction: tokens.curveAccelerateMin,
93+
// backgroundColor: tokens.colorNeutralBackground1,
94+
// },
95+
96+
// idle: {
97+
// width: `calc(100% - ${drawerWidth})`,
98+
// },
99+
// });
95100

96101
export const MotionCustom = () => {
97102
const styles = useStyles();
98103

99104
const [open, setOpen] = React.useState(false);
100-
const motion = useMotion<HTMLDivElement>(open);
101-
const drawerMotionClassNames = useMotionClassNames(motion, useDrawerMotionStyles());
102-
const contentMotionClassNames = useMotionClassNames(motion, useContentMotionStyles());
105+
// const motion = useMotion<HTMLDivElement>(open);
106+
// const drawerMotionClassNames = useMotionClassNames(motion, useDrawerMotionStyles());
107+
// const contentMotionClassNames = useMotionClassNames(motion, useContentMotionStyles());
103108

104109
return (
105110
<div className={styles.root}>
106-
<InlineDrawer separator open={motion} className={drawerMotionClassNames}>
111+
<InlineDrawer separator /* open={motion} className={drawerMotionClassNames} */>
107112
<DrawerHeader>
108113
<DrawerHeaderTitle
109114
action={
@@ -124,7 +129,7 @@ export const MotionCustom = () => {
124129
</DrawerBody>
125130
</InlineDrawer>
126131

127-
<div className={mergeClasses(styles.content, contentMotionClassNames)}>
132+
<div className={mergeClasses(styles.content /* contentMotionClassNames */)}>
128133
<Button appearance="primary" onClick={() => setOpen(!open)}>
129134
{open ? 'Close' : 'Open'}
130135
</Button>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ export { Separator } from './DrawerSeparator.stories';
2222
export { WithTitle } from './DrawerWithTitle.stories';
2323
export { WithNavigation } from './DrawerWithNavigation.stories';
2424
export { WithScroll } from './DrawerWithScroll.stories';
25-
export { MotionCustom } from './DrawerMotionCustom.stories';
25+
// @TODO: enable when react-motion is stable
26+
// export { MotionCustom } from './DrawerMotionCustom.stories';
2627
export { MotionDisabled } from './DrawerMotionDisabled.stories';
2728
export { MultipleLevels } from './DrawerMultipleLevels.stories';
2829
export { AlwaysOpen } from './DrawerAlwaysOpen.stories';

0 commit comments

Comments
 (0)