From 1503bd65bfa37aabf8a36e3774da4b49c5800e7b Mon Sep 17 00:00:00 2001 From: Martin Bohal Date: Mon, 28 Aug 2023 18:44:55 +0200 Subject: [PATCH] Allow the `Modal` component to block scrolling on any HTML element instead of just the `` element (#472) --- src/components/Modal/Modal.jsx | 10 +-- src/components/Modal/README.md | 90 +++++++++++++++---- .../Modal/_hooks/useModalScrollPrevention.js | 18 ++-- 3 files changed, 87 insertions(+), 31 deletions(-) diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx index f3128328..dfcd993f 100644 --- a/src/components/Modal/Modal.jsx +++ b/src/components/Modal/Modal.jsx @@ -98,7 +98,7 @@ Modal.defaultProps = { closeButtonRef: null, portalId: null, position: 'center', - preventScrollUnderneath: 'default', + preventScrollUnderneath: window.document.body, primaryButtonRef: null, size: 'medium', }; @@ -137,15 +137,15 @@ Modal.propTypes = { position: PropTypes.oneOf(['top', 'center']), /** * Mode in which Modal prevents scroll of elements bellow: - * * `default` - Modal prevents scroll on the `body` element * * `off` - Modal does not prevent any scroll + * * [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) - Modal prevents scroll on this HTML element * * object - * * * `reset` - method called on Modal's unmount to reset scroll prevention - * * * `start` - method called on Modal's mount to custom scroll prevention + * * `reset` - method called on Modal's unmount to reset scroll prevention + * * `start` - method called on Modal's mount to custom scroll prevention */ preventScrollUnderneath: PropTypes.oneOfType([ PropTypes.oneOf([ - 'default', + HTMLElement, 'off', ]), PropTypes.shape({ diff --git a/src/components/Modal/README.md b/src/components/Modal/README.md index edf738bd..50e56f9e 100644 --- a/src/components/Modal/README.md +++ b/src/components/Modal/README.md @@ -26,7 +26,13 @@ React.createElement(() => { const modalPrimaryButtonRef = React.useRef(); const modalCloseButtonRef = React.useRef(); return ( - <> + {/* + The `preventScrollUnderneath` feature is necessary for Modals to work in + React UI docs. You may not need it in your application. + */} +