Data views: Unbox items in grid layout (#61159)

Co-authored-by: jameskoster <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: jasmussen <[email protected]>
WordPress · Apr 29, 2024 · cbdf540 · cbdf540
1 parent cf7e1ea
commit cbdf540
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 16 deletions.
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
@@ -292,41 +292,54 @@
 	}
 
 	.dataviews-view-grid__card {
-		border-radius: $radius-block-ui * 2;
-		border: 1px solid $gray-200;
 		height: 100%;
 		justify-content: flex-start;
 
 		.dataviews-view-grid__title-actions {
-			padding: $grid-unit-05 $grid-unit $grid-unit-05 $grid-unit-05;
+			padding: $grid-unit-10 0 $grid-unit-05;
 		}
 
 		.dataviews-view-grid__primary-field {
-			min-height: $grid-unit-50;
+			min-height: $grid-unit-40; // Preserve layout when there is no ellipsis button
 		}
-		&.is-selected {
-			border-color: var(--wp-admin-theme-color);
-			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 
+		&.is-selected {
 			.dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
 				color: $gray-900;
 			}
+
+			.page-pages-preview-field__button::after {
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+				background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+			}
 		}
 	}
 
 	.dataviews-view-grid__media {
 		width: 100%;
 		min-height: 200px;
 		aspect-ratio: 1/1;
-		border-bottom: 1px solid $gray-200;
 		background-color: $gray-100;
-		border-radius: 3px 3px 0 0;
+		border-radius: $grid-unit-05;
+		overflow: hidden;
+		position: relative;
 
 		img {
 			object-fit: cover;
 			width: 100%;
 			height: 100%;
 		}
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);
+			border-radius: $grid-unit-05;
+		}
 	}
 
 	.dataviews-view-grid__fields {
@@ -337,7 +350,6 @@
 		&:not(:empty) {
 			padding: $grid-unit-15 0;
 			padding-top: 0;
-			margin: 0 $grid-unit-15;
 		}
 
 		.dataviews-view-grid__field {
@@ -366,8 +378,7 @@
 
 	.dataviews-view-grid__badge-fields {
 		&:not(:empty) {
-			padding: $grid-unit-15;
-			padding-top: 0;
+			padding-bottom: $grid-unit-15;
 		}
 
 		.dataviews-view-grid__field-value {
@@ -555,10 +566,6 @@
 	flex-shrink: 0;
 }
 
-.dataviews-view-grid__title-actions .dataviews-view-table-selection-checkbox {
-	margin-left: $grid-unit-10;
-}
-
 .dataviews-filter-summary__popover {
 	.components-popover__content {
 		width: 230px;

diff --git a/packages/edit-site/src/components/page-pages/style.scss b/packages/edit-site/src/components/page-pages/style.scss
@@ -50,4 +50,15 @@
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;
 	}
+
+	// Make the button targetable for clicks
+	&::after {
+		content: "";
+		height: 100%;
+		left: 0;
+		position: absolute;
+		top: 0;
+		width: 100%;
+		z-index: 1;
+	}
 }