Merge pull request #574 from Panenco/feat/modal-scroll-type-prop

feat: modal scroll type prop

src/components/modal/Modal.tsx

@@ -4,7 +4,7 @@ import cx from 'classnames';
 
 import { StyledModal, StyledModalBackdrop, StyledModalContainer, StyledFocusLock } from './style';
 import { ModalContext } from './modalContext';
-import { ModalSizesType } from './types';
+import { ModalScrollType, ModalSizesType } from './types';
 
 export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -34,6 +34,11 @@ export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
    * Callback fired when the modal requests to be closed
    * */
   onHide?: () => void;
+  /**
+   * The scroll behavior of the modal
+   * @default body
+   * */
+  scroll?: ModalScrollType;
   /**
    * If `true`, the modal is visible
    * @default true
@@ -56,6 +61,7 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
       size = 'md',
       dialogClassName,
       autoFocus = true,
+      scroll = 'body',
       ...props
     }: ModalProps,
     ref,
@@ -106,6 +112,7 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
                 role='dialog'
                 aria-modal='true'
                 ref={ref}
+                scroll={scroll}
               >
                 <StyledModal
                   size={size}

src/components/modal/style.ts

@@ -1,7 +1,7 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { breakpoints } from 'styles/breakpoints';
 import FocusLock from 'react-focus-lock';
-import { ModalSizesType } from './types';
+import { ModalScrollType, ModalSizesType } from './types';
 
 const sizeOptions = {
   sm: '320px',
@@ -67,12 +67,31 @@ export const StyledModal = styled.div<{
   }
 `;
 
-export const StyledModalContainer = styled.div`
+export const StyledModalContainer = styled.div<{
+  scroll: ModalScrollType;
+}>`
   display: flex;
   align-items: flex-start;
   justify-content: center;
   padding: 0;
   min-height: 100%;
+  ${({ scroll }) =>
+    scroll === 'paper' &&
+    css`
+      height: 100%;
+
+      ${StyledModal} {
+        max-height: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
+
+      ${StyledModalBody} {
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
+    `}
+
   @media (min-width: ${breakpoints.sm}) {
     padding: 100px 10px;
   }

src/components/modal/types.ts

@@ -1 +1,2 @@
 export type ModalSizesType = 'sm' | 'md' | 'lg';
+export type ModalScrollType = 'paper' | 'body';

stories/modal/Modal.stories.tsx

@@ -49,7 +49,16 @@ const Template: ComponentStory<typeof Modal> = (args) => {
         <Modal.Header>
           <Modal.Title id='exampleModal'>Modal title</Modal.Title>
         </Modal.Header>
-        <Modal.Body>Modal body</Modal.Body>
+        <Modal.Body>
+          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere quasi praesentium sed dolorem, voluptas
+          maiores sapiente reiciendis tempora repudiandae error! Adipisci voluptates debitis reiciendis rem officia
+          eaque, commodi nesciunt, quos sequi, eius quibusdam magnam. Omnis quod quia nulla! Fuga, quibusdam. Cumque
+          dicta numquam cupiditate dolore repellendus expedita est, voluptatum aspernatur dignissimos hic et ratione,
+          facilis quam aliquam, ullam eum error soluta deserunt pariatur mollitia alias sed repellat. Dolor laborum
+          omnis cupiditate deserunt ratione inventore porro, sapiente magnam eum molestias quaerat molestiae incidunt
+          culpa adipisci ducimus. Odit cum doloremque accusamus nemo animi asperiores quisquam molestiae. Aperiam sint
+          nostrum vitae doloribus perferendis!
+        </Modal.Body>
         <Modal.Footer>Modal footer</Modal.Footer>
       </Modal>
     </>
@@ -72,3 +81,8 @@ export const Large = Template.bind({});
 Large.args = {
   size: 'lg',
 };
+
+export const ScrollPaper = Template.bind({});
+ScrollPaper.args = {
+  scroll: 'paper',
+};