From c8b76cc928e8b29d16f3d6edac176c35c3d71822 Mon Sep 17 00:00:00 2001 From: tcbegley Date: Thu, 7 Mar 2019 22:21:16 +0000 Subject: [PATCH] feat(Modal): add scrollable prop --- docs/lib/Components/ModalsPage.js | 2 ++ src/Modal.js | 3 +++ 2 files changed, 5 insertions(+) diff --git a/docs/lib/Components/ModalsPage.js b/docs/lib/Components/ModalsPage.js index e45ecb956..583373452 100644 --- a/docs/lib/Components/ModalsPage.js +++ b/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 diff --git a/src/Modal.js b/src/Modal.js index 2df97fe6e..f962b517b 100644 --- a/src/Modal.js +++ b/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) => {