From 219be48235dd578496a64dae53757182a5571a96 Mon Sep 17 00:00:00 2001
From: Hit Bhalodia <58802366+hbhalodia@users.noreply.github.com>
Date: Fri, 6 Sep 2024 21:12:14 +0530
Subject: [PATCH] Fix: Button: Replace remaining 40px default size violation
 [Block library] (#65075)

* Fix navigation-link block to use button to default 40px size

* Fix navigation deleted create new menu button to use 40px default size

* Fix navigation overlay menu icon button to use 40px default size

* Fix the navigation menu delete button to use 40px default size button

* Fix navigation placeholder start empty to use button as default 40px size

* Fix responsive navigation overlay menu open button to use default 40px size

* Fix navigation responsive close button to use 40px default size

* Add the !important to override the overlay menu preview style

Ref - https://github.com/WordPress/gutenberg/pull/65075#discussion_r1746282734

* Refactor the comment for the !important style

Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
---
 packages/block-library/src/navigation-link/link-ui.js       | 3 +--
 .../src/navigation/edit/deleted-navigation-warning.js       | 3 +--
 packages/block-library/src/navigation/edit/index.js         | 3 +--
 .../src/navigation/edit/navigation-menu-delete-control.js   | 3 +--
 .../block-library/src/navigation/edit/placeholder/index.js  | 3 +--
 .../block-library/src/navigation/edit/responsive-wrapper.js | 6 ++----
 packages/block-library/src/navigation/editor.scss           | 6 +++++-
 7 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/packages/block-library/src/navigation-link/link-ui.js b/packages/block-library/src/navigation-link/link-ui.js
index 1d30384364447..ee238c71ed28e 100644
--- a/packages/block-library/src/navigation-link/link-ui.js
+++ b/packages/block-library/src/navigation-link/link-ui.js
@@ -310,8 +310,7 @@ const LinkUITools = ( { setAddingBlock, focusAddBlockButton } ) => {
 	return (
 		<VStack className="link-ui-tools">
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				__next40pxDefaultSize
 				ref={ addBlockButtonRef }
 				icon={ plus }
 				onClick={ ( e ) => {
diff --git a/packages/block-library/src/navigation/edit/deleted-navigation-warning.js b/packages/block-library/src/navigation/edit/deleted-navigation-warning.js
index 8950a700ace51..b0521f16cfb5d 100644
--- a/packages/block-library/src/navigation/edit/deleted-navigation-warning.js
+++ b/packages/block-library/src/navigation/edit/deleted-navigation-warning.js
@@ -16,8 +16,7 @@ function DeletedNavigationWarning( { onCreateNew } ) {
 				{
 					button: (
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize
 							onClick={ onCreateNew }
 							variant="link"
 						/>
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index c9ce17eea6b1a..ae7dd60bd0c5b 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -591,8 +591,7 @@ function Navigation( {
 						{ isResponsive && (
 							<>
 								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
+									__next40pxDefaultSize
 									className={ overlayMenuPreviewClasses }
 									onClick={ () => {
 										setOverlayMenuPreview(
diff --git a/packages/block-library/src/navigation/edit/navigation-menu-delete-control.js b/packages/block-library/src/navigation/edit/navigation-menu-delete-control.js
index a75ad1dd00cce..e95e07ab778c2 100644
--- a/packages/block-library/src/navigation/edit/navigation-menu-delete-control.js
+++ b/packages/block-library/src/navigation/edit/navigation-menu-delete-control.js
@@ -19,8 +19,7 @@ export default function NavigationMenuDeleteControl( { onDelete } ) {
 	return (
 		<>
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				__next40pxDefaultSize
 				className="wp-block-navigation-delete-menu-button"
 				variant="secondary"
 				isDestructive
diff --git a/packages/block-library/src/navigation/edit/placeholder/index.js b/packages/block-library/src/navigation/edit/placeholder/index.js
index f4d01b73e1fbb..7b989de1490af 100644
--- a/packages/block-library/src/navigation/edit/placeholder/index.js
+++ b/packages/block-library/src/navigation/edit/placeholder/index.js
@@ -76,8 +76,7 @@ export default function NavigationPlaceholder( {
 
 						{ canUserCreateNavigationMenus && (
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize
 								variant="tertiary"
 								onClick={ onCreateEmpty }
 							>
diff --git a/packages/block-library/src/navigation/edit/responsive-wrapper.js b/packages/block-library/src/navigation/edit/responsive-wrapper.js
index 328152723026f..886e808965ce4 100644
--- a/packages/block-library/src/navigation/edit/responsive-wrapper.js
+++ b/packages/block-library/src/navigation/edit/responsive-wrapper.js
@@ -79,8 +79,7 @@ export default function ResponsiveWrapper( {
 		<>
 			{ ! isOpen && (
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					aria-haspopup="true"
 					aria-label={ hasIcon && __( 'Open menu' ) }
 					className={ openButtonClasses }
@@ -102,8 +101,7 @@ export default function ResponsiveWrapper( {
 				>
 					<div { ...dialogProps }>
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize
 							className="wp-block-navigation__responsive-container-close"
 							aria-label={ hasIcon && __( 'Close menu' ) }
 							onClick={ () => onToggle( false ) }
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index a8d135656e44a..1d37186e4ae98 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -563,7 +563,11 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 	width: 100%;
 	background-color: $gray-100;
 	padding: 0 $grid-unit-30;
-	height: $grid-unit-40 * 2;
+
+	// Adding !important to override default 40px size.
+	// Ref - https://github.com/WordPress/gutenberg/pull/65075#discussion_r1746282734
+	height: $grid-unit-40 * 2 !important;
+
 	margin-bottom: $grid-unit-15;
 
 	&.open {