Navigation Screen: Display error notice inside modal (#34884)

WordPress · Sep 17, 2021 · dc271ff · dc271ff
1 parent 44ed70a
commit dc271ff
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 12 deletions.
diff --git a/packages/edit-navigation/src/components/add-menu/index.js b/packages/edit-navigation/src/components/add-menu/index.js
@@ -9,7 +9,7 @@ import classnames from 'classnames';
  */
 import { useState } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
-import { TextControl, Button } from '@wordpress/components';
+import { Button, TextControl, withNotices } from '@wordpress/components';
 import { useFocusOnMount } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
@@ -18,22 +18,23 @@ import { store as coreStore } from '@wordpress/core-data';
 const menuNameMatches = ( menuName ) => ( menu ) =>
 	menu.name.toLowerCase() === menuName.toLowerCase();
 
-export default function AddMenu( {
+function AddMenu( {
 	className,
 	menus,
 	onCreate,
 	titleText,
 	helpText,
 	focusInputOnMount = false,
+	noticeUI,
+	noticeOperations,
 } ) {
+	const inputRef = useFocusOnMount( focusInputOnMount );
 	const [ menuName, setMenuName ] = useState( '' );
-	const { createErrorNotice, createInfoNotice, removeNotice } = useDispatch(
-		noticesStore
-	);
 	const [ isCreatingMenu, setIsCreatingMenu ] = useState( false );
+	const { createInfoNotice } = useDispatch( noticesStore );
 	const { saveMenu } = useDispatch( coreStore );
 
-	const inputRef = useFocusOnMount( focusInputOnMount );
+	const { createErrorNotice, removeAllNotices } = noticeOperations;
 
 	const createMenu = async ( event ) => {
 		event.preventDefault();
@@ -42,8 +43,8 @@ export default function AddMenu( {
 			return;
 		}
 
-		// Remove any existing notices so duplicates aren't created.
-		removeNotice( 'edit-navigation-error' );
+		// Remove any existing notices.
+		removeAllNotices();
 
 		if ( some( menus, menuNameMatches( menuName ) ) ) {
 			const message = sprintf(
@@ -53,7 +54,7 @@ export default function AddMenu( {
 				),
 				menuName
 			);
-			createErrorNotice( message, { id: 'edit-navigation-error' } );
+			createErrorNotice( message );
 			return;
 		}
 
@@ -79,6 +80,7 @@ export default function AddMenu( {
 			className={ classnames( 'edit-navigation-add-menu', className ) }
 			onSubmit={ createMenu }
 		>
+			{ noticeUI }
 			{ titleText && (
 				<h3 className="edit-navigation-add-menu__title">
 					{ titleText }
@@ -104,3 +106,5 @@ export default function AddMenu( {
 		</form>
 	);
 }
+
+export default withNotices( AddMenu );
diff --git a/packages/edit-navigation/src/components/add-menu/style.scss b/packages/edit-navigation/src/components/add-menu/style.scss
@@ -1,6 +1,25 @@
 .edit-navigation-add-menu {
 	display: flex;
 	flex-direction: column;
+
+	// Notices.
+	.components-with-notices-ui {
+		margin-bottom: $grid-unit-20;
+
+		// Notice is too big with default styles.
+		.components-notice {
+			margin: 0;
+			padding: $grid-unit-10 $grid-unit-15;
+		}
+
+		.components-notice__content {
+			margin: 0;
+		}
+
+		.components-notice__dismiss {
+			align-self: center;
+		}
+	}
 }
 
 .edit-navigation-add-menu__title {

diff --git a/packages/edit-navigation/src/components/header/new-button.js b/packages/edit-navigation/src/components/header/new-button.js
@@ -23,6 +23,7 @@ export default function NewButton( { menus } ) {
 			{ isModalOpen && (
 				<Modal
 					title={ __( 'Create a new menu' ) }
+					className="edit-navigation-menu-switcher__modal"
 					onRequestClose={ () => setIsModalOpen( false ) }
 				>
 					<AddMenu

diff --git a/packages/edit-navigation/src/components/menu-switcher/index.js b/packages/edit-navigation/src/components/menu-switcher/index.js
@@ -57,10 +57,10 @@ export default function MenuSwitcher( {
 				{ isModalVisible && (
 					<Modal
 						title={ __( 'Create a new menu' ) }
+						className="edit-navigation-menu-switcher__modal"
 						onRequestClose={ closeModal }
 					>
 						<AddMenu
-							className="edit-navigation-menu-switcher__add-menu"
 							menus={ menus }
 							onCreate={ ( menuId ) => {
 								closeModal();

diff --git a/packages/edit-navigation/src/components/menu-switcher/style.scss b/packages/edit-navigation/src/components/menu-switcher/style.scss
@@ -1,3 +1,3 @@
-.edit-navigation-header__add-menu {
-	min-width: 220px;
+.edit-navigation-menu-switcher__modal {
+	max-width: 400px;
 }