From 1807975e512faae29022cffd4ae7cf0b1f18845b Mon Sep 17 00:00:00 2001 From: viktorgenaev Date: Fri, 6 Sep 2024 17:33:31 +0200 Subject: [PATCH 01/15] docs(docs-site): add motion components doc page --- .../Concepts/Motion/CustomMotion.stories.tsx | 140 ++++++++++++++++++ .../Motion/CustomMotionDescription.md | 2 + .../src/Concepts/Motion/Default.stories.tsx | 40 +++++ .../Concepts/Motion/DisableMotion.stories.tsx | 69 +++++++++ .../Motion/DisableMotionDescription.md | 1 + .../src/Concepts/Motion/MotionDescription.md | 9 ++ .../src/Concepts/Motion/index.stories.tsx | 19 +++ .../src/Concepts/Motion/utils.stories.tsx | 9 ++ 8 files changed, 289 insertions(+) create mode 100644 apps/public-docsite-v9/src/Concepts/Motion/CustomMotion.stories.tsx create mode 100644 apps/public-docsite-v9/src/Concepts/Motion/CustomMotionDescription.md create mode 100644 apps/public-docsite-v9/src/Concepts/Motion/Default.stories.tsx create mode 100644 apps/public-docsite-v9/src/Concepts/Motion/DisableMotion.stories.tsx create mode 100644 apps/public-docsite-v9/src/Concepts/Motion/DisableMotionDescription.md create mode 100644 apps/public-docsite-v9/src/Concepts/Motion/MotionDescription.md create mode 100644 apps/public-docsite-v9/src/Concepts/Motion/index.stories.tsx create mode 100644 apps/public-docsite-v9/src/Concepts/Motion/utils.stories.tsx diff --git a/apps/public-docsite-v9/src/Concepts/Motion/CustomMotion.stories.tsx b/apps/public-docsite-v9/src/Concepts/Motion/CustomMotion.stories.tsx new file mode 100644 index 00000000000000..0351f637cbd380 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Motion/CustomMotion.stories.tsx @@ -0,0 +1,140 @@ +import * as React from 'react'; +import { + Dialog, + tokens, + DialogTrigger, + DialogSurface, + makeStyles, + DialogTitle, + DialogBody, + DialogActions, + DialogContent, + Button, + Link, + createPresenceComponent, + motionTokens, +} from '@fluentui/react-components'; +import story from './CustomMotionDescription.md'; + +const useStyles = makeStyles({ + wrapper: { + display: 'flex', + gap: '20px', + }, +}); + +const keyframes = [ + { opacity: 0, transform: 'translateX(-100%)', boxShadow: '0px 0px 0px 0px rgba(0, 0, 0, 0.1)' }, + { opacity: 1, transform: 'translateX(0)', boxShadow: tokens.shadow64 }, +]; + +const SlideDialogMotion = createPresenceComponent({ + enter: { + keyframes, + easing: motionTokens.curveDecelerateMax, + duration: motionTokens.durationGentle, + }, + exit: { + keyframes: [ + { opacity: 1, transform: 'translateX(0)', boxShadow: tokens.shadow64 }, + { opacity: 0, transform: 'translateX(100%)', boxShadow: '0px 0px 0px 0px rgba(0, 0, 0, 0.1)' }, + ], + easing: motionTokens.curveAccelerateMid, + duration: motionTokens.durationGentle, + }, +}); + +const keyframesBackdrop = [ + { + opacity: 0, + background: 'radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%)', + transform: 'scale(0)', + }, + { + opacity: 1, + background: 'radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%)', + transform: 'scale(1)', + }, +]; + +const RadialBackdropMotion = createPresenceComponent({ + enter: { + keyframes: keyframesBackdrop, + easing: motionTokens.curveDecelerateMax, + duration: motionTokens.durationGentle, + }, + exit: { + keyframes: [...keyframesBackdrop].reverse(), + easing: motionTokens.curveAccelerateMax, + duration: motionTokens.durationGentle, + }, +}); + +export const CustomMotion = () => { + const classes = useStyles(); + + return ( +
+ { + return {props.children}; + }, + }} + > + + + + + + Custom surface motion + + If you need to use a custom animation, you can use a render function inside surfaceMotion slot and + apply your custom animation built with{' '} + + createPresenceComponent + + + + + + + + + + + + + + + + { + return {props.children}; + }, + }} + > + + Custom backdrop + Customized dimmed background motion + + + + + + + + + +
+ ); +}; + +CustomMotion.parameters = { + docs: { + description: { + story, + }, + }, +}; diff --git a/apps/public-docsite-v9/src/Concepts/Motion/CustomMotionDescription.md b/apps/public-docsite-v9/src/Concepts/Motion/CustomMotionDescription.md new file mode 100644 index 00000000000000..5886469d7b8e3c --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Motion/CustomMotionDescription.md @@ -0,0 +1,2 @@ +If you need to use a custom animation, you can use a render function inside a slot and +apply your custom animation built with [createPresenceComponent](https://react.fluentui.dev/?path=/docs/motion-apis-createpresencecomponent--docs"). diff --git a/apps/public-docsite-v9/src/Concepts/Motion/Default.stories.tsx b/apps/public-docsite-v9/src/Concepts/Motion/Default.stories.tsx new file mode 100644 index 00000000000000..763c984f9c07fa --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Motion/Default.stories.tsx @@ -0,0 +1,40 @@ +import * as React from 'react'; +import { + Dialog, + DialogTrigger, + DialogSurface, + DialogTitle, + DialogBody, + DialogActions, + DialogContent, + Link, + Button, +} from '@fluentui/react-components'; + +export const Default = () => { + return ( + + + + + + + Surface motion and backdrop are enabled + + Dialog has surfaceMotion slot, built with{' '} + + createPresenceComponent + {' '} + for scale animation. + + + + + + + + + + + ); +}; diff --git a/apps/public-docsite-v9/src/Concepts/Motion/DisableMotion.stories.tsx b/apps/public-docsite-v9/src/Concepts/Motion/DisableMotion.stories.tsx new file mode 100644 index 00000000000000..409e2594873b19 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Motion/DisableMotion.stories.tsx @@ -0,0 +1,69 @@ +import * as React from 'react'; +import { + Dialog, + DialogTrigger, + DialogSurface, + makeStyles, + DialogTitle, + DialogBody, + DialogActions, + DialogContent, + Button, +} from '@fluentui/react-components'; +import story from './DisableMotionDescription.md'; + +const useStyles = makeStyles({ + wrapper: { + display: 'flex', + gap: '20px', + }, +}); + +export const DisableMotion = () => { + const classes = useStyles(); + + return ( +
+ + + + + + + Surface motion disabled + Dialog has no surface scale animation. + + + + + + + + + + + + + + + + Dialog has no animation and backdrop + Backdrop (dimmed background of dialog) can also be disabled. + + + + + + + + + +
+ ); +}; + +DisableMotion.parameters = { + docs: { + description: { story }, + }, +}; diff --git a/apps/public-docsite-v9/src/Concepts/Motion/DisableMotionDescription.md b/apps/public-docsite-v9/src/Concepts/Motion/DisableMotionDescription.md new file mode 100644 index 00000000000000..232e913fc24745 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Motion/DisableMotionDescription.md @@ -0,0 +1 @@ +In order to disable motion you can pass `null` to appropriate slot. diff --git a/apps/public-docsite-v9/src/Concepts/Motion/MotionDescription.md b/apps/public-docsite-v9/src/Concepts/Motion/MotionDescription.md new file mode 100644 index 00000000000000..e2747b5bccf139 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Motion/MotionDescription.md @@ -0,0 +1,9 @@ +Fluent components leverages the `@fluentui/react-motion` to handle animations. All components that expose a motion slot, can be configured in a similar way. For detailed guidance on creating animations using `@fluentui/react-motion`, refer to the [motion API](https://react.fluentui.dev/?path=/docs/motion-apis-createpresencecomponent--docs) documentation. + +### Components using motion API + +- Dialog +- Drawer +- Toast (internally uses the motion API but does not expose a slot) + +For components that provide a slot to control animation, you can disable or customize the motion by configuring these slots. diff --git a/apps/public-docsite-v9/src/Concepts/Motion/index.stories.tsx b/apps/public-docsite-v9/src/Concepts/Motion/index.stories.tsx new file mode 100644 index 00000000000000..53dd67c956514c --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Motion/index.stories.tsx @@ -0,0 +1,19 @@ +import description from './MotionDescription.md'; +import { Motion } from './utils.stories'; + +export { Default } from './Default.stories'; +export { DisableMotion } from './DisableMotion.stories'; +export { CustomMotion } from './CustomMotion.stories'; + +export default { + title: 'Concepts/Developer/Motion Components', + component: Motion, + parameters: { + layout: 'centered', + docs: { + description: { + component: [description].join('\n'), + }, + }, + }, +}; diff --git a/apps/public-docsite-v9/src/Concepts/Motion/utils.stories.tsx b/apps/public-docsite-v9/src/Concepts/Motion/utils.stories.tsx new file mode 100644 index 00000000000000..d0d7726ac9082d --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Motion/utils.stories.tsx @@ -0,0 +1,9 @@ +import * as React from 'react'; +import type { PresenceComponentProps } from '@fluentui/react-components'; + +/** + * A helper component for storybook to auto generate an args table for motion props + */ +export const Motion: React.FC = () => { + return
; +}; From 3e68085f9ddfa56a473feca88c61df2c9cc066bd Mon Sep 17 00:00:00 2001 From: viktorgenaev Date: Fri, 6 Sep 2024 21:30:56 +0200 Subject: [PATCH 02/15] docs(react-dialog): add link to motion docs --- .../library/src/components/Dialog/Dialog.types.ts | 5 ++++- .../src/components/DialogSurface/DialogSurface.types.ts | 5 ++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-dialog/library/src/components/Dialog/Dialog.types.ts b/packages/react-components/react-dialog/library/src/components/Dialog/Dialog.types.ts index 3629d78884e4ec..93f0e7f48645d4 100644 --- a/packages/react-components/react-dialog/library/src/components/Dialog/Dialog.types.ts +++ b/packages/react-components/react-dialog/library/src/components/Dialog/Dialog.types.ts @@ -6,11 +6,14 @@ import type { DialogContextValue, DialogSurfaceContextValue } from '../../contex import type { DialogSurfaceElement } from '../DialogSurface/DialogSurface.types'; export type DialogSlots = { + /** + * For more information refer to the [Motion Components page](/?path=/docs/concepts-developer-motion-components--docs). + * + */ surfaceMotion: Slot; }; export type InternalDialogSlots = { - // motion slots cannot be nullable surfaceMotion: NonNullable>; }; diff --git a/packages/react-components/react-dialog/library/src/components/DialogSurface/DialogSurface.types.ts b/packages/react-components/react-dialog/library/src/components/DialogSurface/DialogSurface.types.ts index 21934a8c3d2b45..71e8dd4194988b 100644 --- a/packages/react-components/react-dialog/library/src/components/DialogSurface/DialogSurface.types.ts +++ b/packages/react-components/react-dialog/library/src/components/DialogSurface/DialogSurface.types.ts @@ -14,7 +14,10 @@ export type DialogSurfaceSlots = { */ backdrop?: Slot<'div'>; root: Slot<'div'>; - + /** + * For more information refer to the [Motion Components page](/?path=/docs/concepts-developer-motion-components--docs). + * + */ backdropMotion: Slot; }; From 922d6eef756e3d5157c9518d0c0633a66f17ba2e Mon Sep 17 00:00:00 2001 From: viktorgenaev Date: Fri, 6 Sep 2024 21:31:11 +0200 Subject: [PATCH 03/15] docs(react-drawer): add link to motion docs --- .../src/components/OverlayDrawer/OverlayDrawer.types.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.types.ts b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.types.ts index 23fad795bdb83c..e84c364904abb5 100644 --- a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.types.ts +++ b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.types.ts @@ -14,8 +14,15 @@ export type OverlayDrawerSlots = { * Slot for the root element. */ root: Slot; - + /** + * For more information refer to the [Motion Components page](/?path=/docs/concepts-developer-motion-components--docs). + * + */ backdropMotion?: Slot>; + /** + * For more information refer to the [Motion Components page](/?path=/docs/concepts-developer-motion-components--docs). + * + */ surfaceMotion?: Slot>; }; From 46ebf102d4cd289f3d52ce7fe0d6dc1ca05ff5f8 Mon Sep 17 00:00:00 2001 From: viktorgenaev Date: Fri, 6 Sep 2024 21:50:49 +0200 Subject: [PATCH 04/15] chore: update change files --- ...-react-dialog-8ba14dae-2316-4b9a-b2f6-eb0d73be7cf3.json | 7 +++++++ ...-react-drawer-5d3bdcc4-6781-480e-9d49-f441ee95112e.json | 7 +++++++ 2 files changed, 14 insertions(+) create mode 100644 change/@fluentui-react-dialog-8ba14dae-2316-4b9a-b2f6-eb0d73be7cf3.json create mode 100644 change/@fluentui-react-drawer-5d3bdcc4-6781-480e-9d49-f441ee95112e.json diff --git a/change/@fluentui-react-dialog-8ba14dae-2316-4b9a-b2f6-eb0d73be7cf3.json b/change/@fluentui-react-dialog-8ba14dae-2316-4b9a-b2f6-eb0d73be7cf3.json new file mode 100644 index 00000000000000..982274d0172a01 --- /dev/null +++ b/change/@fluentui-react-dialog-8ba14dae-2316-4b9a-b2f6-eb0d73be7cf3.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "add link to motion docs page", + "packageName": "@fluentui/react-dialog", + "email": "viktorgenaev@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-drawer-5d3bdcc4-6781-480e-9d49-f441ee95112e.json b/change/@fluentui-react-drawer-5d3bdcc4-6781-480e-9d49-f441ee95112e.json new file mode 100644 index 00000000000000..3002e59409cb49 --- /dev/null +++ b/change/@fluentui-react-drawer-5d3bdcc4-6781-480e-9d49-f441ee95112e.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "add link to motion docs page", + "packageName": "@fluentui/react-drawer", + "email": "viktorgenaev@microsoft.com", + "dependentChangeType": "none" +} From db437f49d7315f4e400d8151fb17540f01d7c779 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 23 Sep 2024 15:40:34 +0200 Subject: [PATCH 05/15] improve page UI --- .../src/Concepts/Motion/Default.stories.tsx | 40 -------- .../src/Concepts/Motion/utils.stories.tsx | 9 -- .../DocsComponents/FluentDocsPage.stories.tsx | 51 +++++++---- .../src}/Motion/CustomMotion.stories.tsx | 91 +++++++++---------- .../src}/Motion/CustomMotionDescription.md | 0 .../src}/Motion/DisableMotion.stories.tsx | 0 .../src}/Motion/DisableMotionDescription.md | 0 .../stories/src}/Motion/MotionDescription.md | 2 +- .../stories/src}/Motion/index.stories.tsx | 13 +-- 9 files changed, 83 insertions(+), 123 deletions(-) delete mode 100644 apps/public-docsite-v9/src/Concepts/Motion/Default.stories.tsx delete mode 100644 apps/public-docsite-v9/src/Concepts/Motion/utils.stories.tsx rename {apps/public-docsite-v9/src/Concepts => packages/react-components/react-motion/stories/src}/Motion/CustomMotion.stories.tsx (59%) rename {apps/public-docsite-v9/src/Concepts => packages/react-components/react-motion/stories/src}/Motion/CustomMotionDescription.md (100%) rename {apps/public-docsite-v9/src/Concepts => packages/react-components/react-motion/stories/src}/Motion/DisableMotion.stories.tsx (100%) rename {apps/public-docsite-v9/src/Concepts => packages/react-components/react-motion/stories/src}/Motion/DisableMotionDescription.md (100%) rename {apps/public-docsite-v9/src/Concepts => packages/react-components/react-motion/stories/src}/Motion/MotionDescription.md (88%) rename {apps/public-docsite-v9/src/Concepts => packages/react-components/react-motion/stories/src}/Motion/index.stories.tsx (57%) diff --git a/apps/public-docsite-v9/src/Concepts/Motion/Default.stories.tsx b/apps/public-docsite-v9/src/Concepts/Motion/Default.stories.tsx deleted file mode 100644 index 763c984f9c07fa..00000000000000 --- a/apps/public-docsite-v9/src/Concepts/Motion/Default.stories.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import * as React from 'react'; -import { - Dialog, - DialogTrigger, - DialogSurface, - DialogTitle, - DialogBody, - DialogActions, - DialogContent, - Link, - Button, -} from '@fluentui/react-components'; - -export const Default = () => { - return ( - - - - - - - Surface motion and backdrop are enabled - - Dialog has surfaceMotion slot, built with{' '} - - createPresenceComponent - {' '} - for scale animation. - - - - - - - - - - - ); -}; diff --git a/apps/public-docsite-v9/src/Concepts/Motion/utils.stories.tsx b/apps/public-docsite-v9/src/Concepts/Motion/utils.stories.tsx deleted file mode 100644 index d0d7726ac9082d..00000000000000 --- a/apps/public-docsite-v9/src/Concepts/Motion/utils.stories.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import * as React from 'react'; -import type { PresenceComponentProps } from '@fluentui/react-components'; - -/** - * A helper component for storybook to auto generate an args table for motion props - */ -export const Motion: React.FC = () => { - return
; -}; diff --git a/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx b/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx index aaf9bf8cc8b023..afef90d23a9941 100644 --- a/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx +++ b/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx @@ -141,6 +141,9 @@ export const FluentDocsPage = () => { const dir = primaryStoryContext.parameters?.dir ?? primaryStoryContext.globals?.[DIR_ID] ?? 'ltr'; const selectedTheme = themes.find(theme => theme.id === primaryStoryContext.globals![THEME_ID]); + const hideArgsTable = primaryStoryContext.parameters?.docs?.hideArgsTable ?? false; + const skipPrimaryStory = primaryStoryContext.parameters?.docs?.skipPrimaryStory ?? false; + const videos = primaryStoryContext.parameters?.videos ?? null; const styles = useStyles(); // DEBUG @@ -169,26 +172,34 @@ export const FluentDocsPage = () => { {videos && }
-
- - {primaryStory.name} - - - - {primaryStory.argTypes.as && primaryStory.argTypes.as?.type?.name === 'enum' && ( -
- -
- - Native props are supported 🙌 - - - All HTML attributes native to the {getNativeElementsList(primaryStory.argTypes.as.type.value)}, - including all aria-* and data-* attributes, can be applied as native props - on this component. - -
-
+ {skipPrimaryStory ? null : ( + <> +
+ + {primaryStory.name} + + + + )} + {hideArgsTable ? null : ( + <> + + {primaryStory.argTypes.as && primaryStory.argTypes.as?.type?.name === 'enum' && ( +
+ +
+ + Native props are supported 🙌 + + + All HTML attributes native to the {getNativeElementsList(primaryStory.argTypes.as.type.value)}, + including all aria-* and data-* attributes, can be applied as native + props on this component. + +
+
+ )} + )}
diff --git a/apps/public-docsite-v9/src/Concepts/Motion/CustomMotion.stories.tsx b/packages/react-components/react-motion/stories/src/Motion/CustomMotion.stories.tsx similarity index 59% rename from apps/public-docsite-v9/src/Concepts/Motion/CustomMotion.stories.tsx rename to packages/react-components/react-motion/stories/src/Motion/CustomMotion.stories.tsx index 0351f637cbd380..6d32b2e225d6b0 100644 --- a/apps/public-docsite-v9/src/Concepts/Motion/CustomMotion.stories.tsx +++ b/packages/react-components/react-motion/stories/src/Motion/CustomMotion.stories.tsx @@ -23,51 +23,52 @@ const useStyles = makeStyles({ }, }); -const keyframes = [ - { opacity: 0, transform: 'translateX(-100%)', boxShadow: '0px 0px 0px 0px rgba(0, 0, 0, 0.1)' }, - { opacity: 1, transform: 'translateX(0)', boxShadow: tokens.shadow64 }, -]; +const SlideDialogMotion = createPresenceComponent(() => { + const keyframes = [ + { opacity: 0, transform: 'translateX(-100%)', boxShadow: '0px 0px 0px 0px rgba(0, 0, 0, 0.1)' }, + { opacity: 1, transform: 'translateX(0)', boxShadow: tokens.shadow64 }, + ]; -const SlideDialogMotion = createPresenceComponent({ - enter: { - keyframes, - easing: motionTokens.curveDecelerateMax, - duration: motionTokens.durationGentle, - }, - exit: { - keyframes: [ - { opacity: 1, transform: 'translateX(0)', boxShadow: tokens.shadow64 }, - { opacity: 0, transform: 'translateX(100%)', boxShadow: '0px 0px 0px 0px rgba(0, 0, 0, 0.1)' }, - ], - easing: motionTokens.curveAccelerateMid, - duration: motionTokens.durationGentle, - }, + return { + enter: { + keyframes, + easing: motionTokens.curveDecelerateMax, + duration: motionTokens.durationGentle, + }, + exit: { + keyframes: [...keyframes].reverse(), + easing: motionTokens.curveAccelerateMid, + duration: motionTokens.durationGentle, + }, + }; }); -const keyframesBackdrop = [ - { - opacity: 0, - background: 'radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%)', - transform: 'scale(0)', - }, - { - opacity: 1, - background: 'radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%)', - transform: 'scale(1)', - }, -]; +const RadialBackdropMotion = createPresenceComponent(() => { + const keyframes = [ + { + opacity: 0, + background: 'radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%)', + transform: 'scale(0)', + }, + { + opacity: 1, + background: 'radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%)', + transform: 'scale(1)', + }, + ]; -const RadialBackdropMotion = createPresenceComponent({ - enter: { - keyframes: keyframesBackdrop, - easing: motionTokens.curveDecelerateMax, - duration: motionTokens.durationGentle, - }, - exit: { - keyframes: [...keyframesBackdrop].reverse(), - easing: motionTokens.curveAccelerateMax, - duration: motionTokens.durationGentle, - }, + return { + enter: { + keyframes: keyframes, + easing: motionTokens.curveDecelerateMax, + duration: motionTokens.durationGentle, + }, + exit: { + keyframes: [...keyframes].reverse(), + easing: motionTokens.curveAccelerateMax, + duration: motionTokens.durationGentle, + }, + }; }); export const CustomMotion = () => { @@ -77,9 +78,7 @@ export const CustomMotion = () => {
{ - return {props.children}; - }, + children: (_, props) => {props.children}, }} > @@ -110,9 +109,7 @@ export const CustomMotion = () => { { - return {props.children}; - }, + children: (_, props) => {props.children}, }} > diff --git a/apps/public-docsite-v9/src/Concepts/Motion/CustomMotionDescription.md b/packages/react-components/react-motion/stories/src/Motion/CustomMotionDescription.md similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Motion/CustomMotionDescription.md rename to packages/react-components/react-motion/stories/src/Motion/CustomMotionDescription.md diff --git a/apps/public-docsite-v9/src/Concepts/Motion/DisableMotion.stories.tsx b/packages/react-components/react-motion/stories/src/Motion/DisableMotion.stories.tsx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Motion/DisableMotion.stories.tsx rename to packages/react-components/react-motion/stories/src/Motion/DisableMotion.stories.tsx diff --git a/apps/public-docsite-v9/src/Concepts/Motion/DisableMotionDescription.md b/packages/react-components/react-motion/stories/src/Motion/DisableMotionDescription.md similarity index 100% rename from apps/public-docsite-v9/src/Concepts/Motion/DisableMotionDescription.md rename to packages/react-components/react-motion/stories/src/Motion/DisableMotionDescription.md diff --git a/apps/public-docsite-v9/src/Concepts/Motion/MotionDescription.md b/packages/react-components/react-motion/stories/src/Motion/MotionDescription.md similarity index 88% rename from apps/public-docsite-v9/src/Concepts/Motion/MotionDescription.md rename to packages/react-components/react-motion/stories/src/Motion/MotionDescription.md index e2747b5bccf139..e9ba7e8d1ec6f2 100644 --- a/apps/public-docsite-v9/src/Concepts/Motion/MotionDescription.md +++ b/packages/react-components/react-motion/stories/src/Motion/MotionDescription.md @@ -4,6 +4,6 @@ Fluent components leverages the `@fluentui/react-motion` to handle animations. A - Dialog - Drawer -- Toast (internally uses the motion API but does not expose a slot) +- Toast (_internally uses the motion API but does not expose a slot_) For components that provide a slot to control animation, you can disable or customize the motion by configuring these slots. diff --git a/apps/public-docsite-v9/src/Concepts/Motion/index.stories.tsx b/packages/react-components/react-motion/stories/src/Motion/index.stories.tsx similarity index 57% rename from apps/public-docsite-v9/src/Concepts/Motion/index.stories.tsx rename to packages/react-components/react-motion/stories/src/Motion/index.stories.tsx index 53dd67c956514c..db375664142e45 100644 --- a/apps/public-docsite-v9/src/Concepts/Motion/index.stories.tsx +++ b/packages/react-components/react-motion/stories/src/Motion/index.stories.tsx @@ -1,19 +1,20 @@ +import type { Meta } from '@storybook/react'; + import description from './MotionDescription.md'; -import { Motion } from './utils.stories'; -export { Default } from './Default.stories'; export { DisableMotion } from './DisableMotion.stories'; export { CustomMotion } from './CustomMotion.stories'; export default { - title: 'Concepts/Developer/Motion Components', - component: Motion, + title: 'Motion/Motion Slot', parameters: { layout: 'centered', docs: { description: { - component: [description].join('\n'), + component: description, }, + hideArgsTable: true, + skipPrimaryStory: true, }, }, -}; +} satisfies Meta; From e3caaeefcf712e70de504ee981a819be9fbc888c Mon Sep 17 00:00:00 2001 From: viktorgenaev Date: Mon, 23 Sep 2024 16:44:00 +0200 Subject: [PATCH 06/15] docs(react-motion): add arg tables for createMotionComponent and createPresenceComponent --- .../stories/src/CreateMotionComponent/index.stories.ts | 2 ++ .../stories/src/CreateMotionComponent/utils.stories.tsx | 9 +++++++++ .../stories/src/CreatePresenceComponent/index.stories.ts | 2 ++ .../src/CreatePresenceComponent/utils.stories.tsx | 9 +++++++++ .../stories/src/PresenceGroup/index.stories.ts | 1 + 5 files changed, 23 insertions(+) create mode 100644 packages/react-components/react-motion/stories/src/CreateMotionComponent/utils.stories.tsx create mode 100644 packages/react-components/react-motion/stories/src/CreatePresenceComponent/utils.stories.tsx diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/index.stories.ts b/packages/react-components/react-motion/stories/src/CreateMotionComponent/index.stories.ts index bc1173d4430a6a..a57f40519ffcb6 100644 --- a/packages/react-components/react-motion/stories/src/CreateMotionComponent/index.stories.ts +++ b/packages/react-components/react-motion/stories/src/CreateMotionComponent/index.stories.ts @@ -1,5 +1,6 @@ import type { Meta } from '@storybook/react'; import CreateMotionComponentDescription from './CreateMotionComponentDescription.md'; +import { MotionComponent } from './utils.stories'; export { CreateMotionComponentDefault as Default } from './CreateMotionComponentDefault.stories'; @@ -15,6 +16,7 @@ export { MotionFunctionParams as functionParams } from './MotionFunctionParams.s export default { title: 'Motion/APIs/createMotionComponent', + component: MotionComponent, parameters: { docs: { description: { diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/utils.stories.tsx b/packages/react-components/react-motion/stories/src/CreateMotionComponent/utils.stories.tsx new file mode 100644 index 00000000000000..fd9ae2318c2f42 --- /dev/null +++ b/packages/react-components/react-motion/stories/src/CreateMotionComponent/utils.stories.tsx @@ -0,0 +1,9 @@ +import * as React from 'react'; +import type { MotionComponentProps } from '@fluentui/react-components'; + +/** + * A helper component for storybook to auto generate an args table for createMotionComponent + */ +export const MotionComponent: React.FC = props => { + return
; +}; diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/index.stories.ts b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/index.stories.ts index 1eed397e33eb4b..fd65400fc6e550 100644 --- a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/index.stories.ts +++ b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/index.stories.ts @@ -1,5 +1,6 @@ import type { Meta } from '@storybook/react'; import CreatePresenceComponentDescription from './CreatePresenceComponentDescription.md'; +import { PresenceComponent } from './utils.stories'; export { CreatePresenceComponentDefault as Default } from './CreatePresenceComponentDefault.stories'; @@ -15,6 +16,7 @@ export { PresenceMotionFunctionParams as functionParams } from './PresenceMotion export default { title: 'Motion/APIs/createPresenceComponent', + component: PresenceComponent, parameters: { docs: { description: { diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/utils.stories.tsx b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/utils.stories.tsx new file mode 100644 index 00000000000000..7b393389b12c79 --- /dev/null +++ b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/utils.stories.tsx @@ -0,0 +1,9 @@ +import * as React from 'react'; +import type { PresenceComponentProps } from '@fluentui/react-components'; + +/** + * A helper component for storybook to auto generate an args table for createPresenceComponent + */ +export const PresenceComponent: React.FC = props => { + return
; +}; diff --git a/packages/react-components/react-motion/stories/src/PresenceGroup/index.stories.ts b/packages/react-components/react-motion/stories/src/PresenceGroup/index.stories.ts index ac4894f5b70478..184c519dd0eee1 100644 --- a/packages/react-components/react-motion/stories/src/PresenceGroup/index.stories.ts +++ b/packages/react-components/react-motion/stories/src/PresenceGroup/index.stories.ts @@ -10,6 +10,7 @@ export default { description: { component: PresenceGroupDescription, }, + hideArgsTable: true, }, }, } satisfies Meta; From 04ac24b3c3ece6b25f9989fdb219755dd7feec7a Mon Sep 17 00:00:00 2001 From: viktorgenaev Date: Mon, 23 Sep 2024 16:53:45 +0200 Subject: [PATCH 07/15] docs: update links to motion slot page --- .../library/src/components/Dialog/Dialog.types.ts | 2 +- .../src/components/DialogSurface/DialogSurface.types.ts | 2 +- .../src/components/OverlayDrawer/OverlayDrawer.types.ts | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-components/react-dialog/library/src/components/Dialog/Dialog.types.ts b/packages/react-components/react-dialog/library/src/components/Dialog/Dialog.types.ts index 93f0e7f48645d4..69ac2d53180ca5 100644 --- a/packages/react-components/react-dialog/library/src/components/Dialog/Dialog.types.ts +++ b/packages/react-components/react-dialog/library/src/components/Dialog/Dialog.types.ts @@ -7,7 +7,7 @@ import type { DialogSurfaceElement } from '../DialogSurface/DialogSurface.types' export type DialogSlots = { /** - * For more information refer to the [Motion Components page](/?path=/docs/concepts-developer-motion-components--docs). + * For more information refer to the [Motion docs page](/?path=/docs/motion-motion-slot--docs). * */ surfaceMotion: Slot; diff --git a/packages/react-components/react-dialog/library/src/components/DialogSurface/DialogSurface.types.ts b/packages/react-components/react-dialog/library/src/components/DialogSurface/DialogSurface.types.ts index 71e8dd4194988b..882905c664bd4e 100644 --- a/packages/react-components/react-dialog/library/src/components/DialogSurface/DialogSurface.types.ts +++ b/packages/react-components/react-dialog/library/src/components/DialogSurface/DialogSurface.types.ts @@ -15,7 +15,7 @@ export type DialogSurfaceSlots = { backdrop?: Slot<'div'>; root: Slot<'div'>; /** - * For more information refer to the [Motion Components page](/?path=/docs/concepts-developer-motion-components--docs). + * For more information refer to the [Motion docs page](/?path=/docs/motion-motion-slot--docs). * */ backdropMotion: Slot; diff --git a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.types.ts b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.types.ts index e84c364904abb5..1ada74b7e6cc57 100644 --- a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.types.ts +++ b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.types.ts @@ -15,12 +15,12 @@ export type OverlayDrawerSlots = { */ root: Slot; /** - * For more information refer to the [Motion Components page](/?path=/docs/concepts-developer-motion-components--docs). + * For more information refer to the [Motion docs page](/?path=/docs/motion-motion-slot--docs). * */ backdropMotion?: Slot>; /** - * For more information refer to the [Motion Components page](/?path=/docs/concepts-developer-motion-components--docs). + * For more information refer to the [Motion docs page](/?path=/docs/motion-motion-slot--docs). * */ surfaceMotion?: Slot>; From 843df56c559fb904f0fa542e7cee0f08331af8c3 Mon Sep 17 00:00:00 2001 From: mainframev Date: Tue, 24 Sep 2024 14:22:34 +0200 Subject: [PATCH 08/15] fixup! docs(react-motion): add arg tables for createMotionComponent and createPresenceComponent --- .../CreateMotionComponent.stories.tsx | 4 ++-- .../stories/src/CreateMotionComponent/index.stories.ts | 4 ++-- .../stories/src/CreateMotionComponent/utils.stories.tsx | 9 --------- .../CreatePresenceComponent.stories.tsx | 3 ++- .../stories/src/CreatePresenceComponent/index.stories.ts | 4 ++-- .../src/CreatePresenceComponent/utils.stories.tsx | 9 --------- 6 files changed, 8 insertions(+), 25 deletions(-) delete mode 100644 packages/react-components/react-motion/stories/src/CreateMotionComponent/utils.stories.tsx delete mode 100644 packages/react-components/react-motion/stories/src/CreatePresenceComponent/utils.stories.tsx diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponent.stories.tsx b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponent.stories.tsx index 71fe3babea91b1..22bffe3199a9a7 100644 --- a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponent.stories.tsx +++ b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponent.stories.tsx @@ -1,4 +1,4 @@ -import { createMotionComponent, makeStyles, tokens } from '@fluentui/react-components'; +import { createMotionComponent, MotionComponentProps, makeStyles, tokens } from '@fluentui/react-components'; import * as React from 'react'; import description from './CreateMotionComponent.stories.md'; @@ -47,7 +47,7 @@ const DropIn = createMotionComponent({ iterations: Infinity, }); -export const CreateMotionComponent = () => { +export const CreateMotionComponent = (props: MotionComponentProps) => { const classes = useClasses(); return ( diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/index.stories.ts b/packages/react-components/react-motion/stories/src/CreateMotionComponent/index.stories.ts index a57f40519ffcb6..0790663b551ca8 100644 --- a/packages/react-components/react-motion/stories/src/CreateMotionComponent/index.stories.ts +++ b/packages/react-components/react-motion/stories/src/CreateMotionComponent/index.stories.ts @@ -1,6 +1,6 @@ import type { Meta } from '@storybook/react'; import CreateMotionComponentDescription from './CreateMotionComponentDescription.md'; -import { MotionComponent } from './utils.stories'; +import { CreateMotionComponent } from './CreateMotionComponent.stories'; export { CreateMotionComponentDefault as Default } from './CreateMotionComponentDefault.stories'; @@ -16,7 +16,7 @@ export { MotionFunctionParams as functionParams } from './MotionFunctionParams.s export default { title: 'Motion/APIs/createMotionComponent', - component: MotionComponent, + component: CreateMotionComponent, parameters: { docs: { description: { diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/utils.stories.tsx b/packages/react-components/react-motion/stories/src/CreateMotionComponent/utils.stories.tsx deleted file mode 100644 index fd9ae2318c2f42..00000000000000 --- a/packages/react-components/react-motion/stories/src/CreateMotionComponent/utils.stories.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import * as React from 'react'; -import type { MotionComponentProps } from '@fluentui/react-components'; - -/** - * A helper component for storybook to auto generate an args table for createMotionComponent - */ -export const MotionComponent: React.FC = props => { - return
; -}; diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponent.stories.tsx b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponent.stories.tsx index e723865a17cfa7..5b596c0d203927 100644 --- a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponent.stories.tsx +++ b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponent.stories.tsx @@ -3,6 +3,7 @@ import { Field, makeStyles, type MotionImperativeRef, + PresenceComponentProps, tokens, Switch, } from '@fluentui/react-components'; @@ -67,7 +68,7 @@ const DropIn = createPresenceComponent({ }, }); -export const CreatePresenceComponent = () => { +export const CreatePresenceComponent = (props: PresenceComponentProps) => { const classes = useClasses(); const motionRef = React.useRef(); diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/index.stories.ts b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/index.stories.ts index fd65400fc6e550..8b2c27e148a1f6 100644 --- a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/index.stories.ts +++ b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/index.stories.ts @@ -1,6 +1,6 @@ import type { Meta } from '@storybook/react'; import CreatePresenceComponentDescription from './CreatePresenceComponentDescription.md'; -import { PresenceComponent } from './utils.stories'; +import { CreatePresenceComponent } from './CreatePresenceComponent.stories'; export { CreatePresenceComponentDefault as Default } from './CreatePresenceComponentDefault.stories'; @@ -16,7 +16,7 @@ export { PresenceMotionFunctionParams as functionParams } from './PresenceMotion export default { title: 'Motion/APIs/createPresenceComponent', - component: PresenceComponent, + component: CreatePresenceComponent, parameters: { docs: { description: { diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/utils.stories.tsx b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/utils.stories.tsx deleted file mode 100644 index 7b393389b12c79..00000000000000 --- a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/utils.stories.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import * as React from 'react'; -import type { PresenceComponentProps } from '@fluentui/react-components'; - -/** - * A helper component for storybook to auto generate an args table for createPresenceComponent - */ -export const PresenceComponent: React.FC = props => { - return
; -}; From 7df912ea7cdc03e04c46d571d31f0d49c1822719 Mon Sep 17 00:00:00 2001 From: Victor Genaev Date: Fri, 27 Sep 2024 15:05:29 +0200 Subject: [PATCH 09/15] Update change/@fluentui-react-drawer-5d3bdcc4-6781-480e-9d49-f441ee95112e.json Co-authored-by: Martin Hochel --- ...entui-react-drawer-5d3bdcc4-6781-480e-9d49-f441ee95112e.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/change/@fluentui-react-drawer-5d3bdcc4-6781-480e-9d49-f441ee95112e.json b/change/@fluentui-react-drawer-5d3bdcc4-6781-480e-9d49-f441ee95112e.json index 3002e59409cb49..4f51f5bb71943d 100644 --- a/change/@fluentui-react-drawer-5d3bdcc4-6781-480e-9d49-f441ee95112e.json +++ b/change/@fluentui-react-drawer-5d3bdcc4-6781-480e-9d49-f441ee95112e.json @@ -1,6 +1,6 @@ { "type": "none", - "comment": "add link to motion docs page", + "comment": "docs: add link to motion docs page", "packageName": "@fluentui/react-drawer", "email": "viktorgenaev@microsoft.com", "dependentChangeType": "none" From 4cc993117f9e6377aeaecf4a78c4e7566ea359d3 Mon Sep 17 00:00:00 2001 From: Victor Genaev Date: Fri, 27 Sep 2024 15:05:37 +0200 Subject: [PATCH 10/15] Update change/@fluentui-react-dialog-8ba14dae-2316-4b9a-b2f6-eb0d73be7cf3.json Co-authored-by: Martin Hochel --- ...entui-react-dialog-8ba14dae-2316-4b9a-b2f6-eb0d73be7cf3.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/change/@fluentui-react-dialog-8ba14dae-2316-4b9a-b2f6-eb0d73be7cf3.json b/change/@fluentui-react-dialog-8ba14dae-2316-4b9a-b2f6-eb0d73be7cf3.json index 982274d0172a01..4ad2ad19a9bc47 100644 --- a/change/@fluentui-react-dialog-8ba14dae-2316-4b9a-b2f6-eb0d73be7cf3.json +++ b/change/@fluentui-react-dialog-8ba14dae-2316-4b9a-b2f6-eb0d73be7cf3.json @@ -1,6 +1,6 @@ { "type": "none", - "comment": "add link to motion docs page", + "comment": "docs: add link to motion docs page", "packageName": "@fluentui/react-dialog", "email": "viktorgenaev@microsoft.com", "dependentChangeType": "none" From 583a2b81def0d81054b39f2a9e144ea2d1762769 Mon Sep 17 00:00:00 2001 From: Victor Genaev Date: Fri, 27 Sep 2024 15:05:44 +0200 Subject: [PATCH 11/15] Update apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx Co-authored-by: Martin Hochel --- .../src/DocsComponents/FluentDocsPage.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx b/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx index afef90d23a9941..632b3722f5c2b6 100644 --- a/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx +++ b/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx @@ -141,7 +141,7 @@ export const FluentDocsPage = () => { const dir = primaryStoryContext.parameters?.dir ?? primaryStoryContext.globals?.[DIR_ID] ?? 'ltr'; const selectedTheme = themes.find(theme => theme.id === primaryStoryContext.globals![THEME_ID]); - const hideArgsTable = primaryStoryContext.parameters?.docs?.hideArgsTable ?? false; + const hideArgsTable = Boolean(primaryStoryContext.parameters?.docs?.hideArgsTable); const skipPrimaryStory = primaryStoryContext.parameters?.docs?.skipPrimaryStory ?? false; const videos = primaryStoryContext.parameters?.videos ?? null; From 1f3b44b2971669bfe52977fb0aeac2f34429eb50 Mon Sep 17 00:00:00 2001 From: Victor Genaev Date: Fri, 27 Sep 2024 15:05:53 +0200 Subject: [PATCH 12/15] Update apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx Co-authored-by: Martin Hochel --- .../src/DocsComponents/FluentDocsPage.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx b/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx index 632b3722f5c2b6..660fa344ff2913 100644 --- a/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx +++ b/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx @@ -142,7 +142,7 @@ export const FluentDocsPage = () => { const selectedTheme = themes.find(theme => theme.id === primaryStoryContext.globals![THEME_ID]); const hideArgsTable = Boolean(primaryStoryContext.parameters?.docs?.hideArgsTable); - const skipPrimaryStory = primaryStoryContext.parameters?.docs?.skipPrimaryStory ?? false; + const skipPrimaryStory = Boolean(primaryStoryContext.parameters?.docs?.skipPrimaryStory); const videos = primaryStoryContext.parameters?.videos ?? null; const styles = useStyles(); From 9a85269dd4b7f00801e02dab5ebf9c0bf799b809 Mon Sep 17 00:00:00 2001 From: mainframev Date: Fri, 27 Sep 2024 15:53:29 +0200 Subject: [PATCH 13/15] refactor(FluentDocsPage): abstract primay component and args table to separate components --- .../DocsComponents/FluentDocsPage.stories.tsx | 77 ++++++++++++------- 1 file changed, 48 insertions(+), 29 deletions(-) diff --git a/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx b/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx index 660fa344ff2913..7313f5f22f428d 100644 --- a/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx +++ b/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx @@ -10,6 +10,7 @@ import { Stories, type DocsContextProps, } from '@storybook/addon-docs'; +import type { PreparedStory, Renderer } from '@storybook/types'; import type { SBEnumType } from '@storybook/csf'; import { makeStyles, shorthands, tokens, Link, Text } from '@fluentui/react-components'; import { InfoFilled } from '@fluentui/react-icons'; @@ -18,6 +19,8 @@ import { DirSwitch } from './DirSwitch.stories'; import { ThemePicker } from './ThemePicker.stories'; import { Toc, nameToHash } from './Toc.stories'; +type PrimaryStory = PreparedStory; + const useStyles = makeStyles({ divider: { height: '1px', @@ -130,6 +133,49 @@ const getNativeElementsList = (elements: SBEnumType['value']): JSX.Element => { ); }; +const RenderArgsTable = ({ hideArgsTable, primaryStory }: { primaryStory: PrimaryStory; hideArgsTable: boolean }) => { + const styles = useStyles(); + return hideArgsTable ? null : ( + <> + + {primaryStory.argTypes.as && primaryStory.argTypes.as?.type?.name === 'enum' && ( +
+ +
+ + Native props are supported 🙌 + + + All HTML attributes native to the {getNativeElementsList(primaryStory.argTypes.as.type.value)}, including + all aria-* and data-* attributes, can be applied as native props on this + component. + +
+
+ )} + + ); +}; + +const RenderPrimaryStory = ({ + primaryStory, + skipPrimaryStory, +}: { + primaryStory: PrimaryStory; + skipPrimaryStory: boolean; +}) => { + const styles = useStyles(); + return skipPrimaryStory ? null : ( + <> +
+ + {primaryStory.name} + + + + ); +}; + export const FluentDocsPage = () => { const context = React.useContext(DocsContext); const stories = context.componentStories(); @@ -172,35 +218,8 @@ export const FluentDocsPage = () => { {videos && }
- {skipPrimaryStory ? null : ( - <> -
- - {primaryStory.name} - - - - )} - {hideArgsTable ? null : ( - <> - - {primaryStory.argTypes.as && primaryStory.argTypes.as?.type?.name === 'enum' && ( -
- -
- - Native props are supported 🙌 - - - All HTML attributes native to the {getNativeElementsList(primaryStory.argTypes.as.type.value)}, - including all aria-* and data-* attributes, can be applied as native - props on this component. - -
-
- )} - - )} + +
From cbdf82e13d18b88ce5b02a8bc1c3c0e4dedc4045 Mon Sep 17 00:00:00 2001 From: mainframev Date: Fri, 27 Sep 2024 16:13:30 +0200 Subject: [PATCH 14/15] fixup! docs: update links to motion slot page --- .../library/src/components/Dialog/Dialog.types.ts | 2 +- .../src/components/DialogSurface/DialogSurface.types.ts | 2 +- .../src/components/OverlayDrawer/OverlayDrawer.types.ts | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-components/react-dialog/library/src/components/Dialog/Dialog.types.ts b/packages/react-components/react-dialog/library/src/components/Dialog/Dialog.types.ts index 69ac2d53180ca5..503494ae64ac65 100644 --- a/packages/react-components/react-dialog/library/src/components/Dialog/Dialog.types.ts +++ b/packages/react-components/react-dialog/library/src/components/Dialog/Dialog.types.ts @@ -7,7 +7,7 @@ import type { DialogSurfaceElement } from '../DialogSurface/DialogSurface.types' export type DialogSlots = { /** - * For more information refer to the [Motion docs page](/?path=/docs/motion-motion-slot--docs). + * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs). * */ surfaceMotion: Slot; diff --git a/packages/react-components/react-dialog/library/src/components/DialogSurface/DialogSurface.types.ts b/packages/react-components/react-dialog/library/src/components/DialogSurface/DialogSurface.types.ts index 882905c664bd4e..691cf9d222c7df 100644 --- a/packages/react-components/react-dialog/library/src/components/DialogSurface/DialogSurface.types.ts +++ b/packages/react-components/react-dialog/library/src/components/DialogSurface/DialogSurface.types.ts @@ -15,7 +15,7 @@ export type DialogSurfaceSlots = { backdrop?: Slot<'div'>; root: Slot<'div'>; /** - * For more information refer to the [Motion docs page](/?path=/docs/motion-motion-slot--docs). + * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs). * */ backdropMotion: Slot; diff --git a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.types.ts b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.types.ts index 1ada74b7e6cc57..c40d6e979bef5b 100644 --- a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.types.ts +++ b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.types.ts @@ -15,12 +15,12 @@ export type OverlayDrawerSlots = { */ root: Slot; /** - * For more information refer to the [Motion docs page](/?path=/docs/motion-motion-slot--docs). + * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs). * */ backdropMotion?: Slot>; /** - * For more information refer to the [Motion docs page](/?path=/docs/motion-motion-slot--docs). + * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs). * */ surfaceMotion?: Slot>; From 052f30a9fcb40023530bc816e4625e79c64c1ab2 Mon Sep 17 00:00:00 2001 From: mainframev Date: Fri, 27 Sep 2024 18:01:57 +0200 Subject: [PATCH 15/15] docs(react-motion): inline descriptions for Motion Slot --- .../react-motion/stories/src/Motion/CustomMotion.stories.tsx | 4 ++-- .../stories/src/Motion/CustomMotionDescription.md | 2 -- .../react-motion/stories/src/Motion/DisableMotion.stories.tsx | 3 +-- .../stories/src/Motion/DisableMotionDescription.md | 1 - 4 files changed, 3 insertions(+), 7 deletions(-) delete mode 100644 packages/react-components/react-motion/stories/src/Motion/CustomMotionDescription.md delete mode 100644 packages/react-components/react-motion/stories/src/Motion/DisableMotionDescription.md diff --git a/packages/react-components/react-motion/stories/src/Motion/CustomMotion.stories.tsx b/packages/react-components/react-motion/stories/src/Motion/CustomMotion.stories.tsx index 6d32b2e225d6b0..624c097e228942 100644 --- a/packages/react-components/react-motion/stories/src/Motion/CustomMotion.stories.tsx +++ b/packages/react-components/react-motion/stories/src/Motion/CustomMotion.stories.tsx @@ -14,7 +14,6 @@ import { createPresenceComponent, motionTokens, } from '@fluentui/react-components'; -import story from './CustomMotionDescription.md'; const useStyles = makeStyles({ wrapper: { @@ -131,7 +130,8 @@ export const CustomMotion = () => { CustomMotion.parameters = { docs: { description: { - story, + story: `If you need to use a custom animation, you can use a render function inside a slot and +apply your custom animation built with [createPresenceComponent](https://react.fluentui.dev/?path=/docs/motion-apis-createpresencecomponent--docs").`, }, }, }; diff --git a/packages/react-components/react-motion/stories/src/Motion/CustomMotionDescription.md b/packages/react-components/react-motion/stories/src/Motion/CustomMotionDescription.md deleted file mode 100644 index 5886469d7b8e3c..00000000000000 --- a/packages/react-components/react-motion/stories/src/Motion/CustomMotionDescription.md +++ /dev/null @@ -1,2 +0,0 @@ -If you need to use a custom animation, you can use a render function inside a slot and -apply your custom animation built with [createPresenceComponent](https://react.fluentui.dev/?path=/docs/motion-apis-createpresencecomponent--docs"). diff --git a/packages/react-components/react-motion/stories/src/Motion/DisableMotion.stories.tsx b/packages/react-components/react-motion/stories/src/Motion/DisableMotion.stories.tsx index 409e2594873b19..6f1dcb145dbce5 100644 --- a/packages/react-components/react-motion/stories/src/Motion/DisableMotion.stories.tsx +++ b/packages/react-components/react-motion/stories/src/Motion/DisableMotion.stories.tsx @@ -10,7 +10,6 @@ import { DialogContent, Button, } from '@fluentui/react-components'; -import story from './DisableMotionDescription.md'; const useStyles = makeStyles({ wrapper: { @@ -64,6 +63,6 @@ export const DisableMotion = () => { DisableMotion.parameters = { docs: { - description: { story }, + description: { story: 'In order to disable motion you can pass `null` to appropriate slot.' }, }, }; diff --git a/packages/react-components/react-motion/stories/src/Motion/DisableMotionDescription.md b/packages/react-components/react-motion/stories/src/Motion/DisableMotionDescription.md deleted file mode 100644 index 232e913fc24745..00000000000000 --- a/packages/react-components/react-motion/stories/src/Motion/DisableMotionDescription.md +++ /dev/null @@ -1 +0,0 @@ -In order to disable motion you can pass `null` to appropriate slot.