Update list layout action styling (WordPress#61797)

Co-authored-by: jameskoster <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: keoshi <[email protected]>
carstingaxion · May 24, 2024 · e2f1516 · e2f1516
1 parent 4af3817
commit e2f1516
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 15 deletions.
diff --git a/packages/components/src/dropdown-menu-v2/test/index.tsx b/packages/components/src/dropdown-menu-v2/test/index.tsx
@@ -54,9 +54,14 @@ describe( 'DropdownMenu', () => {
 
 		expect( toggleButton ).toHaveAttribute( 'aria-expanded', 'true' );
 
-		expect(
-			screen.getByRole( 'menu', { name: toggleButton.textContent ?? '' } )
-		).toHaveFocus();
+		await waitFor( () =>
+			expect(
+				screen.getByRole( 'menu', {
+					name: toggleButton.textContent ?? '',
+				} )
+			).toHaveFocus()
+		);
+
 		expect( screen.getByRole( 'separator' ) ).toHaveAttribute(
 			'aria-orientation',
 			'horizontal'

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
@@ -428,15 +428,27 @@
 			}
 		}
 
-		.dataviews-view-list__item-actions .components-button {
-			opacity: 0;
+		.dataviews-view-list__item-actions {
+			.components-button {
+				opacity: 0;
+				position: fixed;
+			}
 		}
 
 		&.is-selected,
 		&.is-hovered,
 		&:focus-within {
-			.dataviews-view-list__item-actions .components-button {
-				opacity: 1;
+			.dataviews-view-list__item-actions {
+				padding-right: $grid-unit-40;
+
+				.components-button {
+					opacity: 1;
+					position: static;
+				}
+			}
+
+			.dataviews-view-list__item {
+				padding-right: 0;
 			}
 		}
 
@@ -465,8 +477,7 @@
 			color: $gray-900;
 
 			.dataviews-view-list__primary-field,
-			.dataviews-view-list__fields,
-			.components-button {
+			.dataviews-view-list__fields {
 				color: var(--wp-admin-theme-color);
 			}
 		}
@@ -491,6 +502,7 @@
 		}
 		.dataviews-view-list__primary-field {
 			min-height: $grid-unit-05 * 5;
+			line-height: $grid-unit-05 * 5;
 			overflow: hidden;
 		}
 	}
@@ -534,17 +546,19 @@
 		gap: $grid-unit-10;
 		flex-wrap: wrap;
 		font-size: 12px;
-		line-height: $grid-unit-20;
 
 		.dataviews-view-list__field {
 			&:has(.dataviews-view-list__field-value:empty) {
 				display: none;
 			}
 		}
-	}
 
+		.dataviews-view-list__field-value {
+			line-height: $grid-unit-05 * 5;
+			display: inline-flex;
+		}
+	}
 	.dataviews-view-list__item-actions {
-		padding-top: $grid-unit-20;
 		padding-right: $grid-unit-30;
 	}
 

diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx
@@ -129,7 +129,8 @@ function ListItem< Item extends AnyItem >( {
 		>
 			<HStack
 				className="dataviews-view-list__item-wrapper"
-				alignment="top"
+				alignment="center"
+				spacing={ 0 }
 			>
 				<div role="gridcell">
 					<CompositeItem
@@ -153,7 +154,7 @@ function ListItem< Item extends AnyItem >( {
 									<div className="dataviews-view-list__media-placeholder"></div>
 								) }
 							</div>
-							<VStack spacing={ 1 }>
+							<VStack spacing={ 0 }>
 								<span
 									className="dataviews-view-list__primary-field"
 									id={ labelId }

diff --git a/packages/edit-site/src/components/page-pages/style.scss b/packages/edit-site/src/components/page-pages/style.scss
@@ -60,7 +60,7 @@
 .edit-site-page-pages__title-badge {
 	background: $gray-100;
 	color: $gray-700;
-	padding: $grid-unit-05 $grid-unit-10;
+	padding: 0 $grid-unit-05;
 	border-radius: $radius-block-ui;
 	font-size: 12px;
 	font-weight: 400;