@wordpress/dataviews 14.3.0 → 15.0.0

package/src/components/dataviews-item-actions/style.scss

@@ -1,5 +1,3 @@
-@use "@wordpress/base-styles/variables" as *;
-@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/z-index" as *;
 
 .dataviews-action-modal {
@@ -10,5 +8,5 @@
 // from wordpress/ui package, but we're not ready to use it yet.
 // See https://github.com/WordPress/gutenberg/pull/75721/
 .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
-	padding: 0 $grid-unit-05;
+	padding: 0 var(--wpds-dimension-padding-xs);
 }

package/src/components/dataviews-layouts/activity/style.scss

@@ -1,21 +1,19 @@
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/variables" as *;
 @use "../../../dataviews/style" as *;
 
 .dataviews-view-activity {
 	margin: 0 0 auto;
-	padding: 0 $grid-unit-30;
+	padding: 0 var(--wpds-dimension-padding-2xl);
 
 	.dataviews-view-activity__group-header {
-		font-size: $font-size-large;
-		font-weight: $font-weight-medium;
-		color: $gray-600;
-		margin: 0 0 $grid-unit-10 0;
+		font-size: var(--wpds-typography-font-size-lg);
+		font-weight: var(--wpds-typography-font-weight-medium);
+		color: var(--wpds-color-fg-content-neutral-weak);
+		margin: 0 0 var(--wpds-dimension-gap-sm) 0;
 		padding: 0;
 	}
 
 	.dataviews-view-activity__item-actions {
-		min-width: $grid-unit-30;
+		min-width: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
 	}
 
 	.dataviews-view-activity__item-content {
@@ -24,7 +22,7 @@
 		.dataviews-view-activity__item-title,
 		.dataviews-view-activity__item-description,
 		.dataviews-view-activity__item-fields {
-			min-height: $grid-unit-20;
+			min-height: calc(var(--wpds-dimension-base) * 4); // TODO: use size token when available
 		}
 
 		.dataviews-view-activity__item-title {
@@ -38,9 +36,9 @@
 				cursor: var(--wpds-cursor-control);
 
 				&:focus-visible {
-					outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
+					outline: var(--wp-admin-border-width-focus) solid var(--wpds-color-stroke-focus-brand);
 					outline-offset: var(--wp-admin-border-width-focus);
-					border-radius: $radius-small;
+					border-radius: var(--wpds-border-radius-sm);
 				}
 			}
 		}
@@ -57,10 +55,10 @@
 		}
 
 		.dataviews-view-activity__item-fields {
-			color: $gray-700;
+			color: var(--wpds-color-fg-content-neutral-weak);
 			display: flex;
-			gap: $grid-unit-15;
-			row-gap: $grid-unit-05;
+			gap: var(--wpds-dimension-gap-md);
+			row-gap: var(--wpds-dimension-gap-xs);
 			flex-wrap: wrap;
 
 			&:empty {
@@ -89,7 +87,7 @@
 			flex: 1 1 auto;
 			width: 1px;
 			margin: 0 auto;
-			background-color: $gray-300;
+			background-color: var(--wpds-color-stroke-surface-neutral);
 		}
 
 		&::before {
@@ -97,69 +95,69 @@
 			flex: 0 0 auto;
 			width: 1px;
 			margin: 0 auto;
-			background-color: $gray-300;
+			background-color: var(--wpds-color-stroke-surface-neutral);
 		}
 	}
 
 	.dataviews-view-activity__item {
 		&.is-compact {
 			.dataviews-view-activity__item-type {
-				width: $grid-unit-15;
+				width: var(--wpds-dimension-padding-md);
 
 				&::before {
-					height: $grid-unit-15;
+					height: calc(var(--wpds-dimension-base) * 3);
 				}
 			}
 			.dataviews-view-activity__item-type-icon {
-				width: calc($grid-unit-15 - 1px);
-				height: calc($grid-unit-15 - 1px);
+				width: calc(var(--wpds-dimension-base) * 3 - 1px);
+				height: calc(var(--wpds-dimension-base) * 3 - 1px);
 			}
 			.dataviews-view-activity__item-content {
-				margin: $grid-unit-15 0;
+				margin: var(--wpds-dimension-gap-md) 0;
 			}
 		}
 
 		&.is-balanced {
 			.dataviews-view-activity__item-type {
-				width: $grid-unit-30;
+				width: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
 
 				&::before {
-					height: $grid-unit-15;
+					height: calc(var(--wpds-dimension-base) * 3);
 				}
 			}
 			.dataviews-view-activity__item-type-icon {
-				width: calc($grid-unit-30 + 1px);
-				height: calc($grid-unit-30 + 1px);
+				width: calc(var(--wpds-dimension-base) * 6 + 1px);
+				height: calc(var(--wpds-dimension-base) * 6 + 1px);
 			}
 			.dataviews-view-activity__item-content {
-				margin: $grid-unit-15 0;
-				padding-top: $grid-unit-10;
+				margin: var(--wpds-dimension-gap-md) 0;
+				padding-top: var(--wpds-dimension-padding-sm);
 			}
 		}
 
 		&.is-comfortable {
 			.dataviews-view-activity__item-type {
-				width: $grid-unit-40;
+				width: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
 
 				&::before {
-					height: $grid-unit-10;
+					height: calc(var(--wpds-dimension-base) * 2);
 				}
 			}
 			.dataviews-view-activity__item-type-icon {
-				width: calc($grid-unit-40 + 1px);
-				height: calc($grid-unit-40 + 1px);
+				width: calc(var(--wpds-dimension-base) * 8 + 1px);
+				height: calc(var(--wpds-dimension-base) * 8 + 1px);
 			}
 			.dataviews-view-activity__item-content {
-				margin: $grid-unit-10 0 $grid-unit-20;
-				padding-top: $grid-unit-15;
+				margin: var(--wpds-dimension-gap-sm) 0 var(--wpds-dimension-gap-lg);
+				padding-top: var(--wpds-dimension-padding-md);
 			}
 		}
 
 		&.is-comfortable,
 		&.is-balanced {
 			.dataviews-view-activity__item-bullet {
-				width: calc($grid-unit-10 + 1px);
-				height: calc($grid-unit-10 + 1px);
+				width: calc(var(--wpds-dimension-base) * 2 + 1px);
+				height: calc(var(--wpds-dimension-base) * 2 + 1px);
 				position: relative;
 				top: 50%;
 				transform: translateY(-50%);
@@ -179,7 +177,7 @@
 	& > .dataviews-view-activity__item:last-child {
 		.dataviews-view-activity__item-type {
 			&::after {
-				background: linear-gradient(to bottom, $gray-300 0%, rgba($gray-300, 0.2) 60%, rgba($gray-300, 0) 100%);
+				background: linear-gradient(to bottom, var(--wpds-color-stroke-surface-neutral) 0%, color-mix(in srgb, var(--wpds-color-stroke-surface-neutral) 20%, transparent) 60%, transparent 100%);
 			}
 		}
 	}
@@ -187,7 +185,7 @@
 	.dataviews-view-activity__item-type-icon {
 		overflow: hidden;
 		flex-shrink: 0;
-		background-color: $white;
+		background-color: var(--wpds-color-bg-surface-neutral-strong);
 
 		img,
 		svg,
@@ -197,18 +195,18 @@
 			height: 100%;
 			margin: 0 auto;
 			object-fit: cover;
-			border-radius: $radius-round;
+			border-radius: 50%;
 			box-sizing: border-box;
-			box-shadow: inset 0 0 0 $border-width $gray-300;
+			box-shadow: inset 0 0 0 var(--wpds-border-width-xs) var(--wpds-color-stroke-surface-neutral);
 		}
 
 		svg {
-			padding: $grid-unit-05;
+			padding: var(--wpds-dimension-padding-xs);
 		}
 
 		.dataviews-view-activity__item-bullet {
 			content: "";
-			background-color: $gray-300;
+			background-color: var(--wpds-color-stroke-surface-neutral);
 		}
 	}
 

package/src/components/dataviews-layouts/grid/composite-grid.tsx

@@ -10,11 +10,11 @@ import type { ComponentProps, ReactElement, HTMLAttributes } from 'react';
 import {
 	Flex,
 	FlexItem,
-	Tooltip,
 	Composite,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { Stack } from '@wordpress/ui';
+// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
+import { Stack, Tooltip } from '@wordpress/ui';
 import { __, sprintf } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
 import { isAppleOS } from '@wordpress/keycodes';
@@ -236,7 +236,7 @@ const GridItem = forwardRef< HTMLDivElement, GridItemProps< any > >(
 					</div>
 				) }
 				{ showTitle && (
-					<div className="dataviews-view-grid__title">
+					<div className="dataviews-view-grid__title-actions">
 						<ItemClickWrapper
 							item={ item }
 							isItemClickable={ isItemClickable }
@@ -304,11 +304,18 @@ const GridItem = forwardRef< HTMLDivElement, GridItemProps< any > >(
 										direction="row"
 									>
 										<>
-											<Tooltip text={ field.label }>
-												<FlexItem className="dataviews-view-grid__field-name">
-													{ field.header }
-												</FlexItem>
-											</Tooltip>
+											<Tooltip.Root>
+												<Tooltip.Trigger
+													render={
+														<FlexItem className="dataviews-view-grid__field-name">
+															{ field.header }
+														</FlexItem>
+													}
+												/>
+												<Tooltip.Popup>
+													{ field.label }
+												</Tooltip.Popup>
+											</Tooltip.Root>
 											<FlexItem
 												className="dataviews-view-grid__field-value"
 												style={ { maxHeight: 'none' } }

package/src/components/dataviews-layouts/grid/style.scss

@@ -1,15 +1,11 @@
-@use "sass:math";
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/variables" as *;
-@use "@wordpress/base-styles/z-index" as *;
 @use "../utils/grid-items.scss" as *;
 @use "../../../dataviews/style" as *;
 
 .dataviews-view-grid {
-	padding: 0 $grid-unit-30 $grid-unit-30;
+	padding: 0 var(--wpds-dimension-padding-2xl) var(--wpds-dimension-padding-2xl);
 	display: flex;
 	flex-direction: column;
-	gap: $grid-unit-30;
+	gap: var(--wpds-dimension-gap-xl);
 	container-type: inline-size;
 	margin-bottom: auto;
 
@@ -18,27 +14,27 @@
 	}
 
 	&.has-compact-density {
-		gap: $grid-unit-20;
+		gap: var(--wpds-dimension-gap-lg);
 
 		.dataviews-view-grid__row {
-			gap: $grid-unit-20;
+			gap: var(--wpds-dimension-gap-lg);
 		}
 	}
 
 	&.has-comfortable-density {
-		gap: $grid-unit-40;
+		gap: var(--wpds-dimension-gap-2xl);
 
 		.dataviews-view-grid__row {
-			gap: $grid-unit-40;
+			gap: var(--wpds-dimension-gap-2xl);
 		}
 	}
 
 	.dataviews-view-grid__row {
 		display: grid;
-		gap: $grid-unit-30;
+		gap: var(--wpds-dimension-gap-xl);
 
 		.dataviews-view-grid__row__gridcell {
-			border-radius: $radius-medium;
+			border-radius: var(--wpds-border-radius-md);
 			position: relative;
 
 			&[data-focus-visible]::after {
@@ -48,8 +44,8 @@
 				left: 0;
 				width: 100%;
 				height: 100%;
-				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-				border-radius: $radius-medium;
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand);
+				border-radius: var(--wpds-border-radius-md);
 				pointer-events: none;
 
 				// Windows High Contrast mode will show this outline, but not the box-shadow.
@@ -66,13 +62,14 @@
 		height: 100%;
 		justify-content: flex-start;
 		position: relative;
+		isolation: isolate;
 
-		.dataviews-view-grid__title {
-			padding: $grid-unit-10 0 $grid-unit-05;
+		.dataviews-view-grid__title-actions {
+			padding: var(--wpds-dimension-padding-sm) 0 var(--wpds-dimension-padding-xs);
 		}
 
 		.dataviews-view-grid__title-field {
-			min-height: $grid-unit-30; // Preserve layout when there is no ellipsis button
+			min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available. Preserve layout when there is no ellipsis button
 			overflow: hidden;
 			align-content: center;
 			text-align: start;
@@ -85,26 +82,24 @@
 
 		&.is-selected {
 			.dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
-				color: $gray-900;
+				color: var(--wpds-color-fg-content-neutral);
 			}
 		}
-		&.is-selected .dataviews-view-grid__media::after,
-		.dataviews-view-grid__media:focus::after {
-			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
-		}
 		&.is-selected .dataviews-view-grid__media::after {
-			box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
+			box-shadow:
+				inset 0 0 0 var(--wpds-border-width-xs) var(--wpds-color-stroke-interactive-brand),
+				inset 0 0 0 var(--wpds-border-width-sm) var(--wpds-color-bg-surface-neutral-strong);
 		}
 		.dataviews-view-grid__media:focus::after {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand);
 		}
 	}
 
 	.dataviews-view-grid__media {
 		width: 100%;
 		aspect-ratio: 1/1;
-		background-color: $white;
-		border-radius: $radius-medium;
+		background-color: var(--wpds-color-bg-surface-neutral-strong);
+		border-radius: var(--wpds-border-radius-md);
 		overflow: hidden;
 		position: relative;
 
@@ -125,8 +120,8 @@
 			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;
+			box-shadow: inset 0 0 0 var(--wpds-border-width-xs) rgba(0, 0, 0, 0.1);
+			border-radius: var(--wpds-border-radius-md);
 			pointer-events: none;
 		}
 
@@ -134,9 +129,9 @@
 			width: 100%;
 			height: 100%;
 			display: block;
-			border-radius: $radius-medium;
+			border-radius: var(--wpds-border-radius-md);
 			box-shadow: none;
-			background: $gray-100;
+			background: var(--wpds-color-bg-surface-neutral);
 		}
 	}
 
@@ -146,22 +141,22 @@
 		line-height: 16px;
 
 		&:not(:empty) {
-			padding: 0 0 $grid-unit-15;
+			padding: 0 0 var(--wpds-dimension-padding-md);
 		}
 
 		.dataviews-view-grid__field-value:not(:empty) {
-			min-height: $grid-unit-30;
-			line-height: $grid-unit-05 * 5;
-			padding-top: math.div($grid-unit-05, 2);
+			min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
+			line-height: var(--wpds-typography-line-height-sm);
+			padding-top: calc(var(--wpds-dimension-base) / 2);
 		}
 
 		.dataviews-view-grid__field {
-			min-height: $grid-unit-30;
+			min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
 			align-items: center;
 
 			.dataviews-view-grid__field-name {
 				width: 35%;
-				color: $gray-700;
+				color: var(--wpds-color-fg-content-neutral-weak);
 				overflow: hidden;
 				text-overflow: ellipsis;
 				white-space: nowrap;
@@ -182,7 +177,7 @@
 
 	.dataviews-view-grid__badge-fields {
 		&:not(:empty) {
-			padding-bottom: $grid-unit-15;
+			padding-bottom: var(--wpds-dimension-padding-md);
 		}
 	}
 
@@ -199,8 +194,9 @@
 .dataviews-view-grid__card .dataviews-selection-checkbox {
 	position: absolute;
 	top: -9999em;
-	left: $grid-unit-10;
-	z-index: z-index(".dataviews-view-grid__card .dataviews-selection-checkbox");
+	left: var(--wpds-dimension-padding-sm);
+	// Ensure selection checkbox stays above the preview field.
+	z-index: 1;
 	opacity: 0;
 
 	@media not (prefers-reduced-motion) {
@@ -210,7 +206,7 @@
 	@media (hover: none) {
 		// Show checkboxes on devices that do not support hover.
 		opacity: 1;
-		top: $grid-unit-10;
+		top: var(--wpds-dimension-padding-sm);
 	}
 }
 
@@ -218,18 +214,18 @@
 .dataviews-view-grid__card:focus-within .dataviews-selection-checkbox,
 .dataviews-view-grid__card.is-selected .dataviews-selection-checkbox {
 	opacity: 1;
-	top: $grid-unit-10;
+	top: var(--wpds-dimension-padding-sm);
 }
 
 .dataviews-view-grid__card .dataviews-view-grid__media-actions {
 	position: absolute;
 	z-index: 1;
-	top: $grid-unit-05;
+	top: var(--wpds-dimension-padding-xs);
 	opacity: 0;
-	right: $grid-unit-05;
+	right: var(--wpds-dimension-padding-xs);
 
 	.dataviews-all-actions-button {
-		background-color: $white;
+		background-color: var(--wpds-color-bg-surface-neutral-strong);
 	}
 
 	@media not (prefers-reduced-motion) {
@@ -239,7 +235,7 @@
 	@media (hover: none) {
 		// Show actions on devices that do not support hover.
 		opacity: 1;
-		top: $grid-unit-05;
+		top: var(--wpds-dimension-padding-xs);
 	}
 }
 
@@ -254,10 +250,10 @@
 }
 
 .dataviews-view-grid__group-header {
-	font-size: $font-size-large;
-	font-weight: $font-weight-medium;
-	color: $gray-900;
-	margin: 0 0 $grid-unit-10 0;
-	padding: 0 $grid-unit-30;
+	font-size: var(--wpds-typography-font-size-lg);
+	font-weight: var(--wpds-typography-font-weight-medium);
+	color: var(--wpds-color-fg-content-neutral);
+	margin: 0 0 var(--wpds-dimension-gap-sm) 0;
+	padding: 0 var(--wpds-dimension-padding-2xl);
 	container-type: inline-size;
 }