Change Create Menu UI to use a Card instead of Panel (#23150)

WordPress · Jun 16, 2020 · aad6af7 · aad6af7
1 parent 7f858e0
commit aad6af7
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 11 deletions.
diff --git a/...ponents/menus-editor/create-menu-panel.js → ...mponents/menus-editor/create-menu-area.js b/...ponents/menus-editor/create-menu-panel.js → ...mponents/menus-editor/create-menu-area.js
@@ -8,8 +8,9 @@ import { some } from 'lodash';
  */
 import {
 	Button,
-	Panel,
-	PanelBody,
+	Card,
+	CardHeader,
+	CardBody,
 	TextControl,
 	withFocusReturn,
 } from '@wordpress/components';
@@ -23,7 +24,7 @@ const noticeId = 'edit-navigation-create-menu-error';
 const menuNameMatches = ( menuName ) => ( menu ) =>
 	menu.name.toLowerCase() === menuName.toLowerCase();
 
-export function CreateMenuForm( { onCancel, onCreateMenu, menus } ) {
+export function CreateMenuArea( { onCancel, onCreateMenu, menus } ) {
 	const [ menuName, setMenuName ] = useState( '' );
 	const [ isCreatingMenu, setIsCreatingMenu ] = useState( false );
 	const menuSaveError = useSelect( ( select ) =>
@@ -92,8 +93,9 @@ export function CreateMenuForm( { onCancel, onCreateMenu, menus } ) {
 	);
 
 	return (
-		<Panel className="edit-navigation-menus-editor__create-menu-panel">
-			<PanelBody title={ __( 'Create navigation menu' ) }>
+		<Card className="edit-navigation-menus-editor__create-menu-area">
+			<CardHeader>{ __( 'Create navigation menu' ) }</CardHeader>
+			<CardBody>
 				<form onSubmit={ createMenu }>
 					<TextControl
 						// Disable reason - autoFocus is legitimate in this usage,
@@ -125,9 +127,9 @@ export function CreateMenuForm( { onCancel, onCreateMenu, menus } ) {
 						</Button>
 					) }
 				</form>
-			</PanelBody>
-		</Panel>
+			</CardBody>
+		</Card>
 	);
 }
 
-export default withFocusReturn( CreateMenuForm );
+export default withFocusReturn( CreateMenuArea );
diff --git a/packages/edit-navigation/src/components/menus-editor/index.js b/packages/edit-navigation/src/components/menus-editor/index.js
@@ -15,7 +15,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import CreateMenuPanel from './create-menu-panel';
+import CreateMenuArea from './create-menu-area';
 import MenuEditor from '../menu-editor';
 
 export default function MenusEditor( { blockEditorSettings } ) {
@@ -95,7 +95,7 @@ export default function MenusEditor( { blockEditorSettings } ) {
 				</CardBody>
 			</Card>
 			{ isCreateMenuPanelVisible && (
-				<CreateMenuPanel
+				<CreateMenuArea
 					menus={ stateMenus }
 					onCancel={
 						// User can only cancel out of menu creation if there

diff --git a/packages/edit-navigation/src/components/menus-editor/style.scss b/packages/edit-navigation/src/components/menus-editor/style.scss
@@ -46,7 +46,7 @@
 	margin: 0;
 }
 
-.edit-navigation-menus-editor__create-menu-panel {
+.edit-navigation-menus-editor__create-menu-area {
 	margin-bottom: 10px;
 }