From a228663059728415603dad8dfe0b4d331db055c9 Mon Sep 17 00:00:00 2001
From: Gido Manders <gido.manders@42.nl>
Date: Fri, 22 Sep 2023 18:03:54 +0200
Subject: [PATCH] improvement: scrollable modal

We currently only allow a sticky footer, but the Bootstrap modal also
has the ability to make the content scrollable.

Added scrollable to modal
---
 .../__snapshots__/ConfirmModal.test.tsx.snap  |  8 +++----
 src/core/Modal/Modal.scss                     | 18 ---------------
 src/core/Modal/Modal.test.tsx                 | 22 +++++++++++++------
 src/core/Modal/Modal.tsx                      |  2 +-
 .../Modal/__snapshots__/Modal.test.tsx.snap   | 12 +++++-----
 .../OpenCloseModal/OpenCloseModal.test.tsx    | 13 ++++++++---
 src/core/OpenCloseModal/OpenCloseModal.tsx    |  2 +-
 .../OpenCloseModal.test.tsx.snap              |  8 +++----
 src/main.scss                                 |  1 -
 9 files changed, 41 insertions(+), 45 deletions(-)
 delete mode 100644 src/core/Modal/Modal.scss

diff --git a/src/core/ConfirmModal/__snapshots__/ConfirmModal.test.tsx.snap b/src/core/ConfirmModal/__snapshots__/ConfirmModal.test.tsx.snap
index 744f44a2a..8ad4d3853 100644
--- a/src/core/ConfirmModal/__snapshots__/ConfirmModal.test.tsx.snap
+++ b/src/core/ConfirmModal/__snapshots__/ConfirmModal.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Component: ConfirmModal ui custom texts 1`] = `
   tabindex="-1"
 >
   <div
-    class="sticky-modal"
+    class=""
   >
     <div
       aria-modal="true"
@@ -16,7 +16,7 @@ exports[`Component: ConfirmModal ui custom texts 1`] = `
       tabindex="-1"
     >
       <div
-        class="modal-dialog"
+        class="modal-dialog modal-dialog-scrollable"
         role="document"
       >
         <div
@@ -105,7 +105,7 @@ exports[`Component: ConfirmModal ui default texts 1`] = `
   tabindex="-1"
 >
   <div
-    class="sticky-modal"
+    class=""
   >
     <div
       aria-modal="true"
@@ -115,7 +115,7 @@ exports[`Component: ConfirmModal ui default texts 1`] = `
       tabindex="-1"
     >
       <div
-        class="modal-dialog"
+        class="modal-dialog modal-dialog-scrollable"
         role="document"
       >
         <div
diff --git a/src/core/Modal/Modal.scss b/src/core/Modal/Modal.scss
deleted file mode 100644
index f161d70bd..000000000
--- a/src/core/Modal/Modal.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.sticky-modal {
-  .modal {
-    height: auto;
-    bottom: 1.75rem;
-    overflow-y: scroll !important;
-
-    .modal-dialog {
-      max-height: 100%;
-    }
-
-    .modal-footer {
-      background-color: var(--bs-modal-bg);
-      position: sticky;
-      bottom: 0;
-      z-index: 10; // This should be higher than pagination active item
-    }
-  }
-}
diff --git a/src/core/Modal/Modal.test.tsx b/src/core/Modal/Modal.test.tsx
index b6928c3b0..cad07104a 100644
--- a/src/core/Modal/Modal.test.tsx
+++ b/src/core/Modal/Modal.test.tsx
@@ -10,7 +10,7 @@ describe('Component: Modal', () => {
   function setup({
     hasHeader = true,
     hasFooter = true,
-    stickyFooter = undefined
+    stickyFooter
   }: {
     hasHeader?: boolean;
     hasFooter?: boolean;
@@ -28,15 +28,13 @@ describe('Component: Modal', () => {
     const children = (
       <RadioGroup<string>
         onChange={jest.fn()}
-        options={[ 'local', 'development', 'test', 'acceptation', 'production' ]}
+        options={['local', 'development', 'test', 'acceptation', 'production']}
         labelForOption={(v) => v}
         label="Environment"
       />
     );
 
-    const { container } = render(
-      <Modal {...props}>{children}</Modal>
-    );
+    const { container } = render(<Modal {...props}>{children}</Modal>);
 
     return { container, onCloseSpy };
   }
@@ -62,10 +60,20 @@ describe('Component: Modal', () => {
       expect(document.body.lastChild).toMatchSnapshot();
     });
 
-    test('sans sticky footer', () => {
+    test('sticky footer', () => {
+      setup({ stickyFooter: true });
+
+      expect(
+        document.body.lastChild?.firstChild?.firstChild?.firstChild
+      ).toHaveClass('modal-dialog-scrollable');
+    });
+
+    test('scrollable', () => {
       setup({ stickyFooter: false });
 
-      expect(document.body.lastChild?.firstChild).not.toHaveClass('sticky-modal');
+      expect(
+        document.body.lastChild?.firstChild?.firstChild?.firstChild
+      ).not.toHaveClass('modal-dialog-scrollable');
     });
   });
 
diff --git a/src/core/Modal/Modal.tsx b/src/core/Modal/Modal.tsx
index 2670212bb..7bfdc495b 100644
--- a/src/core/Modal/Modal.tsx
+++ b/src/core/Modal/Modal.tsx
@@ -90,11 +90,11 @@ export function Modal(props: Props) {
 
   return (
     <ReactstrapModal
-      wrapClassName={stickyFooter ? 'sticky-modal' : undefined}
       isOpen={true}
       toggle={onClose}
       size={size}
       className={className}
+      scrollable={stickyFooter}
     >
       {header ? (
         <ModalHeader toggle={onClose} className={modalHeaderClassName}>
diff --git a/src/core/Modal/__snapshots__/Modal.test.tsx.snap b/src/core/Modal/__snapshots__/Modal.test.tsx.snap
index eae1c013a..d3320ecb5 100644
--- a/src/core/Modal/__snapshots__/Modal.test.tsx.snap
+++ b/src/core/Modal/__snapshots__/Modal.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Component: Modal ui with header and footer 1`] = `
   tabindex="-1"
 >
   <div
-    class="sticky-modal"
+    class=""
   >
     <div
       aria-modal="true"
@@ -16,7 +16,7 @@ exports[`Component: Modal ui with header and footer 1`] = `
       tabindex="-1"
     >
       <div
-        class="modal-dialog"
+        class="modal-dialog modal-dialog-scrollable"
         role="document"
       >
         <div
@@ -143,7 +143,7 @@ exports[`Component: Modal ui without footer 1`] = `
   tabindex="-1"
 >
   <div
-    class="sticky-modal"
+    class=""
   >
     <div
       aria-modal="true"
@@ -153,7 +153,7 @@ exports[`Component: Modal ui without footer 1`] = `
       tabindex="-1"
     >
       <div
-        class="modal-dialog"
+        class="modal-dialog modal-dialog-scrollable"
         role="document"
       >
         <div
@@ -275,7 +275,7 @@ exports[`Component: Modal ui without header 1`] = `
   tabindex="-1"
 >
   <div
-    class="sticky-modal"
+    class=""
   >
     <div
       aria-modal="true"
@@ -285,7 +285,7 @@ exports[`Component: Modal ui without header 1`] = `
       tabindex="-1"
     >
       <div
-        class="modal-dialog"
+        class="modal-dialog modal-dialog-scrollable"
         role="document"
       >
         <div
diff --git a/src/core/OpenCloseModal/OpenCloseModal.test.tsx b/src/core/OpenCloseModal/OpenCloseModal.test.tsx
index f32b90a26..df2d90262 100644
--- a/src/core/OpenCloseModal/OpenCloseModal.test.tsx
+++ b/src/core/OpenCloseModal/OpenCloseModal.test.tsx
@@ -104,11 +104,18 @@ describe('Component: OpenCloseModal', () => {
       expect(document.body.lastChild).toMatchSnapshot();
     });
 
+    test('sticky footer', () => {
+      setup({ isOpen: true, stickyFooter: true });
+      expect(
+        document.body.lastChild?.firstChild?.firstChild?.firstChild
+      ).toHaveClass('modal-dialog-scrollable');
+    });
+
     test('sans sticky footer', () => {
       setup({ isOpen: true, stickyFooter: false });
-      expect(document.body.lastChild?.firstChild).not.toHaveClass(
-        'sticky-modal'
-      );
+      expect(
+        document.body.lastChild?.firstChild?.firstChild?.firstChild
+      ).not.toHaveClass('modal-dialog-scrollable');
     });
   });
 
diff --git a/src/core/OpenCloseModal/OpenCloseModal.tsx b/src/core/OpenCloseModal/OpenCloseModal.tsx
index 6be03a657..4849cbb9f 100644
--- a/src/core/OpenCloseModal/OpenCloseModal.tsx
+++ b/src/core/OpenCloseModal/OpenCloseModal.tsx
@@ -141,7 +141,7 @@ export function OpenCloseModal(props: Props) {
       className={className}
       isOpen={true}
       size={size}
-      wrapClassName={stickyFooter ? 'sticky-modal' : undefined}
+      scrollable={stickyFooter}
     >
       {onSave ? (
         <form onSubmit={onSave}>
diff --git a/src/core/OpenCloseModal/__snapshots__/OpenCloseModal.test.tsx.snap b/src/core/OpenCloseModal/__snapshots__/OpenCloseModal.test.tsx.snap
index 4f44fa788..7cab00094 100644
--- a/src/core/OpenCloseModal/__snapshots__/OpenCloseModal.test.tsx.snap
+++ b/src/core/OpenCloseModal/__snapshots__/OpenCloseModal.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Component: OpenCloseModal ui in progress 1`] = `
   tabindex="-1"
 >
   <div
-    class="sticky-modal"
+    class=""
   >
     <div
       aria-modal="true"
@@ -16,7 +16,7 @@ exports[`Component: OpenCloseModal ui in progress 1`] = `
       tabindex="-1"
     >
       <div
-        class="modal-dialog"
+        class="modal-dialog modal-dialog-scrollable"
         role="document"
       >
         <div
@@ -195,7 +195,7 @@ exports[`Component: OpenCloseModal ui open 1`] = `
   tabindex="-1"
 >
   <div
-    class="sticky-modal"
+    class=""
   >
     <div
       aria-modal="true"
@@ -205,7 +205,7 @@ exports[`Component: OpenCloseModal ui open 1`] = `
       tabindex="-1"
     >
       <div
-        class="modal-dialog"
+        class="modal-dialog modal-dialog-scrollable"
         role="document"
       >
         <div
diff --git a/src/main.scss b/src/main.scss
index b559a8a7b..ed73a2475 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -25,7 +25,6 @@
 @import './core/Spinner/Spinner';
 @import './core/Tag/Tag';
 @import './core/Popover/Popover';
-@import './core/Modal/Modal';
 @import './core/Toggle/Toggle';
 @import './core/OpenClose/OpenClose';
 @import './core/SearchInput/SearchInput';