From 8b38870ad25a88c3681def1ac93124b0e657e753 Mon Sep 17 00:00:00 2001 From: Bernardo Sunderhus Date: Wed, 29 Mar 2023 15:46:14 +0000 Subject: [PATCH 1/2] fix(react-dialog): DialogContent scrollbar always visible --- ...-react-dialog-19f431ea-3879-40f6-bf2a-177d37d60310.json | 7 +++++++ .../src/components/DialogContent/useDialogContentStyles.ts | 1 - 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 change/@fluentui-react-dialog-19f431ea-3879-40f6-bf2a-177d37d60310.json diff --git a/change/@fluentui-react-dialog-19f431ea-3879-40f6-bf2a-177d37d60310.json b/change/@fluentui-react-dialog-19f431ea-3879-40f6-bf2a-177d37d60310.json new file mode 100644 index 00000000000000..00d000fe07b8af --- /dev/null +++ b/change/@fluentui-react-dialog-19f431ea-3879-40f6-bf2a-177d37d60310.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: DialogContent scrollbar always visible", + "packageName": "@fluentui/react-dialog", + "email": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-dialog/src/components/DialogContent/useDialogContentStyles.ts b/packages/react-components/react-dialog/src/components/DialogContent/useDialogContentStyles.ts index b03b2c308fa1b6..2ba8ecfbf1ad81 100644 --- a/packages/react-components/react-dialog/src/components/DialogContent/useDialogContentStyles.ts +++ b/packages/react-components/react-dialog/src/components/DialogContent/useDialogContentStyles.ts @@ -14,7 +14,6 @@ export const dialogContentClassNames: SlotClassNames = { const useStyles = makeStyles({ root: { width: '100%', - height: '100%', overflowY: 'auto', minHeight: '32px', boxSizing: 'border-box', From bded5d085f104f4cd392bc7adacc111960a49841 Mon Sep 17 00:00:00 2001 From: Bernardo Sunderhus Date: Thu, 30 Mar 2023 08:44:24 +0000 Subject: [PATCH 2/2] chore: removes unnecessary width and height from body, content and surface --- .../src/components/DialogBody/useDialogBodyStyles.ts | 2 -- .../src/components/DialogContent/useDialogContentStyles.ts | 1 - .../src/components/DialogSurface/useDialogSurfaceStyles.ts | 1 - 3 files changed, 4 deletions(-) diff --git a/packages/react-components/react-dialog/src/components/DialogBody/useDialogBodyStyles.ts b/packages/react-components/react-dialog/src/components/DialogBody/useDialogBodyStyles.ts index 50698874498e9b..519ca92ddcedc8 100644 --- a/packages/react-components/react-dialog/src/components/DialogBody/useDialogBodyStyles.ts +++ b/packages/react-components/react-dialog/src/components/DialogBody/useDialogBodyStyles.ts @@ -25,8 +25,6 @@ const useStyles = makeStyles({ '&::backdrop': { backgroundColor: 'rgba(0, 0, 0, 0.4)', }, - width: `100%`, - height: 'fit-content', maxHeight: `calc(100vh - 2 * ${SURFACE_PADDING})`, boxSizing: 'border-box', gridTemplateRows: 'auto 1fr auto', diff --git a/packages/react-components/react-dialog/src/components/DialogContent/useDialogContentStyles.ts b/packages/react-components/react-dialog/src/components/DialogContent/useDialogContentStyles.ts index 2ba8ecfbf1ad81..9c6c7baf41665e 100644 --- a/packages/react-components/react-dialog/src/components/DialogContent/useDialogContentStyles.ts +++ b/packages/react-components/react-dialog/src/components/DialogContent/useDialogContentStyles.ts @@ -13,7 +13,6 @@ export const dialogContentClassNames: SlotClassNames = { */ const useStyles = makeStyles({ root: { - width: '100%', overflowY: 'auto', minHeight: '32px', boxSizing: 'border-box', diff --git a/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.ts b/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.ts index cadc4cafa579df..90c97977b91864 100644 --- a/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.ts +++ b/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.ts @@ -34,7 +34,6 @@ const useStyles = makeStyles({ backgroundColor: 'rgba(0, 0, 0, 0.4)', }, position: 'fixed', - width: '100%', height: 'fit-content', maxWidth: '600px', maxHeight: '100vh',