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) => { diff --git a/src/__tests__/Modal.spec.js b/src/__tests__/Modal.spec.js index 1fba9144f..c5a9af39b 100644 --- a/src/__tests__/Modal.spec.js +++ b/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( + + Yo! + + ); + + 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(