From aa4fecb6e0448197abddcc8d7e1fb23d44369f18 Mon Sep 17 00:00:00 2001 From: James Koster Date: Fri, 29 Apr 2022 17:57:43 +0100 Subject: [PATCH 01/19] blur content behind modal --- packages/components/src/modal/style.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss index 7f96b1ab0c691..b15af7d279364 100644 --- a/packages/components/src/modal/style.scss +++ b/packages/components/src/modal/style.scss @@ -1,3 +1,9 @@ +body.modal-open { + #wpwrap { + filter: blur($grid-unit); + } +} + // The scrim behind the modal window. .components-modal__screen-overlay { position: fixed; From dc51eac27b3c36942cadd3e6367ea3f3349e0c75 Mon Sep 17 00:00:00 2001 From: James Koster Date: Fri, 29 Apr 2022 18:31:03 +0100 Subject: [PATCH 02/19] modal styling --- packages/components/src/modal/index.js | 4 ++-- packages/components/src/modal/style.scss | 9 ++++----- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/components/src/modal/index.js b/packages/components/src/modal/index.js index de86220f03bbe..d2b1aa27983d8 100644 --- a/packages/components/src/modal/index.js +++ b/packages/components/src/modal/index.js @@ -24,7 +24,7 @@ import { } from '@wordpress/compose'; import { ESCAPE } from '@wordpress/keycodes'; import { __ } from '@wordpress/i18n'; -import { closeSmall } from '@wordpress/icons'; +import { close } from '@wordpress/icons'; /** * Internal dependencies @@ -168,7 +168,7 @@ function Modal( props, forwardedRef ) { { isDismissible && ( { isOpen && ( - + +

+ "Lorem ipsum dolor sit amet, consectetur adipiscing + elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Ut enim ad minim veniam, quis + nostrud exercitation ullamco laboris nisi ut aliquip ex + ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu + fugiat nulla pariatur. Excepteur sint occaecat cupidatat + non proident, sunt in culpa qui officia deserunt mollit + anim id est laborum." +

+ From f280207e8b0684d2c6e3952e641d463199166bf1 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 25 May 2022 16:28:27 +0200 Subject: [PATCH 07/19] Show border between header and content only if content has scrolled --- packages/components/src/modal/index.js | 34 ++++++++++++++++++++++++ packages/components/src/modal/style.scss | 5 ++++ 2 files changed, 39 insertions(+) diff --git a/packages/components/src/modal/index.js b/packages/components/src/modal/index.js index d2b1aa27983d8..ea6862fef2dba 100644 --- a/packages/components/src/modal/index.js +++ b/packages/components/src/modal/index.js @@ -12,6 +12,7 @@ import { createPortal, useEffect, useRef, + useState, forwardRef, } from '@wordpress/element'; import { @@ -73,6 +74,9 @@ function Modal( props, forwardedRef ) { const focusReturnRef = useFocusReturn(); const focusOutsideProps = useFocusOutside( onRequestClose ); + const [ hasScrolledContent, setHasScrolledContent ] = useState( false ); + const contentRef = useRef(); + useEffect( () => { openModalCount++; @@ -104,6 +108,34 @@ function Modal( props, forwardedRef ) { } } + useEffect( () => { + const onContentContainerScroll = ( e ) => { + const scrollY = e?.target?.scrollTop ?? -1; + + if ( ! hasScrolledContent && scrollY > 0 ) { + setHasScrolledContent( true ); + } else if ( hasScrolledContent && scrollY <= 0 ) { + setHasScrolledContent( false ); + } + }; + + if ( contentRef.current ) { + contentRef.current.addEventListener( + 'scroll', + onContentContainerScroll, + false + ); + + return () => { + contentRef.current.removeEventListener( + 'scroll', + onContentContainerScroll, + false + ); + }; + } + }, [ hasScrolledContent ] ); + return createPortal( // eslint-disable-next-line jsx-a11y/no-static-element-interactions
{ ! __experimentalHideHeader && (
diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss index d7bb32081bc76..6e30e8e085a36 100644 --- a/packages/components/src/modal/style.scss +++ b/packages/components/src/modal/style.scss @@ -64,6 +64,7 @@ // modal screen). .components-modal__header { box-sizing: border-box; + border-bottom: $border-width solid transparent; padding: $grid-unit-20 $grid-unit-40 0; display: flex; flex-direction: row; @@ -90,6 +91,10 @@ position: relative; left: $grid-unit-10; } + + .components-modal__content.has-scrolled-content:not(.hide-header) & { + border-bottom-color: $gray-300; + } } .components-modal__header-heading-container { From b7aa9d23607b4b54840fa1ad1d7cb5e7af9d1bf4 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 25 May 2022 16:55:49 +0200 Subject: [PATCH 08/19] Apply suggestions from code review Remove quotes from storybook example --- packages/components/src/modal/stories/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/modal/stories/index.js b/packages/components/src/modal/stories/index.js index 5d86eaa8dd1c6..998b935943d00 100644 --- a/packages/components/src/modal/stories/index.js +++ b/packages/components/src/modal/stories/index.js @@ -41,7 +41,7 @@ const ModalExample = ( props ) => { style={ { maxWidth: '600px' } } >

- "Lorem ipsum dolor sit amet, consectetur adipiscing + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex @@ -49,7 +49,7 @@ const ModalExample = ( props ) => { reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum." + anim id est laborum.