Fix inconsistent complementary header styles (#61331)

* Use compact buttons, proper gap * Reuse existing class for heading * Remove unused class * Remove unnecessary negative margin top * Use small variant for close in complementary area * Remove unused styles * Emulate 'compact' button size, as Dropdown does not support it * Reduce padding right to account for close buttons holistically * Remove targeted padding right * Add default gap between controls in complementary header * Remove negative margin override, no longer necessary * Only make the close icon small * Use same font weight as tabs for complementary area * Use compact pin/unpin button * Revert "Reuse existing class for heading" This reverts commit e231cb5. * Add back the style * Pass toggleProps compact size * Tweak inline comment. Co-authored-by: Marin Atanasov <[email protected]> * Remove unnecessary - margin top --------- Co-authored-by: richtabor <[email protected]> Co-authored-by: stokesman <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: tyxla <[email protected]>
WordPress · May 8, 2024 · 61659a3 · 61659a3
1 parent 41c6b1a
commit 61659a3
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 27 deletions.
diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss
@@ -12,7 +12,3 @@
 		}
 	}
 }
-
-.edit-post-sidebar__panel {
-	margin-top: -1px;
-}
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
@@ -76,7 +76,11 @@ function GlobalStylesActionMenu() {
 
 	return (
 		<GlobalStylesMenuFill>
-			<DropdownMenu icon={ moreVertical } label={ __( 'More' ) }>
+			<DropdownMenu
+				icon={ moreVertical }
+				label={ __( 'More' ) }
+				toggleProps={ { size: 'compact' } }
+			>
 				{ ( { onClose } ) => (
 					<>
 						<MenuGroup>

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js
@@ -136,7 +136,10 @@ export default function GlobalStylesSidebar() {
 			closeLabel={ __( 'Close Styles' ) }
 			panelClassName="edit-site-global-styles-sidebar__panel"
 			header={
-				<Flex className="edit-site-global-styles-sidebar__header">
+				<Flex
+					className="edit-site-global-styles-sidebar__header"
+					gap={ 1 }
+				>
 					<FlexBlock style={ { minWidth: 'min-content' } }>
 						<h2 className="edit-site-global-styles-sidebar__header-title">
 							{ __( 'Styles' ) }
@@ -151,6 +154,7 @@ export default function GlobalStylesSidebar() {
 							}
 							disabled={ shouldClearCanvasContainerView }
 							onClick={ toggleStyleBook }
+							size="compact"
 						/>
 					</FlexItem>
 					<FlexItem>
@@ -162,6 +166,7 @@ export default function GlobalStylesSidebar() {
 							isPressed={
 								isRevisionsOpened || isRevisionsStyleBookOpened
 							}
+							size="compact"
 						/>
 					</FlexItem>
 					<GlobalStylesMenuSlot />

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/settings-header/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/settings-header/style.scss
@@ -1,6 +1,5 @@
 .components-panel__header.edit-site-sidebar-edit-mode__panel-tabs {
 	padding-left: 0;
-	padding-right: $grid-unit-20;
 
 	.components-button.has-icon {
 		padding: 0;

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/style.scss
@@ -38,14 +38,6 @@
 	margin: 0;
 }
 
-.edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon {
-	margin-left: 0;
-}
-
-.edit-site-global-styles-sidebar__reset-button.components-button {
-	margin-left: auto;
-}
-
 .edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
 	font-size: $default-font-size * 1.2;
 	font-weight: 500;
@@ -104,6 +96,3 @@
 	}
 }
 
-.edit-site-sidebar__panel {
-	margin-top: -1px;
-}
diff --git a/packages/interface/src/components/complementary-area-header/style.scss b/packages/interface/src/components/complementary-area-header/style.scss
@@ -17,7 +17,8 @@
 
 .interface-complementary-area-header {
 	background: $white;
-	padding-right: $grid-unit-05;
+	padding-right: $grid-unit-15; // Reduced padding to account for close buttons.
+	gap: $grid-unit-10; // Always ensure space between contents and close buttons.
 
 	.interface-complementary-area-header__title {
 		margin: 0;
@@ -36,11 +37,3 @@
 		}
 	}
 }
-
-// This overrides the negative margins between two consecutives panels.
-// since the first panel is hidden.
-.components-panel__header + .interface-complementary-area-header {
-	@include break-medium() {
-		margin-top: 0;
-	}
-}
diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js
@@ -302,6 +302,7 @@ function ComplementaryArea( {
 					smallScreenTitle={ smallScreenTitle }
 					toggleButtonProps={ {
 						label: closeLabel,
+						size: 'small',
 						shortcut: toggleShortcut,
 						scope,
 						identifier,
@@ -329,6 +330,7 @@ function ComplementaryArea( {
 									}
 									isPressed={ isPinned }
 									aria-expanded={ isPinned }
+									size="compact"
 								/>
 							) }
 						</>

diff --git a/packages/interface/src/components/complementary-area/style.scss b/packages/interface/src/components/complementary-area/style.scss
@@ -39,6 +39,7 @@
 
 	h2 {
 		font-size: $default-font-size;
+		font-weight: 500;
 		color: $gray-900;
 		margin-bottom: 1.5em;
 	}
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,7 +12,3 @@ @@
     		}
     	}
     }
-    .edit-post-sidebar__panel {
-    	margin-top: -1px;
-    }