feat(Modal): add scrollable prop (#1435)

This PR adds a `scrollable` prop to `Modal` which applies the `modal-dialog-scrollable` class which was added in Bootstrap 4.3.0. [Here](https://getbootstrap.com/docs/4.3/components/modal/#scrolling-long-content) is the relevant section of the Bootstrap documentation for reference.

docs/lib/Components/ModalsPage.js

@@ -69,6 +69,8 @@ const ModalsPage = () => {
     PropTypes.bool,
     PropTypes.oneOf(['static'])
   ]),
+  // if body of modal should be scrollable when content is long
+  scrollable: PropTypes.bool,
   // allows for a node/component to exist next to the modal (outside of it). Useful for external close buttons
   // external: PropTypes.node,
   // called on componentDidMount

src/Modal.js

@@ -21,6 +21,7 @@ const propTypes = {
   isOpen: PropTypes.bool,
   autoFocus: PropTypes.bool,
   centered: PropTypes.bool,
+  scrollable: PropTypes.bool,
   size: PropTypes.string,
   toggle: PropTypes.func,
   keyboard: PropTypes.bool,
@@ -64,6 +65,7 @@ const defaultProps = {
   isOpen: false,
   autoFocus: true,
   centered: false,
+  scrollable: false,
   role: 'dialog',
   backdrop: true,
   keyboard: true,
@@ -318,6 +320,7 @@ class Modal extends React.Component {
         className={mapToCssModules(classNames(dialogBaseClass, this.props.className, {
           [`modal-${this.props.size}`]: this.props.size,
           [`${dialogBaseClass}-centered`]: this.props.centered,
+          [`${dialogBaseClass}-scrollable`]: this.props.scrollable,
         }), this.props.cssModule)}
         role="document"
         ref={(c) => {

src/__tests__/Modal.spec.js

@@ -106,6 +106,19 @@ describe('Modal', () => {
     wrapper.unmount();
   });
 
+  it('should render with the class "modal-dialog-scrollable" when scrollable is "true"', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Modal isOpen={isOpen} toggle={toggle} scrollable={true}>
+        Yo!
+      </Modal>
+    );
+
+    jest.runTimersToTime(300);
+    expect(document.getElementsByClassName('modal-dialog-scrollable').length).toBe(1);
+    wrapper.unmount();
+  });
+
   it('should render with class "modal-dialog" and have custom class name if provided', () => {
     isOpen = true;
     const wrapper = mount(