From 5b96a656b37e627e830931cba010ed2f21e5b73f Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 24 Nov 2021 17:49:27 +0100 Subject: [PATCH 01/10] Destructure props inside function body --- packages/components/src/modal/index.js | 52 +++++++++++++------------- 1 file changed, 27 insertions(+), 25 deletions(-) diff --git a/packages/components/src/modal/index.js b/packages/components/src/modal/index.js index aadfb0ec5e337..d189ceba2325f 100644 --- a/packages/components/src/modal/index.js +++ b/packages/components/src/modal/index.js @@ -30,31 +30,33 @@ import StyleProvider from '../style-provider'; // Used to count the number of open modals. let openModalCount = 0; -export default function Modal( { - bodyOpenClassName = 'modal-open', - role = 'dialog', - title = null, - focusOnMount = true, - shouldCloseOnEsc = true, - shouldCloseOnClickOutside = true, - isDismissable, // Deprecated - isDismissible = isDismissable || true, - /* accessibility */ - aria = { - labelledby: null, - describedby: null, - }, - onRequestClose, - icon, - closeButtonLabel, - children, - style, - overlayClassName, - className, - contentLabel, - onKeyDown, - isFullScreen = false, -} ) { +export default function Modal( props ) { + const { + bodyOpenClassName = 'modal-open', + role = 'dialog', + title = null, + focusOnMount = true, + shouldCloseOnEsc = true, + shouldCloseOnClickOutside = true, + isDismissable, // Deprecated + isDismissible = isDismissable || true, + /* accessibility */ + aria = { + labelledby: null, + describedby: null, + }, + onRequestClose, + icon, + closeButtonLabel, + children, + style, + overlayClassName, + className, + contentLabel, + onKeyDown, + isFullScreen = false, + } = props; + const ref = useRef(); const instanceId = useInstanceId( Modal ); const headingId = title From b59bb768606a8eaba3122889c4c461ab87d1e34b Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 24 Nov 2021 17:53:17 +0100 Subject: [PATCH 02/10] Include Modal and its dependencies in the TS config --- packages/components/src/modal/aria-helper.js | 2 ++ packages/components/src/modal/index.js | 2 ++ packages/components/src/style-provider/index.js | 2 ++ packages/components/tsconfig.json | 2 ++ 4 files changed, 8 insertions(+) diff --git a/packages/components/src/modal/aria-helper.js b/packages/components/src/modal/aria-helper.js index 277293b337f46..aa6ecd01064ee 100644 --- a/packages/components/src/modal/aria-helper.js +++ b/packages/components/src/modal/aria-helper.js @@ -1,3 +1,5 @@ +//@ts-nocheck + /** * External dependencies */ diff --git a/packages/components/src/modal/index.js b/packages/components/src/modal/index.js index d189ceba2325f..c44ccae5c7a8e 100644 --- a/packages/components/src/modal/index.js +++ b/packages/components/src/modal/index.js @@ -1,3 +1,5 @@ +//@ts-nocheck + /** * External dependencies */ diff --git a/packages/components/src/style-provider/index.js b/packages/components/src/style-provider/index.js index 32c9a33b93707..0d64c78cbc7b7 100644 --- a/packages/components/src/style-provider/index.js +++ b/packages/components/src/style-provider/index.js @@ -1,3 +1,5 @@ +//@ts-nocheck + /** * External dependencies */ diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json index 0670a09563bba..ad15431b8dab4 100644 --- a/packages/components/tsconfig.json +++ b/packages/components/tsconfig.json @@ -46,6 +46,7 @@ "src/icon/**/*", "src/menu-item/**/*", "src/menu-group/**/*", + "src/modal/**/*", "src/navigable-container/**/*", "src/navigator/**/*", "src/number-control/**/*", @@ -57,6 +58,7 @@ "src/select-control/**/*", "src/shortcut/**/*", "src/slot-fill/**/*", + "src/style-provider/**/*", "src/spacer/**/*", "src/spinner/**/*", "src/surface/**/*", From bea3c7ad96aca14f2a7e56aad5bb4451a30f9c55 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 24 Nov 2021 17:55:58 +0100 Subject: [PATCH 03/10] Wrap `Modal` in `forwardRef` --- packages/components/src/modal/index.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/components/src/modal/index.js b/packages/components/src/modal/index.js index c44ccae5c7a8e..3a9a1e9edcce6 100644 --- a/packages/components/src/modal/index.js +++ b/packages/components/src/modal/index.js @@ -8,7 +8,12 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { createPortal, useEffect, useRef } from '@wordpress/element'; +import { + createPortal, + useEffect, + useRef, + forwardRef, +} from '@wordpress/element'; import { useInstanceId, useFocusReturn, @@ -32,7 +37,7 @@ import StyleProvider from '../style-provider'; // Used to count the number of open modals. let openModalCount = 0; -export default function Modal( props ) { +function Modal( props, forwardedRef ) { const { bodyOpenClassName = 'modal-open', role = 'dialog', @@ -110,7 +115,7 @@ export default function Modal( props ) { return createPortal( // eslint-disable-next-line jsx-a11y/no-static-element-interactions
Date: Wed, 24 Nov 2021 18:08:42 +0100 Subject: [PATCH 04/10] Add `__experimentalHideHeader` prop --- packages/components/src/modal/README.md | 10 ++++ packages/components/src/modal/index.js | 62 +++++++++++++----------- packages/components/src/modal/style.scss | 9 ++++ 3 files changed, 53 insertions(+), 28 deletions(-) diff --git a/packages/components/src/modal/README.md b/packages/components/src/modal/README.md index f0cf06f853012..b1cf8687f2ae3 100644 --- a/packages/components/src/modal/README.md +++ b/packages/components/src/modal/README.md @@ -255,6 +255,16 @@ This property when set to `true` will render a full screen modal. - Required: No - Default: `false` +#### __experimentalHideHeader + +When set to `true`, the Modal's header (including the icon, title and close button) will not be rendered. + +*Warning*: This property is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. + +- Type: `boolean` +- Required: No +- Default: `false` + ## Related components - To notify a user with a message of medium importance, use `Notice`. diff --git a/packages/components/src/modal/index.js b/packages/components/src/modal/index.js index 3a9a1e9edcce6..244f708ebf58e 100644 --- a/packages/components/src/modal/index.js +++ b/packages/components/src/modal/index.js @@ -62,6 +62,7 @@ function Modal( props, forwardedRef ) { contentLabel, onKeyDown, isFullScreen = false, + __experimentalHideHeader = false, } = props; const ref = useRef(); @@ -148,38 +149,43 @@ function Modal( props, forwardedRef ) { onKeyDown={ onKeyDown } >
-
-
- { icon && ( - - { icon } - - ) } - { title && ( -

- { title } -

+ { ! __experimentalHideHeader && ( +
+
+ { icon && ( + + { icon } + + ) } + { title && ( +

+ { title } +

+ ) } +
+ { isDismissible && ( +
- { isDismissible && ( -
+ ) } { children }
diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss index 8e8298e5213a4..7f96b1ab0c691 100644 --- a/packages/components/src/modal/style.scss +++ b/packages/components/src/modal/style.scss @@ -126,4 +126,13 @@ display: block; margin-bottom: $grid-unit-30; } + + &.hide-header { + margin-top: 0; + padding-top: $grid-unit-30; + + &::before { + content: none; + } + } } From b97649ffe5377609b230915fd94c2846027eae9e Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 24 Nov 2021 18:20:36 +0100 Subject: [PATCH 05/10] Add __experimentalHideHeader to Storybook knobs --- packages/components/src/modal/stories/index.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/components/src/modal/stories/index.js b/packages/components/src/modal/stories/index.js index 862b5f05f6fc0..e21f6c0159bd7 100644 --- a/packages/components/src/modal/stories/index.js +++ b/packages/components/src/modal/stories/index.js @@ -55,6 +55,10 @@ export const _default = () => { 'shouldCloseOnClickOutside', true ); + const __experimentalHideHeader = boolean( + '__experimentalHideHeader', + false + ); const iconComponent = showIcon ? : null; @@ -65,6 +69,7 @@ export const _default = () => { shouldCloseOnEsc, shouldCloseOnClickOutside, title, + __experimentalHideHeader, }; return ; From 978251bf9febea24b8a79bcb2bbf02eef40b540a Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 24 Nov 2021 18:21:11 +0100 Subject: [PATCH 06/10] Add `__experimentalHideHeader` unit test --- packages/components/src/modal/test/index.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/components/src/modal/test/index.js b/packages/components/src/modal/test/index.js index a751f09eadf2c..412fb96331825 100644 --- a/packages/components/src/modal/test/index.js +++ b/packages/components/src/modal/test/index.js @@ -46,4 +46,15 @@ describe( 'Modal', () => { const titleId = within( dialog ).getByText( 'Test Title' ).id; expect( dialog ).toHaveAttribute( 'aria-labelledby', titleId ); } ); + + it( 'hides the header when the `__experimentalHideHeader` prop is used', () => { + render( + +

Modal content

+ + ); + const dialog = screen.getByRole( 'dialog' ); + const title = within( dialog ).queryByText( 'Test Title' ); + expect( title ).not.toBeInTheDocument(); + } ); } ); From 164ee6933ba381f10e82771944977d37f29a39f8 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 24 Nov 2021 18:23:26 +0100 Subject: [PATCH 07/10] CHANGELOG --- packages/components/CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 57e572896bdbb..57c78d3155d60 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -13,11 +13,16 @@ - Fixed inconsistent padding in `UnitControl` ([#35646](https://github.com/WordPress/gutenberg/pull/35646)). - Added support for RTL behavior for the `ZStack`'s `offset` prop ([#36769](https://github.com/WordPress/gutenberg/pull/36769)) - Fixed race conditions causing conditionally displayed `ToolsPanelItem` components to be erroneously deregistered ([36588](https://github.com/WordPress/gutenberg/pull/36588)). +- Added `__experimentalHideHeader` prop to `Modal` component ([#36831](https://github.com/WordPress/gutenberg/pull/36831)). ### Bug Fix - Fixed spacing between `BaseControl` fields and help text within the `ToolsPanel` ([36334](https://github.com/WordPress/gutenberg/pull/36334)) +### Enhancements + +- Wrapped `Modal` in a `forwardRef` call ([#36831](https://github.com/WordPress/gutenberg/pull/36831)). + ## 19.0.2 (2021-11-15) - Remove erroneous use of `??=` syntax from `build-module`. From 600fc06657c3524801ba5e82f3210482cca82155 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 24 Nov 2021 18:30:15 +0100 Subject: [PATCH 08/10] Update snapshots --- .../test/__snapshots__/index.js.snap | 4 ++-- .../preferences-modal/test/__snapshots__/index.js.snap | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap index 9b50a624ada29..e071916946e25 100644 --- a/packages/edit-post/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`KeyboardShortcutHelpModal should match snapshot when the modal is active 1`] = ` - - + `; exports[`KeyboardShortcutHelpModal should match snapshot when the modal is not active 1`] = `""`; diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap index 733a2b82a410b..64724cbf81551 100644 --- a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`PreferencesModal should match snapshot when the modal is active large viewports 1`] = ` - - + `; exports[`PreferencesModal should match snapshot when the modal is active small viewports 1`] = ` - - + `; From 54d069229ad63f9b3bdd08e6909dcd3d5e397bfc Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 25 Nov 2021 10:24:05 +0100 Subject: [PATCH 09/10] Update packages/components/CHANGELOG.md Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com> --- packages/components/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 57c78d3155d60..44f7b5c70d0f8 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -13,7 +13,7 @@ - Fixed inconsistent padding in `UnitControl` ([#35646](https://github.com/WordPress/gutenberg/pull/35646)). - Added support for RTL behavior for the `ZStack`'s `offset` prop ([#36769](https://github.com/WordPress/gutenberg/pull/36769)) - Fixed race conditions causing conditionally displayed `ToolsPanelItem` components to be erroneously deregistered ([36588](https://github.com/WordPress/gutenberg/pull/36588)). -- Added `__experimentalHideHeader` prop to `Modal` component ([#36831](https://github.com/WordPress/gutenberg/pull/36831)). +- Added `__experimentalHideHeader` prop to `Modal` component ([#36831](https://github.com/WordPress/gutenberg/pull/36831)). ### Bug Fix From 88e558d5a5afd581af14748a3cb126496231861b Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 25 Nov 2021 10:24:18 +0100 Subject: [PATCH 10/10] Update packages/components/src/modal/test/index.js Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com> --- packages/components/src/modal/test/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/modal/test/index.js b/packages/components/src/modal/test/index.js index 412fb96331825..be41a91df3e00 100644 --- a/packages/components/src/modal/test/index.js +++ b/packages/components/src/modal/test/index.js @@ -49,7 +49,7 @@ describe( 'Modal', () => { it( 'hides the header when the `__experimentalHideHeader` prop is used', () => { render( - +

Modal content

 );