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

packages/dnb-design-system-portal/src/docs/uilib/components/drawer/Examples.js

@@ -5,6 +5,46 @@
 
 import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox'
 
+export const DrawerScrollViewSetup = () =>
+  !global.IS_TEST ? null : (
+    <ComponentBox useRender data-visual-test="drawer-scroll-view">
+      {
+        /* jsx */ `
+const DrawerTest = () => {
+  const contentRef = React.useRef()
+  const scrollRef = React.useRef()
+  const [contentHeight, setContentHeight] = React.useState(0)
+  const [scrollHeight, setScrollHeight] = React.useState(0)
+
+  return (
+    <Drawer
+      noAnimation
+      contentRef={contentRef}
+      scrollRef={scrollRef}
+      onOpen={() => {
+        setContentHeight(contentRef.current.scrollHeight)
+        setScrollHeight(scrollRef.current.scrollHeight)
+      }}
+    >
+      <Drawer.Body>
+        <div style={{ height: '100rem' }}>
+          <div className="drawer-scroll-view">
+            <P bottom>Both should be the same</P>
+            <P size="xx-large">{contentHeight}</P>
+            ===
+            <P size="xx-large">{scrollHeight}</P>
+          </div>
+        </div>
+      </Drawer.Body>
+    </Drawer>
+  )
+}
+render(<DrawerTest />)
+`
+      }
+    </ComponentBox>
+  )
+
 export const SimpleDrawerExample = () => (
   <ComponentBox data-visual-test="simple-drawer">
     {
@@ -29,7 +69,7 @@ export const SimpleDrawerExample = () => (
     phasellus praesent justo mollis montes velit taciti gravida
   </P>
 </Drawer>    
-    `
+`
     }
   </ComponentBox>
 )

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

@@ -7,7 +7,8 @@ SimpleDrawerExample,
 FullDrawerExample,
 DrawerCallbackExample,
 DrawerCustomTriggerExample,
-DrawerNoAnimationNoSpacing
+DrawerNoAnimationNoSpacing,
+DrawerScrollViewSetup,
 } from 'Docs/uilib/components/drawer/Examples'
 
 ## Demos
@@ -31,3 +32,5 @@ DrawerNoAnimationNoSpacing
 ### Remove animation and spacing
 
 <DrawerNoAnimationNoSpacing />
+
+<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

@@ -40,6 +40,25 @@ describe('Drawer screenshot', () => {
   })
 })
 
+describe('Drawer screenshot', () => {
+  setupPageScreenshot({
+    url: '/uilib/components/drawer/demos',
+    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()
+  })
+})
+
 describe('Drawer simple screenshot', () => {
   setupPageScreenshot({
     url: '/uilib/components/drawer/demos',

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.test.tsx

@@ -12,7 +12,7 @@ import {
   attachToBody, // in order to use document.activeElement properly
   loadScss,
 } from '../../../core/jest/jestSetup'
-
+import { render } from '@testing-library/react'
 import Input from '../../input/Input'
 import Component, { OriginalComponent } from '../Modal'
 import Button from '../../button/Button'
@@ -177,6 +177,29 @@ describe('Modal component', () => {
     expect(Comp.find('h1').text()).toBe(props.title)
   })
 
+  it('will accept custom refs', () => {
+    const contentRef = React.createRef<HTMLElement>()
+    const scrollRef = React.createRef<HTMLElement>()
+
+    const MockComponent = () => {
+      return (
+        <Component
+          openState
+          noAnimation
+          contentRef={contentRef}
+          scrollRef={scrollRef}
+        >
+          content
+        </Component>
+      )
+    }
+
+    render(<MockComponent />)
+
+    expect(contentRef.current).toBeTruthy()
+    expect(scrollRef.current).toBeTruthy()
+  })
+
   it('has no trigger button once we set omitTriggerButton', () => {
     const Comp = mount(<Component {...props} />)
     Comp.setProps({

packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap

@@ -1345,7 +1345,8 @@ exports[`Modal component have to match snapshot 1`] = `
 `;
 
 exports[`Modal scss have to match snapshot 1`] = `
-"/*
+"@charset \\"UTF-8\\";
+/*
 * DNB Modal
 *
 */
@@ -2140,11 +2141,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) {
@@ -2251,8 +2256,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 {