fix(Modal): allow overflow to be set by consumer (#299)

* fix(Modal): pointer cursor on close button

* fix(Modal): allow overflow to be set by consumer

src/components/Box/Box.tsx

@@ -133,9 +133,7 @@ export interface BoxProps {
    */
   maxWidth?: DimensionSize | ResponsiveProp<DimensionSize> | string;
   /**
-   * The overflow property is specified as one or two keywords.
-   * If two keywords are specified, the first applies to overflow-x and the second to overflow-y.
-   * Otherwise, both overflow-x and overflow-y are set to the same value.
+   * The css overflow behavior of the Box
    */
   overflow?: CssOverflowValue | ResponsiveProp<CssOverflowValue>;
   /**

src/components/Modal/Modal.module.scss

@@ -67,7 +67,6 @@
   background-color: var(--modal-background-color);
   padding: 0;
   width: 100%;
-  overflow: hidden;
   animation: fadeIn 0.3s;
 
   @media (min-width: $size-breakpoint-tablet) {

src/components/Modal/Modal.tsx

@@ -2,6 +2,7 @@ import React, { FC, ReactNode, RefObject } from 'react';
 import { DialogOverlay, DialogContent } from '@reach/dialog';
 import classNames from 'classnames';
 import { ModalFooter, ModalHeader, ModalBody } from './components';
+import { CssOverflowValue } from '../../types';
 import styles from './Modal.module.scss';
 
 interface ModalProps {
@@ -47,6 +48,10 @@ interface ModalProps {
    * Function that is called whenever the user hits "Esacape" key or clicks outside the modal.
    */
   onDismiss: (event?: React.SyntheticEvent) => void;
+  /**
+   * The css overflow behavior of the Modal
+   */
+  overflow?: CssOverflowValue;
 }
 
 const Modal: FC<ModalProps> & {
@@ -63,11 +68,14 @@ const Modal: FC<ModalProps> & {
   initialFocusRef,
   isOpen,
   onDismiss,
+  overflow = 'hidden',
 }) => {
   const overylayClassnames = classNames(styles.overlay, {
     fullscreen: fullScreenMobile,
   });
-  const contentClassnames = classNames(styles['modal-content'], className);
+  const contentClassnames = classNames(styles['modal-content'], className, {
+    [`overflow-${overflow}`]: overflow,
+  });
 
   return (
     <DialogOverlay