From f15b4c19175da72843234cc6c862296ce9a4dcf8 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Thu, 7 Nov 2024 09:55:42 +0100
Subject: [PATCH] Fix inconsistent sidebars close buttons sizes (#66756)

* Increase complementary area and tabbed sidebar X close button size.

* Adjust widgets header actions right padding and gap.

* Adjust edit widgets list view X close button size.

Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: mikachan <mikachan@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
---
 .../block-editor/src/components/tabbed-sidebar/index.js    | 2 +-
 .../block-editor/src/components/tabbed-sidebar/style.scss  | 2 +-
 packages/edit-widgets/src/components/header/style.scss     | 7 ++++---
 .../src/components/secondary-sidebar/list-view-sidebar.js  | 2 +-
 .../src/components/secondary-sidebar/style.scss            | 2 +-
 packages/editor/src/components/sidebar/style.scss          | 4 +---
 .../src/components/complementary-area-header/style.scss    | 4 ++--
 .../interface/src/components/complementary-area/index.js   | 2 +-
 8 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/packages/block-editor/src/components/tabbed-sidebar/index.js b/packages/block-editor/src/components/tabbed-sidebar/index.js
index a0cb510c720904..c9ff6bbf6555f0 100644
--- a/packages/block-editor/src/components/tabbed-sidebar/index.js
+++ b/packages/block-editor/src/components/tabbed-sidebar/index.js
@@ -33,7 +33,7 @@ function TabbedSidebar(
 						icon={ closeSmall }
 						label={ closeButtonLabel }
 						onClick={ () => onClose() }
-						size="small"
+						size="compact"
 					/>
 
 					<Tabs.TabList
diff --git a/packages/block-editor/src/components/tabbed-sidebar/style.scss b/packages/block-editor/src/components/tabbed-sidebar/style.scss
index f7fba1c0003467..c6f8f14d6ca7c7 100644
--- a/packages/block-editor/src/components/tabbed-sidebar/style.scss
+++ b/packages/block-editor/src/components/tabbed-sidebar/style.scss
@@ -11,7 +11,7 @@
 	border-bottom: $border-width solid $gray-300;
 	display: flex;
 	justify-content: space-between;
-	padding-right: $grid-unit-15;
+	padding-right: $grid-unit-10;
 }
 
 
diff --git a/packages/edit-widgets/src/components/header/style.scss b/packages/edit-widgets/src/components/header/style.scss
index 7bd3c41a6a22ad..642a641e6e5952 100644
--- a/packages/edit-widgets/src/components/header/style.scss
+++ b/packages/edit-widgets/src/components/header/style.scss
@@ -94,12 +94,13 @@
 .edit-widgets-header__actions {
 	display: flex;
 	align-items: center;
-	padding-right: $grid-unit-20;
-	gap: $grid-unit-05;
+	padding-right: $grid-unit-05;
 
 	@include break-small() {
-		gap: $grid-unit-10;
+		padding-right: $grid-unit-10;
 	}
+
+	gap: $grid-unit-10;
 }
 
 .edit-widgets-header-toolbar {
diff --git a/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js
index 1bb850393ad023..fc645fd3bbd0d4 100644
--- a/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js
+++ b/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js
@@ -51,10 +51,10 @@ export default function ListViewSidebar() {
 			<div className="edit-widgets-editor__list-view-panel-header">
 				<strong>{ __( 'List View' ) }</strong>
 				<Button
-					__next40pxDefaultSize
 					icon={ closeSmall }
 					label={ __( 'Close' ) }
 					onClick={ closeListView }
+					size="compact"
 				/>
 			</div>
 			<div
diff --git a/packages/edit-widgets/src/components/secondary-sidebar/style.scss b/packages/edit-widgets/src/components/secondary-sidebar/style.scss
index 5acf945480a528..bcaf07d06e2224 100644
--- a/packages/edit-widgets/src/components/secondary-sidebar/style.scss
+++ b/packages/edit-widgets/src/components/secondary-sidebar/style.scss
@@ -21,5 +21,5 @@
 	justify-content: space-between;
 	height: $grid-unit-60;
 	padding-left: $grid-unit-20;
-	padding-right: $grid-unit-05;
+	padding-right: $grid-unit-10;
 }
diff --git a/packages/editor/src/components/sidebar/style.scss b/packages/editor/src/components/sidebar/style.scss
index 9853088dde1be7..33a2350b8a92e6 100644
--- a/packages/editor/src/components/sidebar/style.scss
+++ b/packages/editor/src/components/sidebar/style.scss
@@ -1,11 +1,9 @@
 .components-panel__header.editor-sidebar__panel-tabs {
 	padding-left: 0;
-	padding-right: $grid-unit-15;
+	padding-right: $grid-unit-10;
 
 	.components-button.has-icon {
 		padding: 0;
-		min-width: $icon-size;
-		height: $icon-size;
 
 		@include break-medium() {
 			display: flex;
diff --git a/packages/interface/src/components/complementary-area-header/style.scss b/packages/interface/src/components/complementary-area-header/style.scss
index c62fe7dc941760..d2ae1fe6ecda79 100644
--- a/packages/interface/src/components/complementary-area-header/style.scss
+++ b/packages/interface/src/components/complementary-area-header/style.scss
@@ -1,7 +1,7 @@
 .interface-complementary-area-header {
 	background: $white;
-	padding-right: $grid-unit-15; // Reduced padding to account for close buttons.
-	gap: $grid-unit-10; // Always ensure space between contents and close buttons.
+	padding-right: $grid-unit-10; // Reduced padding to account for close buttons.
+	gap: $grid-unit-05; // Always ensure space between contents and close buttons.
 
 	.interface-complementary-area-header__title {
 		margin: 0 auto 0 0;
diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js
index ff4c3eb1469789..af56cf0c1755e1 100644
--- a/packages/interface/src/components/complementary-area/index.js
+++ b/packages/interface/src/components/complementary-area/index.js
@@ -308,7 +308,7 @@ function ComplementaryArea( {
 					onClose={ () => disableComplementaryArea( scope ) }
 					toggleButtonProps={ {
 						label: closeLabel,
-						size: 'small',
+						size: 'compact',
 						shortcut: toggleShortcut,
 						scope,
 						identifier,