Dataviews List: Update item layout (#63299)

Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org>
WordPress · Jul 10, 2024 · 73719c4 · 73719c4
1 parent 4f706f1
commit 73719c4
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 19 deletions.
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
@@ -421,27 +421,47 @@
 		}
 
 		.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%);
 			}
 		}
 
 		&.is-selected,
 		&.is-hovered,
 		&:focus-within {
 			.dataviews-view-list__item-actions {
-				padding-right: $grid-unit-30;
+				background: #f8f8f8;
+				padding-left: $grid-unit-10;
+				margin-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
@@ -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