From a069976a6a765705628b25b0b3243c9a900f3bfa Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Tue, 9 Jul 2024 13:45:53 +0100
Subject: [PATCH 1/2] Dataviews List: Update item layout

---
 packages/dataviews/src/style.scss    | 51 +++++++++++++++++++++-------
 packages/dataviews/src/view-list.tsx | 13 ++++---
 2 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 35e7baa92d378..fa35449ee2b08 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -421,10 +421,24 @@
 		}
 
 		.dataviews-view-list__item-actions {
+			position: absolute;
+			top: $grid-unit-20;
+			right: 0;
+
+
+			> div {
+				height: $button-size-small;
+			}
+
 			.components-button {
 				opacity: 0;
-				position: fixed;
-				right: 0;
+			}
+		}
+
+		&:has(.dataviews-view-list__fields:empty) {
+			.dataviews-view-list__item-actions {
+				top: 50%;
+				transform: translateY(-50%);
 			}
 		}
 
@@ -432,16 +446,22 @@
 		&.is-hovered,
 		&:focus-within {
 			.dataviews-view-list__item-actions {
+				background: #f8f8f8;
+				padding-left: $grid-unit-10;
 				padding-right: $grid-unit-30;
+				box-shadow: -12px 0 8px 0 #f8f8f8;
 
 				.components-button {
 					opacity: 1;
 					position: static;
 				}
 			}
+		}
 
-			.dataviews-view-list__item {
-				padding-right: 0;
+		&.is-selected {
+			.dataviews-view-list__item-actions {
+				background-color: rgb(247 248 255);
+				box-shadow: -12px 0 8px 0 rgb(247 248 255);
 			}
 		}
 
@@ -477,7 +497,7 @@
 	}
 
 	.dataviews-view-list__item {
-		padding: $grid-unit-20 0 $grid-unit-20 $grid-unit-30;
+		padding: $grid-unit-20 $grid-unit-30;
 		width: 100%;
 		scroll-margin: $grid-unit-10 0;
 
@@ -494,15 +514,15 @@
 			}
 		}
 		.dataviews-view-list__primary-field {
-			min-height: $grid-unit-05 * 5;
-			line-height: $grid-unit-05 * 5;
+			min-height: $grid-unit-30;
+			line-height: $grid-unit-30;
 			overflow: hidden;
 		}
 	}
 
 	.dataviews-view-list__media-wrapper {
-		width: $grid-unit-50;
-		height: $grid-unit-50;
+		width: $grid-unit-05 * 13;
+		height: $grid-unit-05 * 13;
 		overflow: hidden;
 		position: relative;
 		flex-shrink: 0;
@@ -533,13 +553,22 @@
 		background-color: $gray-200;
 	}
 
+	.dataviews-view-list__field-wrapper {
+		min-height: $grid-unit-05 * 13; // Ensures title is centrally aligned when all fields are hidden
+	}
+
 	.dataviews-view-list__fields {
 		color: $gray-700;
 		display: flex;
 		gap: $grid-unit-10;
+		row-gap: $grid-unit-05;
 		flex-wrap: wrap;
 		font-size: 12px;
 
+		&:empty {
+			display: none;
+		}
+
 		.dataviews-view-list__field {
 			&:has(.dataviews-view-list__field-value:empty) {
 				display: none;
@@ -548,12 +577,8 @@
 
 		.dataviews-view-list__field-value {
 			line-height: $grid-unit-05 * 6;
-			display: inline-flex;
 		}
 	}
-	.dataviews-view-list__item-actions {
-		padding-right: $grid-unit-30;
-	}
 
 	& + .dataviews-pagination {
 		justify-content: space-between;
diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx
index 6a56f05e83202..3fd98c171bb74 100644
--- a/packages/dataviews/src/view-list.tsx
+++ b/packages/dataviews/src/view-list.tsx
@@ -152,7 +152,10 @@ function ListItem< Item >( {
 									<div className="dataviews-view-list__media-placeholder"></div>
 								) }
 							</div>
-							<VStack spacing={ 0 }>
+							<VStack
+								spacing={ 1 }
+								className="dataviews-view-list__field-wrapper"
+							>
 								<span
 									className="dataviews-view-list__primary-field"
 									id={ labelId }
@@ -186,7 +189,7 @@ function ListItem< Item >( {
 				</div>
 				{ eligibleActions?.length > 0 && (
 					<HStack
-						spacing={ 1 }
+						spacing={ 3 }
 						justify="flex-end"
 						className="dataviews-view-list__item-actions"
 						style={ {
@@ -205,7 +208,7 @@ function ListItem< Item >( {
 											isDestructive={
 												primaryAction.isDestructive
 											}
-											size="compact"
+											size="small"
 											onClick={ () =>
 												setIsModalOpen( true )
 											}
@@ -236,7 +239,7 @@ function ListItem< Item >( {
 												isDestructive={
 													primaryAction.isDestructive
 												}
-												size="compact"
+												size="small"
 												onClick={ () => {
 													primaryAction.callback(
 														[ item ],
@@ -255,7 +258,7 @@ function ListItem< Item >( {
 										store={ store }
 										render={
 											<Button
-												size="compact"
+												size="small"
 												icon={ moreVertical }
 												label={ __( 'Actions' ) }
 												accessibleWhenDisabled

From d48f81ea02713a6f336af0b40bb078779a21daf0 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Tue, 9 Jul 2024 13:53:36 +0100
Subject: [PATCH 2/2] margin

---
 packages/dataviews/src/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index fa35449ee2b08..d3296f65b7194 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -448,7 +448,7 @@
 			.dataviews-view-list__item-actions {
 				background: #f8f8f8;
 				padding-left: $grid-unit-10;
-				padding-right: $grid-unit-30;
+				margin-right: $grid-unit-30;
 				box-shadow: -12px 0 8px 0 #f8f8f8;
 
 				.components-button {