fix: move styles declared in useDisableBodyScroll() to a separate file (

#31299)
microsoft · May 7, 2024 · 6533854 · 6533854
1 parent fded6b4
commit 6533854
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/change/@fluentui-react-dialog-acec3e3b-75d4-4068-824a-24264b219715.json b/change/@fluentui-react-dialog-acec3e3b-75d4-4068-824a-24264b219715.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: move styles declared in useDisableBodyScroll() to a separate file",
+  "packageName": "@fluentui/react-dialog",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-dialog/src/utils/useDisableBodyScroll.styles.ts b/packages/react-components/react-dialog/src/utils/useDisableBodyScroll.styles.ts
@@ -0,0 +1,7 @@
+import { makeResetStyles } from '@griffel/react';
+
+// this style must be applied to the html element to disable scrolling
+export const useHTMLNoScrollStyles = makeResetStyles({
+  overflowY: ['hidden', 'clip'],
+  scrollbarGutter: 'stable',
+});
diff --git a/packages/react-components/react-dialog/src/utils/useDisableBodyScroll.ts b/packages/react-components/react-dialog/src/utils/useDisableBodyScroll.ts
@@ -1,12 +1,7 @@
 import { useFluent_unstable } from '@fluentui/react-shared-contexts';
-import { makeResetStyles } from '@griffel/react';
 import { useCallback } from 'react';
 
-// this style must be applied to the html element to disable scrolling
-const useHTMLNoScrollStyles = makeResetStyles({
-  overflowY: ['hidden', 'clip'],
-  scrollbarGutter: 'stable',
-});
+import { useHTMLNoScrollStyles } from './useDisableBodyScroll.styles';
 
 /**
  * hook that disables body scrolling through `overflowY: hidden` CSS property