feat: add scrollable prop to Modal (#3469)

bootstrap way ahead of me

package.json

@@ -19,7 +19,6 @@
     "ci-lint": "eslint --rule \"prettier/prettier: 2\"",
     "format": "npm run ci-lint . -- --fix",
     "lint": "npm run ci-lint .",
-    "precommit": "lint-staged",
     "release": "rollout",
     "prepublishOnly": "npm run build",
     "tdd": "karma start",
@@ -30,6 +29,11 @@
     "build-storybook": "build-storybook",
     "dtslint": "dtslint types"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
   "lint-staged": {
     "*.js": [
       "npm run ci-lint -- --fix",
@@ -103,7 +107,7 @@
     "execa": "^1.0.0",
     "fs-extra": "^7.0.1",
     "husky": "^1.3.1",
-    "karma": "^3.1.4",
+    "karma": "^4.0.0",
     "karma-chrome-launcher": "^2.2.0",
     "karma-cli": "^2.0.0",
     "karma-coverage": "^1.1.2",

src/ListGroupItem.js

@@ -33,18 +33,17 @@ class ListGroupItem extends React.Component {
      */
     disabled: PropTypes.bool,
 
+    eventKey: PropTypes.string,
+
+    onClick: PropTypes.func,
+
     /**
      * You can use a custom element type for this component. For none `action` items, items render as `li`.
      * For actions the default is an achor or button element depending on whether a `href` is provided.
      *
      * @default {'div' | 'a' | 'button'}
      */
     as: PropTypes.elementType,
-
-    /** @private */
-    eventKey: PropTypes.any,
-    /** @private */
-    onClick: PropTypes.func,
   };
 
   static defaultProps = {

src/Modal.js

@@ -19,7 +19,9 @@ import { createBootstrapComponent } from './ThemeProvider';
 import ModalContext from './ModalContext';
 
 const propTypes = {
-  /** @default 'modal' */
+  /**
+   * @default 'modal'
+   */
   bsPrefix: PropTypes.string,
 
   /**
@@ -51,6 +53,11 @@ const propTypes = {
    */
   keyboard: PropTypes.bool,
 
+  /**
+   * Allows scrolling the `<Modal.Body>` instead of the entire Modal when overflowing.
+   */
+  scrollable: PropTypes.bool,
+
   /**
    * Open and close the Modal with a slide and fade animation.
    */
@@ -94,7 +101,9 @@ const propTypes = {
    */
   show: PropTypes.bool,
 
-  /** Callback fired when the modal has switch to `show` */
+  /**
+   * A callback fired when the Modal is opening.
+   */
   onShow: PropTypes.func,
 
   /**
@@ -103,6 +112,11 @@ const propTypes = {
    */
   onHide: PropTypes.func,
 
+  /**
+   * A callback fired when the escape key, if specified in `keyboard`, is pressed.
+   */
+  onEscapeKeyDown: PropTypes.func,
+
   /**
    * Callback fired before the Modal transitions in
    */
@@ -133,13 +147,16 @@ const propTypes = {
    */
   onExited: PropTypes.func,
 
-  /** @private */
-  container: PropTypes.any,
+  /**
+   * A ModalManager instance used to track and manage the state of open
+   * Modals. Useful when customizing how modals interact within a container
+   */
+  manager: PropTypes.object.isRequired,
 
-  /** @private */
-  manager: PropTypes.any,
-  /** @private */
-  onEscapeKeyDown: PropTypes.any,
+  /**
+   * @private
+   */
+  container: PropTypes.any,
 };
 
 const defaultProps = {
@@ -280,10 +297,10 @@ class Modal extends React.Component {
 
       /* BaseModal props */
       show,
-      manager,
       animation,
       backdrop,
       keyboard,
+      manager,
       onEscapeKeyDown,
       onShow,
       onHide,

src/ModalDialog.js

@@ -19,10 +19,18 @@ const propTypes = {
    * Specify whether the Component should be vertically centered
    */
   centered: PropTypes.bool,
+
+  /**
+   * Allows scrolling the `<Modal.Body>` instead of the entire Modal when overflowing.
+   */
+  scrollable: PropTypes.bool,
 };
 
 const ModalDialog = React.forwardRef(
-  ({ bsPrefix, className, centered, size, children, ...props }, ref) => {
+  (
+    { bsPrefix, className, centered, size, children, scrollable, ...props },
+    ref,
+  ) => {
     bsPrefix = useBootstrapPrefix(bsPrefix, 'modal');
     const dialogClass = `${bsPrefix}-dialog`;
 
@@ -35,6 +43,7 @@ const ModalDialog = React.forwardRef(
           className,
           size && `${bsPrefix}-${size}`,
           centered && `${dialogClass}-centered`,
+          scrollable && `${bsPrefix}-scrollable`,
         )}
       >
         <div className={classNames(`${bsPrefix}-content`)}>{children}</div>