fix(Drawer): ensure ScrollView is used for scrollable content

packages/dnb-design-system-portal/src/docs/uilib/components/drawer/demos.md

@@ -7,7 +7,7 @@ SimpleDrawerExample,
 FullDrawerExample,
 DrawerCallbackExample,
 DrawerCustomTriggerExample,
-DrawerNoAnimationNoSpacing
+DrawerNoAnimationNoSpacing,
 } from 'Docs/uilib/components/drawer/Examples'
 
 ## Demos

packages/dnb-design-system-portal/src/docs/uilib/components/drawer/visual-tests/Examples.tsx

@@ -0,0 +1,68 @@
+/**
+ * UI lib Component Example
+ *
+ */
+
+import React from 'react'
+import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox'
+
+export const DrawerScrollViewSetup = () => (
+  <ComponentBox useRender data-visual-test="drawer-scroll-view">
+    {
+      /* jsx */ `
+const DrawerMock = () => {
+  const scrollRef = React.useRef()
+  const innerRef = React.useRef()
+  const [errorMessage, setErrorMessage] = React.useState(null)
+
+  const message = errorMessage
+    ? errorMessage
+    : 'Yes, the "dnb-scroll-view" is used!'
+
+  return (
+    <Drawer
+      contentRef={innerRef}
+      scrollRef={scrollRef}
+      onOpen={() => {
+        const innerOverflowY = window.getComputedStyle(
+          innerRef.current
+        ).overflowY
+
+        const contentElem = scrollRef.current.querySelector(
+          '.dnb-drawer__content'
+        )
+        const contentOverflowY =
+          window.getComputedStyle(contentElem)?.overflowY
+
+        const scxrollOverflowY = window.getComputedStyle(
+          scrollRef.current
+        ).overflowY
+
+        if (contentOverflowY !== 'visible') {
+          setErrorMessage(
+            '.dnb-drawer__content was "'+contentOverflowY+'" and not "visible"'
+          )
+        } else if (innerOverflowY !== 'visible') {
+          setErrorMessage(
+            '.dnb-drawer__inner was "'+innerOverflowY+'" and not "visible"'
+          )
+        } else if (scxrollOverflowY !== 'auto') {
+          setErrorMessage('.dnb-scroll-view was not "auto"')
+        }
+      }}
+    >
+      <Drawer.Body>
+        <div style={{ height: '100rem' }}>
+          <div className="drawer-scroll-view">
+            <P size="x-large">{message}</P>
+          </div>
+        </div>
+      </Drawer.Body>
+    </Drawer>
+  )
+}
+render(<DrawerMock />)
+`
+    }
+  </ComponentBox>
+)

packages/dnb-design-system-portal/src/docs/uilib/components/drawer/visual-tests/hidden-tests.md

@@ -0,0 +1,9 @@
+---
+draft: true
+---
+
+import {
+DrawerScrollViewSetup,
+} from 'Docs/uilib/components/drawer/visual-tests/Examples'
+
+<DrawerScrollViewSetup />

packages/dnb-design-system-portal/src/docs/uilib/components/modal/visual-tests/Examples.js

@@ -6,123 +6,6 @@
 import React from 'react'
 import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox'
 
-export const ModalExampleDrawerHeader = () => (
-  <ComponentBox data-visual-test="modal-drawer-header">
-    {
-      /* jsx */ `
-<Modal
-  mode="drawer"
-  trigger_text="Open Drawer"
->
-  <Modal.Bar>
-    <Breadcrumb />
-  </Modal.Bar>
-  <Modal.Header>
-    <H1 size="x-large" bottom>
-      Title
-    </H1>
-    <P bottom>This is a lorem ipsum dolor</P>
-    <Button bottom size="large" right>
-      Lorem ipsum
-    </Button>
-    <Button bottom size="large" variant="secondary">
-      Dolor sit
-    </Button>
-    <FormStatus state="info">This is a lorem ipsum dolor</FormStatus>
-    <Tabs
-      id="unique-linked-id"
-      data={[
-        {
-          title: 'One',
-          key: 'one',
-        },
-        {
-          title: 'Two',
-          key: 'two',
-        },
-      ]}
-    />
-  </Modal.Header>
-  <Modal.Content>
-    <Tabs.Content id="unique-linked-id">
-      {({ title }) => {
-        return (
-          <H2>{title}</H2>
-        )
-      }}
-    </Tabs.Content>
-    <P top>
-      Elementum eu suspendisse sit platea elit porttitor
-      magna laoreet ad ultrices tempus urna curae parturient
-      conubia quisque viverra eget vestibulum neque pulvinar
-      semper vulputate id dis varius pellentesque nunc
-      egestas risus amet mus aptent luctus imperdiet netus
-      natoque cubilia mattis nostra proin ornare scelerisque
-      sodales faucibus placerat sem bibendum pretium rutrum
-      vitae sociis ligula inceptos morbi quam mi sed pharetra
-      fermentum tortor ullamcorper ipsum tellus eros euismod
-      volutpat nisl dui lectus fames suscipit phasellus
-      praesent justo mollis montes velit taciti gravida lacus
-      commodo senectus feugiat lorem etiam consequat
-      penatibus cum hendrerit accumsan orci potenti purus
-      nulla interdum metus sollicitudin magnis libero sapien
-      habitant non class ridiculus consectetur congue nec
-      litora sociosqu aliquet felis in rhoncus nascetur odio
-      ultricies nullam a iaculis massa nisi ante nam cras
-      aenean erat facilisi vivamus ut cursus auctor arcu
-      lobortis himenaeos dictum habitasse tristique mauris at
-      blandit sagittis nibh dignissim condimentum per integer
-      duis lacinia malesuada est adipiscing maecenas donec
-      eleifend turpis dictumst dapibus tempor fusce aliquam
-      torquent hac ac curabitur venenatis et tincidunt augue
-      porta vehicula enim facilisis posuere primis molestie
-      convallis diam vel fringilla dolor leo quis diam cursus
-      massa sapien tristique cum senectus sed tortor natoque
-      amet hendrerit ut fusce ipsum quis
-    </P>
-  </Modal.Content>
-</Modal>
-	`
-    }
-  </ComponentBox>
-)
-
-export const ModalExampleDrawerBasic = () => (
-  <ComponentBox data-visual-test="modal-drawer-basic">
-    {
-      /* jsx */ `
-<Modal
-  mode="drawer"
-  title="Drawer Title"
-  trigger_text="Open Drawer"
->
-  <Modal.Content>
-    <P top>This is a left aligned Drawer content.</P>
-  </Modal.Content>
-</Modal>
-	`
-    }
-  </ComponentBox>
-)
-export const DrawerWithoutSpacing = () => (
-  <ComponentBox data-visual-test="drawer-no-spacing">
-    {
-      /* jsx */ `
-<Modal
-  mode="drawer"
-  title="Drawer without spacing"
-  trigger_text="Open Drawer with no spacing"
-  spacing={false}
->
-  <Modal.Content>
-    <P top>This is a left aligned Drawer content.</P>
-  </Modal.Content>
-</Modal>
-  `
-    }
-  </ComponentBox>
-)
-
 export const ModalExampleDefault = () => (
   <ComponentBox data-visual-test="modal-trigger-default">
     {
@@ -173,18 +56,3 @@ export const ModalExampleFullscreen = () => (
     }
   </ComponentBox>
 )
-
-export const DrawerExamplePlacementLeft = () => (
-  <ComponentBox data-visual-test="modal-drawer-leftsided">
-    {
-      /* jsx */ `
-<Modal
-  mode="drawer"
-  title="Modal title"
-  container_placement="left"
-  modal_content="This is the modal text. Triggered by a tertiary button."
-/>
-	`
-    }
-  </ComponentBox>
-)

packages/dnb-design-system-portal/src/docs/uilib/components/modal/visual-tests/hidden-tests.md

@@ -3,43 +3,13 @@ draft: true
 ---
 
 import {
-ModalExampleDrawerHeader,
-ModalExampleDrawerBasic,
-DrawerWithoutSpacing,
 ModalExampleDefault,
 ModalExampleHelpButton,
 ModalExampleFullscreen,
-DrawerExamplePlacementLeft,
 } from 'Docs/uilib/components/modal/visual-tests/Examples'
 
-## Demos
-
-### Basic drawer
-
-<ModalExampleDrawerBasic />
-
-### Drawer with navigation
-
-<ModalExampleDrawerHeader />
-
-### Drawer without spacing
-
-<DrawerWithoutSpacing />
-
-## Drawer with container placement left
-
-<DrawerExamplePlacementLeft />
-
-### Triggered by the help button
-
 <ModalExampleDefault />
 
-### Help button and suffix
-
-Most of the components do have a `suffix` property you can make use of.
-
 <ModalExampleHelpButton />
 
-### Fullscreen Modal, triggered by a tertiary button
-
 <ModalExampleFullscreen />

packages/dnb-eufemia/src/components/dialog/__tests__/Dialog.test.tsx

@@ -11,6 +11,7 @@ import {
   attachToBody,
 } from '../../../core/jest/jestSetup'
 import * as helpers from '../../../shared/helpers'
+import { render } from '@testing-library/react'
 
 const props = fakeProps(require.resolve('../Dialog.tsx'), {
   all: true,
@@ -93,6 +94,29 @@ describe('Dialog', () => {
     expect(on_close).toHaveBeenCalledTimes(1)
   })
 
+  it('will accept custom refs', () => {
+    const contentRef = React.createRef<HTMLElement>()
+    const scrollRef = React.createRef<HTMLElement>()
+
+    const MockComponent = () => {
+      return (
+        <Dialog
+          openState
+          noAnimation
+          contentRef={contentRef}
+          scrollRef={scrollRef}
+        >
+          content
+        </Dialog>
+      )
+    }
+
+    render(<MockComponent />)
+
+    expect(contentRef.current).toBeTruthy()
+    expect(scrollRef.current).toBeTruthy()
+  })
+
   it('will use props from global context', () => {
     const contextTitle = 'Custom title'
     const Comp = mount(

packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap

@@ -1354,7 +1354,8 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
 `;
 
 exports[`Dialog scss have to match snapshot 1`] = `
-"/*
+"@charset \\"UTF-8\\";
+/*
 * DNB Drawer
 *
 */
@@ -2153,11 +2154,15 @@ button.dnb-button::-moz-focus-inner {
     display: flex;
     flex-direction: column;
     z-index: 10;
-    /** Sets the color on scroll overflow (at the bottom) */
-    background-color: var(--modal-background-color, transparent);
+    /** 
+      NB: Do not use \\"overflow-x: hidden;\\" in here,
+      (overflowing one direction, will influence the other – we can't just have one at a time) 
+      To make the Drawer scroll, we use .dnb-scroll-view
+    */
     width: 100%;
     height: 100%;
-    overflow-x: hidden; }
+    /** Sets the color on scroll overflow (at the bottom) */
+    background-color: var(--modal-background-color, transparent); }
   .dnb-drawer--spacing .dnb-drawer__inner {
     padding: 0 var(--drawer-spacing) 0; }
     @media screen and (min-width: 72em) {
@@ -2264,8 +2269,8 @@ button.dnb-button::-moz-focus-inner {
     position: sticky;
     top: 0;
     z-index: 99;
-    margin: var(--drawer-spacing) calc(var(--drawer-spacing) * -1);
-    padding: 0 var(--drawer-spacing); }
+    margin: var(--drawer-spacing) calc(var(--drawer-spacing) * -1 * 1.75);
+    padding: 0 calc(var(--drawer-spacing) * 1.5); }
   .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section.dnb-drawer__navigation--sticky {
     z-index: 2999; }
   .dnb-drawer .dnb-drawer__navigation--sticky::before {

packages/dnb-eufemia/src/components/drawer/Drawer.tsx

@@ -49,6 +49,8 @@ function Drawer({
   triggerAttributes,
   overlayClass,
   contentClass,
+  contentRef,
+  scrollRef,
 
   top,
   bottom,
@@ -92,6 +94,8 @@ function Drawer({
     trigger,
     triggerAttributes,
     overlayClass,
+    contentRef,
+    scrollRef,
     top,
     bottom,
     left,

packages/dnb-eufemia/src/components/drawer/__tests__/Drawer.screenshot.test.js

@@ -115,3 +115,22 @@ describe('Drawer no animation/spacing screenshot', () => {
     expect(screenshot).toMatchImageSnapshot()
   })
 })
+
+describe('Drawer screenshot', () => {
+  setupPageScreenshot({
+    url: '/uilib/components/drawer/visual-tests/hidden-tests',
+    pageViewport,
+  })
+
+  it('have to match correct scroll view setup', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-visual-test="drawer-scroll-view"]',
+      simulate: 'click',
+      simulateSelector:
+        '[data-visual-test="drawer-scroll-view"] button:first-of-type',
+      screenshotSelector: '.drawer-scroll-view',
+      rootClassName: 'hide-page-content',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+})