From d406f5b74090a5de3a221c0935ce28bfead61807 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Wed, 11 Sep 2024 12:41:44 +0200 Subject: [PATCH 1/4] fix(react-drawer): apply position: absolute when mountNode is passed --- ...-6eaa1e97-38f8-4d08-8748-8eecd859a585.json | 7 ++ .../library/etc/react-drawer.api.md | 2 +- .../OverlayDrawer/OverlayDrawer.types.ts | 4 +- .../OverlayDrawer/useOverlayDrawer.tsx | 3 +- .../useOverlayDrawerStyles.styles.ts | 11 ++- .../Drawer/OverlayInsideContainer.stories.tsx | 79 +++++++++++++++++++ .../stories/src/Drawer/index.stories.tsx | 1 + 7 files changed, 103 insertions(+), 4 deletions(-) create mode 100644 change/@fluentui-react-drawer-6eaa1e97-38f8-4d08-8748-8eecd859a585.json create mode 100644 packages/react-components/react-drawer/stories/src/Drawer/OverlayInsideContainer.stories.tsx diff --git a/change/@fluentui-react-drawer-6eaa1e97-38f8-4d08-8748-8eecd859a585.json b/change/@fluentui-react-drawer-6eaa1e97-38f8-4d08-8748-8eecd859a585.json new file mode 100644 index 0000000000000..d448b258eac1f --- /dev/null +++ b/change/@fluentui-react-drawer-6eaa1e97-38f8-4d08-8748-8eecd859a585.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: apply position: absolute when mountNode is passed", + "packageName": "@fluentui/react-drawer", + "email": "marcosvmmoura@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-drawer/library/etc/react-drawer.api.md b/packages/react-components/react-drawer/library/etc/react-drawer.api.md index f7c01bc44050d..261a3308c320a 100644 --- a/packages/react-components/react-drawer/library/etc/react-drawer.api.md +++ b/packages/react-components/react-drawer/library/etc/react-drawer.api.md @@ -170,7 +170,7 @@ export type OverlayDrawerSlots = { }; // @public -export type OverlayDrawerState = ComponentState & Required; +export type OverlayDrawerState = ComponentState & Required & Pick; // @public export const renderDrawer_unstable: (state: DrawerState, contextValue: DrawerContextValue) => JSX.Element; 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 23fad795bdb83..f774ca01cf20c 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 @@ -45,4 +45,6 @@ export type OverlayDrawerProps = ComponentProps & /** * State used in rendering OverlayDrawer */ -export type OverlayDrawerState = ComponentState & Required; +export type OverlayDrawerState = ComponentState & + Required & + Pick; diff --git a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/useOverlayDrawer.tsx b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/useOverlayDrawer.tsx index c236ab6de61bf..29e07857a9b6c 100644 --- a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/useOverlayDrawer.tsx +++ b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/useOverlayDrawer.tsx @@ -29,7 +29,7 @@ export const useOverlayDrawer_unstable = ( ref: React.Ref, ): OverlayDrawerState => { const { open, size, position } = useDrawerDefaultProps(props); - const { backdropMotion, modalType = 'modal', inertTrapFocus, onOpenChange, surfaceMotion } = props; + const { backdropMotion, modalType = 'modal', inertTrapFocus, onOpenChange, surfaceMotion, mountNode } = props; const backdropProps = slot.resolveShorthand(props.backdrop); const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null; @@ -80,6 +80,7 @@ export const useOverlayDrawer_unstable = ( open, size, position, + mountNode, motion: STATIC_MOTION, }; }; diff --git a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts index aab5aeb4aeb8a..5632d12822920 100644 --- a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts +++ b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts @@ -32,6 +32,9 @@ const useDrawerRootStyles = makeStyles({ height: `var(${drawerCSSVars.drawerSizeVar})`, width: '100vw', }, + absolute: { + position: 'absolute', + }, }); /** @@ -44,6 +47,7 @@ export const useOverlayDrawerStyles_unstable = (state: OverlayDrawerState): Over const resetStyles = useDrawerResetStyles(); const rootStyles = useDrawerRootStyles(); + const isRenderingInsideContainer = !!state.mountNode; const backdrop = state.root.backdrop as React.HTMLAttributes | undefined; state.root.className = mergeClasses( @@ -51,11 +55,16 @@ export const useOverlayDrawerStyles_unstable = (state: OverlayDrawerState): Over baseClassNames, resetStyles, rootStyles[state.position], + isRenderingInsideContainer && rootStyles.absolute, state.root.className, ); if (backdrop) { - backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, backdrop.className); + backdrop.className = mergeClasses( + overlayDrawerClassNames.backdrop, + isRenderingInsideContainer && rootStyles.absolute, + backdrop.className, + ); } return state; diff --git a/packages/react-components/react-drawer/stories/src/Drawer/OverlayInsideContainer.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/OverlayInsideContainer.stories.tsx new file mode 100644 index 0000000000000..bc8275768d493 --- /dev/null +++ b/packages/react-components/react-drawer/stories/src/Drawer/OverlayInsideContainer.stories.tsx @@ -0,0 +1,79 @@ +import * as React from 'react'; +import { + DrawerBody, + DrawerHeader, + DrawerHeaderTitle, + OverlayDrawer, + Button, + makeStyles, + tokens, +} from '@fluentui/react-components'; +import { Dismiss24Regular } from '@fluentui/react-icons'; + +const useStyles = makeStyles({ + root: { + display: 'flex', + alignItems: 'flex-start', + gap: tokens.spacingHorizontalL, + }, + + container: { + width: '500px', + height: '300px', + padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalL}`, + position: 'relative', + overflow: 'hidden', + border: `${tokens.strokeWidthThicker} solid ${tokens.colorNeutralStroke1}`, + backgroundColor: tokens.colorBrandBackground2, + }, +}); + +export const OverlayInsideContainer = () => { + const [isOpen, setIsOpen] = React.useState(false); + const ref = React.useRef(null); + const styles = useStyles(); + + return ( +
+
+ setIsOpen(open)}> + + } + onClick={() => setIsOpen(false)} + /> + } + > + Overlay Drawer + + + + +

Drawer content

+ + + +

Drawer will be rendered within this container

+
+ + +
+ ); +}; + +OverlayInsideContainer.parameters = { + docs: { + description: { + story: [ + 'An overlay drawer can be rendered within a container by setting the `mountNode` prop to the container element.', + 'This is useful when the drawer needs to be rendered within a specific container and not at the root level.', + ].join('\n'), + }, + }, +}; diff --git a/packages/react-components/react-drawer/stories/src/Drawer/index.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/index.stories.tsx index 4933e61c6d800..b6465bf38347d 100644 --- a/packages/react-components/react-drawer/stories/src/Drawer/index.stories.tsx +++ b/packages/react-components/react-drawer/stories/src/Drawer/index.stories.tsx @@ -13,6 +13,7 @@ import bestPracticesMd from './DrawerBestPractices.md'; export { Default } from './DrawerDefault.stories'; export { Overlay } from './OverlayDrawer.stories'; export { OverlayNoModal } from './OverlayDrawerNoModal.stories'; +export { OverlayInsideContainer } from './OverlayInsideContainer.stories'; export { Inline } from './InlineDrawer.stories'; export { Position } from './DrawerPosition.stories'; export { Size } from './DrawerSize.stories'; From 1629b493386876f1b0ecb8c6af96c3d0490c5ab5 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Wed, 11 Sep 2024 14:36:39 +0200 Subject: [PATCH 2/4] Update packages/react-components/react-drawer/stories/src/Drawer/OverlayInsideContainer.stories.tsx Co-authored-by: Victor Genaev --- .../stories/src/Drawer/OverlayInsideContainer.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-drawer/stories/src/Drawer/OverlayInsideContainer.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/OverlayInsideContainer.stories.tsx index bc8275768d493..4ef786532c3c8 100644 --- a/packages/react-components/react-drawer/stories/src/Drawer/OverlayInsideContainer.stories.tsx +++ b/packages/react-components/react-drawer/stories/src/Drawer/OverlayInsideContainer.stories.tsx @@ -71,8 +71,8 @@ OverlayInsideContainer.parameters = { docs: { description: { story: [ - 'An overlay drawer can be rendered within a container by setting the `mountNode` prop to the container element.', - 'This is useful when the drawer needs to be rendered within a specific container and not at the root level.', + 'The overlay Drawer can be rendered inside a specific container by setting the mountNode prop to the desired container element.', + 'This approach is useful when you need the Drawer to appear within a particular section of the DOM, rather than being attached to the root element.', ].join('\n'), }, }, From 4026fe3a54249bdbc7fa62507e26d0fac37d3ee4 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Wed, 11 Sep 2024 14:37:01 +0200 Subject: [PATCH 3/4] fix: improve code readability --- .../OverlayDrawer/useOverlayDrawerStyles.styles.ts | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts index 5632d12822920..4eff0a94554c0 100644 --- a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts +++ b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts @@ -47,7 +47,7 @@ export const useOverlayDrawerStyles_unstable = (state: OverlayDrawerState): Over const resetStyles = useDrawerResetStyles(); const rootStyles = useDrawerRootStyles(); - const isRenderingInsideContainer = !!state.mountNode; + const absoluteStyles = !!state.mountNode && rootStyles.absolute; const backdrop = state.root.backdrop as React.HTMLAttributes | undefined; state.root.className = mergeClasses( @@ -55,16 +55,12 @@ export const useOverlayDrawerStyles_unstable = (state: OverlayDrawerState): Over baseClassNames, resetStyles, rootStyles[state.position], - isRenderingInsideContainer && rootStyles.absolute, + absoluteStyles, state.root.className, ); if (backdrop) { - backdrop.className = mergeClasses( - overlayDrawerClassNames.backdrop, - isRenderingInsideContainer && rootStyles.absolute, - backdrop.className, - ); + backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, absoluteStyles, backdrop.className); } return state; From 0dbdfa4c5271067e4a0e88b465722fef5dc67ba6 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Wed, 11 Sep 2024 14:37:50 +0200 Subject: [PATCH 4/4] fix: improve code readability --- .../stories/src/Drawer/OverlayInsideContainer.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-drawer/stories/src/Drawer/OverlayInsideContainer.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/OverlayInsideContainer.stories.tsx index 4ef786532c3c8..3e5c669f6cfe2 100644 --- a/packages/react-components/react-drawer/stories/src/Drawer/OverlayInsideContainer.stories.tsx +++ b/packages/react-components/react-drawer/stories/src/Drawer/OverlayInsideContainer.stories.tsx @@ -71,7 +71,7 @@ OverlayInsideContainer.parameters = { docs: { description: { story: [ - 'The overlay Drawer can be rendered inside a specific container by setting the mountNode prop to the desired container element.', + 'The overlay Drawer can be rendered inside a specific container by setting the `mountNode` prop to the desired container element.', 'This approach is useful when you need the Drawer to appear within a particular section of the DOM, rather than being attached to the root element.', ].join('\n'), },