Make post meta row button treatment consistent (WordPress#61954)

Co-authored-by: jameskoster <[email protected]> Co-authored-by: ntsekouras <[email protected]> Co-authored-by: jasmussen <[email protected]>
patil-vipul · Jun 17, 2024 · 94aa255 · 94aa255
1 parent 2fdc677
commit 94aa255
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 25 deletions.
diff --git a/packages/editor/src/components/post-discussion/panel.js b/packages/editor/src/components/post-discussion/panel.js
@@ -6,7 +6,6 @@ import {
 	Dropdown,
 	Button,
 	__experimentalVStack as VStack,
-	__experimentalText as Text,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useState, useMemo } from '@wordpress/element';
@@ -81,7 +80,7 @@ function PostDiscussionToggle( { isOpen, onClick } ) {
 			aria-expanded={ isOpen }
 			onClick={ onClick }
 		>
-			<Text>{ label }</Text>
+			{ label }
 		</Button>
 	);
 }

diff --git a/packages/editor/src/components/post-discussion/style.scss b/packages/editor/src/components/post-discussion/style.scss
@@ -13,9 +13,7 @@
 	}
 }
 .editor-post-discussion__panel-toggle {
-	&.components-button {
-		height: auto;
-	}
+
 	.components-text {
 		color: inherit;
 	}

diff --git a/packages/editor/src/components/post-panel-row/style.scss b/packages/editor/src/components/post-panel-row/style.scss
@@ -11,11 +11,26 @@
 	min-height: $grid-unit-40;
 	display: flex;
 	align-items: center;
+	padding: 6px 0; // Matches button to ensure alignment
+	line-height: $grid-unit-05 * 5;
+	hyphens: auto;
 }
 
 .editor-post-panel__row-control {
 	flex-grow: 1;
 	min-height: $grid-unit-40;
 	display: flex;
 	align-items: center;
+
+	.components-button {
+		max-width: 100%;
+		text-align: left;
+		text-wrap: pretty;
+		height: auto;
+		min-height: $button-size-compact;
+	}
+
+	.components-dropdown {
+		max-width: 100%;
+	}
 }
diff --git a/packages/editor/src/components/post-schedule/style.scss b/packages/editor/src/components/post-schedule/style.scss
@@ -8,14 +8,3 @@
 		padding: $grid-unit-20;
 	}
 }
-
-.editor-post-schedule__dialog-toggle.components-button {
-	overflow: hidden;
-	text-align: left;
-	white-space: unset;
-	height: auto;
-	min-height: $button-size-compact;
-
-	// The line height + the padding should be the same as the button size.
-	line-height: inherit;
-}
diff --git a/packages/editor/src/components/post-url/style.scss b/packages/editor/src/components/post-url/style.scss
@@ -2,15 +2,6 @@
 	width: 100%;
 }
 
-.components-button.editor-post-url__panel-toggle {
-	display: block;
-	max-width: 100%;
-	overflow: hidden;
-	text-align: left;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
 .editor-post-url__panel-dialog .editor-post-url {
 	// sidebar width - popover padding - form margin
 	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;