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

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

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');
     });
   });
 

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}>

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

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');
     });
   });
 

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}>

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

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';