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>
WordPress · Nov 7, 2024 · f15b4c1 · f15b4c1
1 parent 8be8e46
commit f15b4c1
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -308,7 +308,7 @@ function ComplementaryArea( {
 					onClose={ () => disableComplementaryArea( scope ) }
 					toggleButtonProps={ {
 						label: closeLabel,
-						size: 'small',
+						size: 'compact',
 						shortcut: toggleShortcut,
 						scope,
 						identifier,