🐛Scrim: use own useHideBodyScroll instead of f-ui (#3619)

* 🐛Scrim: use own useHideBodyScroll instead of f-ui * scrim: replace Dialog story with Sidesheet
equinor · Sep 9, 2024 · 2550243 · 2550243
1 parent 14cfa3d
commit 2550243
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 44 deletions.
diff --git a/packages/eds-core-react/src/components/Scrim/Scrim.docs.mdx b/packages/eds-core-react/src/components/Scrim/Scrim.docs.mdx
@@ -52,6 +52,6 @@ const Demo = () => {
 }
 ```
 
-## Example: Scrim with Dialog
+## Example: Scrim with SideSheet
 
 <Canvas of={ComponentStories.Dismissable} />
diff --git a/packages/eds-core-react/src/components/Scrim/Scrim.stories.tsx b/packages/eds-core-react/src/components/Scrim/Scrim.stories.tsx
@@ -1,7 +1,6 @@
-import { Button, Scrim, ScrimProps, Dialog, Typography } from '../..'
+import { Button, Scrim, ScrimProps, SideSheet } from '../..'
 import { useState } from 'react'
 import { StoryFn, Meta } from '@storybook/react'
-import styled from 'styled-components'
 import { useArgs } from '@storybook/preview-api'
 import { Stack } from './../../../.storybook/components'
 import page from './Scrim.docs.mdx'
@@ -36,14 +35,6 @@ const meta: Meta<typeof Scrim> = {
 
 export default meta
 
-const Wrapper = styled.div`
-  display: grid;
-  column-gap: 16px;
-  grid-template-columns: repeat(2, auto);
-  justify-content: end;
-  justify-self: end;
-`
-
 export const Introduction: StoryFn<ScrimProps> = (args) => {
   const { open } = args
   const [, updateArgs] = useArgs()
@@ -66,39 +57,20 @@ export const Introduction: StoryFn<ScrimProps> = (args) => {
   )
 }
 
-//This story used to be imported from Dialog.stories.tsx, but there is currently an issue with importing stories from other places into mdx
-//see https://github.com/storybookjs/storybook/issues/22451
 export const Dismissable: StoryFn<ScrimProps> = () => {
   const [isOpen, setIsOpen] = useState(false)
-  const handleOpen = () => {
-    setIsOpen(true)
-  }
-  const handleClose = () => {
-    setIsOpen(false)
-  }
+
   return (
-    <>
-      <Button aria-haspopup="dialog" onClick={handleOpen}>
-        Trigger Dialog
-      </Button>
-      <Dialog open={isOpen} isDismissable onClose={handleClose}>
-        <Dialog.Header>
-          <Dialog.Title>Dismissable dialog</Dialog.Title>
-        </Dialog.Header>
-        <Dialog.CustomContent>
-          <Typography variant="body_short">
-            Closes dialog on click outside and escape key.
-          </Typography>
-        </Dialog.CustomContent>
-        <Dialog.Actions>
-          <Wrapper>
-            <Button onClick={handleClose}>OK</Button>
-            <Button variant="ghost" onClick={handleClose}>
-              Cancel
-            </Button>
-          </Wrapper>
-        </Dialog.Actions>
-      </Dialog>
-    </>
+    <div style={{ minHeight: '30vh' }}>
+      <Button onClick={() => setIsOpen(true)}>Open SideSheet</Button>
+      <Scrim open={isOpen} onClose={() => setIsOpen(false)} isDismissable>
+        <SideSheet open={isOpen} onClose={() => setIsOpen(false)}>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora,
+          esse labore. Asperiores tempore ex amet veniam consequatur dolorum
+          perferendis, nihil non, culpa, modi sed nisi. Repellat, labore? Error,
+          accusantium sed?
+        </SideSheet>
+      </Scrim>
+    </div>
   )
 }
diff --git a/packages/eds-core-react/src/components/Scrim/Scrim.tsx b/packages/eds-core-react/src/components/Scrim/Scrim.tsx
@@ -1,7 +1,11 @@
 import { forwardRef, MouseEvent, HTMLAttributes, useRef, useMemo } from 'react'
 import styled from 'styled-components'
 import { scrim as tokens } from './Scrim.tokens'
-import { useGlobalKeyPress, mergeRefs } from '@equinor/eds-utils'
+import {
+  useGlobalKeyPress,
+  mergeRefs,
+  useHideBodyScroll,
+} from '@equinor/eds-utils'
 import { FloatingOverlay } from '@floating-ui/react'
 
 const { background } = tokens
@@ -34,6 +38,7 @@ export const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(
   ref,
 ) {
   const scrimRef = useRef<HTMLDivElement>(null)
+  useHideBodyScroll(open)
 
   const combinedScrimRef = useMemo(
     () => mergeRefs<HTMLDivElement>(scrimRef, ref),
@@ -60,7 +65,6 @@ export const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(
 
   return (
     <StyledScrim
-      lockScroll
       onMouseDown={handleMouseClose}
       ref={combinedScrimRef}
       {...rest}