From ac7670c719335ff554f169d26f61538af1d26bc6 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Mon, 15 Jun 2020 14:35:18 +0800
Subject: [PATCH] Change Create Menu UI to use a Card instead of Panel

---
 ...reate-menu-panel.js => create-menu-area.js} | 18 ++++++++++--------
 .../src/components/menus-editor/index.js       |  4 ++--
 .../src/components/menus-editor/style.scss     |  2 +-
 3 files changed, 13 insertions(+), 11 deletions(-)
 rename packages/edit-navigation/src/components/menus-editor/{create-menu-panel.js => create-menu-area.js} (91%)

diff --git a/packages/edit-navigation/src/components/menus-editor/create-menu-panel.js b/packages/edit-navigation/src/components/menus-editor/create-menu-area.js
similarity index 91%
rename from packages/edit-navigation/src/components/menus-editor/create-menu-panel.js
rename to packages/edit-navigation/src/components/menus-editor/create-menu-area.js
index 027b8a1823fb9..01b83bcb2c6e4 100644
--- a/packages/edit-navigation/src/components/menus-editor/create-menu-panel.js
+++ b/packages/edit-navigation/src/components/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
index 51120900bc303..04507772174cb 100644
--- 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
index c973ec619c54c..4609d50c0c959 100644
--- 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;
 }