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

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-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()
+  })
+})

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

@@ -11,6 +11,7 @@ import {
   axeComponent,
   attachToBody,
 } from '../../../core/jest/jestSetup'
+import { render } from '@testing-library/react'
 
 const props = fakeProps(require.resolve('../Drawer.tsx'), {
   all: true,
@@ -283,6 +284,29 @@ describe('Drawer', () => {
     ).toBe(false)
   })
 
+  it('will accept custom refs', () => {
+    const contentRef = React.createRef<HTMLElement>()
+    const scrollRef = React.createRef<HTMLElement>()
+
+    const MockComponent = () => {
+      return (
+        <Drawer
+          openState
+          noAnimation
+          contentRef={contentRef}
+          scrollRef={scrollRef}
+        >
+          content
+        </Drawer>
+      )
+    }
+
+    render(<MockComponent />)
+
+    expect(contentRef.current).toBeTruthy()
+    expect(scrollRef.current).toBeTruthy()
+  })
+
   it('can contain drawer parts', () => {
     const Comp = mount(
       <Drawer noAnimation directDomReturn={false}>

packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap

@@ -1369,7 +1369,8 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
 `;
 
 exports[`Drawer scss have to match snapshot 1`] = `
-"/*
+"@charset \\"UTF-8\\";
+/*
 * DNB Drawer
 *
 */
@@ -2168,11 +2169,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) {
@@ -2279,8 +2284,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/style/_drawer.scss

@@ -28,7 +28,6 @@
   }
 
   @include defaultDropShadow();
-  //border-radius: 0.5rem;
   user-select: text;
   -webkit-user-select: text; // Safari / Touch fix
   border: none;
@@ -46,12 +45,17 @@
     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);
   }
 
   &--spacing &__inner {
@@ -218,8 +222,8 @@
     z-index: 99; // below #dropdown and #date-picker
 
     // on large screens
-    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);
   }
   &--spacing &__navigation.dnb-section#{&}__navigation--sticky {
     z-index: 2999; // above #dropdown and #date-picker and below #modal

packages/dnb-eufemia/src/components/modal/__tests__/Modal.screenshot.test.js

@@ -63,26 +63,6 @@ describe('Modal screenshot', () => {
   })
 })
 
-describe('Drawer screenshot', () => {
-  setupPageScreenshot({
-    url: '/uilib/components/modal/visual-tests/hidden-tests',
-    pageViewport,
-  })
-
-  it('have to match the default drawer window', async () => {
-    const screenshot = await testPageScreenshot({
-      selector: 'div#dnb-modal-root', // only to make sure we have a valid selector
-      simulate: 'click',
-      simulateSelector:
-        '[data-visual-test="modal-drawer-basic"] button:first-of-type',
-      screenshotSelector: '.dnb-modal__content',
-      rootClassName: 'hide-page-content',
-      waitBeforeSimulate: 200,
-    })
-    expect(screenshot).toMatchImageSnapshot()
-  })
-})
-
 describe('Additional Modal screenshot', () => {
   const pageViewport = {
     width: 400,
@@ -105,42 +85,3 @@ describe('Additional Modal screenshot', () => {
     expect(screenshot).toMatchImageSnapshot()
   })
 })
-
-describe('Drawer without spacing', () => {
-  setupPageScreenshot({
-    url: '/uilib/components/modal/visual-tests/hidden-tests',
-    pageViewport,
-  })
-
-  it('have to match drawer without spacing', async () => {
-    const screenshot = await testPageScreenshot({
-      selector: 'div#dnb-modal-root', // only to make sure we have a valid selector
-      simulate: 'click',
-      simulateSelector:
-        '[data-visual-test="drawer-no-spacing"] button:first-of-type',
-      screenshotSelector: '.dnb-modal__content',
-      rootClassName: 'hide-page-content',
-      waitBeforeSimulate: 200,
-    })
-    expect(screenshot).toMatchImageSnapshot()
-  })
-})
-
-describe('Drawer left screenshot', () => {
-  setupPageScreenshot({
-    url: '/uilib/components/modal/visual-tests/hidden-tests',
-    pageViewport,
-  })
-
-  it('have to match the drawer with containerplacement left', async () => {
-    const screenshot = await testPageScreenshot({
-      selector: 'div#dnb-modal-root', // only to make sure we have a valid selector
-      simulate: 'click',
-      simulateSelector:
-        '[data-visual-test="modal-drawer-leftsided"] button:first-of-type',
-      screenshotSelector: '.dnb-modal__content',
-      rootClassName: 'hide-page-content',
-    })
-    expect(screenshot).toMatchImageSnapshot()
-  })
-})