@wordpress/dataviews 14.3.0 → 15.0.0

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

@@ -1,7 +1,4 @@
-@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/mixins" as *;
-@use "@wordpress/base-styles/variables" as *;
-@use "@wordpress/base-styles/z-index" as *;
 @use "../../../dataviews/style" as *;
 
 .dataviews-view-table {
@@ -10,19 +7,19 @@
 	border-color: inherit;
 	border-collapse: collapse;
 	position: relative;
-	color: $gray-700;
+	color: var(--wpds-color-fg-content-neutral-weak);
 	margin-bottom: auto;
 	background-color: inherit;
 
 	th {
 		text-align: left;
-		color: $gray-900;
+		color: var(--wpds-color-fg-content-neutral);
 		font-weight: normal;
-		font-size: $default-font-size;
+		font-size: var(--wpds-typography-font-size-md);
 	}
 	td,
 	th {
-		padding: $grid-unit-15;
+		padding: var(--wpds-dimension-padding-md);
 
 		&.dataviews-view-table__actions-column {
 			text-align: right;
@@ -31,7 +28,7 @@
 		&.dataviews-view-table__actions-column--sticky {
 			position: sticky;
 			right: 0;
-			background-color: var(--wp-dataviews-color-background, $white);
+			background-color: var(--wp-dataviews-color-background, var(--wpds-color-bg-surface-neutral-strong));
 		}
 
 		&.dataviews-view-table__actions-column--stuck {
@@ -43,7 +40,7 @@
 				bottom: 0;
 				left: 0;
 				width: 1px;
-				background-color: $gray-100;
+				background-color: var(--wpds-color-bg-surface-neutral);
 			}
 		}
 
@@ -57,17 +54,17 @@
 		}
 	}
 	tr {
-		border-top: 1px solid $gray-100;
+		border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak);
 		background-color: inherit;
 
 		td:first-child,
 		th:first-child {
-			padding-left: $grid-unit-30;
+			padding-left: var(--wpds-dimension-padding-2xl);
 		}
 
 		td:last-child,
 		th:last-child {
-			padding-right: $grid-unit-30;
+			padding-right: var(--wpds-dimension-padding-2xl);
 		}
 
 		&:last-child {
@@ -86,16 +83,16 @@
 		}
 
 		&.is-selected {
-			background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 4%, $white);
-			color: $gray-700;
+			background-color: var(--wpds-color-bg-interactive-brand-weak-active);
+			color: var(--wpds-color-fg-content-neutral);
 
 			&,
 			& + tr {
-				border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
+				border-top: 1px solid var(--wpds-color-stroke-surface-brand);
 			}
 
 			.dataviews-view-table__actions-column--sticky {
-				background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 4%, $white);
+				background-color: var(--wpds-color-bg-interactive-brand-weak-active);
 			}
 		}
 
@@ -115,14 +112,14 @@
 			&:focus-within,
 			&:hover {
 				.dataviews-view-table__actions-column--sticky {
-					background-color: var(--wp-dataviews-color-background, $white);
+					background-color: var(--wp-dataviews-color-background, var(--wpds-color-bg-surface-neutral-strong));
 				}
 			}
 
 			&.is-selected,
 			&.is-selected:hover {
 				.dataviews-view-table__actions-column--sticky {
-					background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 4%, $white);
+					background-color: var(--wpds-color-bg-interactive-brand-weak-active);
 				}
 			}
 		}
@@ -131,7 +128,8 @@
 	thead {
 		position: sticky;
 		inset-block-start: 0;
-		z-index: z-index(".dataviews-view-table thead");
+		// Ensure the header stays above the scrolling content.
+		z-index: 1;
 		background-color: inherit;
 
 		&.dataviews-view-table__thead--stuck {
@@ -143,7 +141,7 @@
 				left: 0;
 				right: 0;
 				height: 1px;
-				background-color: $gray-100;
+				background-color: var(--wpds-color-stroke-surface-neutral-weak);
 			}
 		}
 
@@ -152,29 +150,29 @@
 		}
 		th {
 			background-color: inherit;
-			padding-top: $grid-unit-10;
-			padding-bottom: $grid-unit-10;
+			padding-top: var(--wpds-dimension-padding-sm);
+			padding-bottom: var(--wpds-dimension-padding-sm);
 			font-size: 11px;
 			text-transform: uppercase;
-			font-weight: $font-weight-medium;
+			font-weight: var(--wpds-typography-font-weight-medium);
 
 			&:has(.dataviews-view-table-header-button) {
-				padding-left: $grid-unit-05;
-				padding-right: $grid-unit-05;
+				padding-left: var(--wpds-dimension-padding-xs);
+				padding-right: var(--wpds-dimension-padding-xs);
 
 				.dataviews-view-table-header-button {
-					gap: $grid-unit-05;
+					gap: var(--wpds-dimension-gap-xs);
 				}
 			}
 
 			&:has(.dataviews-view-table-header-button):first-child {
 				// Table cell padding minus the header button padding.
-				padding-left: $grid-unit-20;
+				padding-left: var(--wpds-dimension-padding-lg);
 			}
 
 			&:has(.dataviews-view-table-header-button):last-child {
 				// Table cell padding minus the header button padding.
-				padding-right: $grid-unit-20;
+				padding-right: var(--wpds-dimension-padding-lg);
 			}
 		}
 	}
@@ -183,7 +181,7 @@
 			vertical-align: top;
 		}
 		.dataviews-view-table__cell-content-wrapper {
-			min-height: $grid-unit-40;
+			min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
 			display: flex;
 			align-items: center;
 			white-space: nowrap;
@@ -203,13 +201,13 @@
 		}
 	}
 	.dataviews-view-table-header-button {
-		padding: $grid-unit-05 $grid-unit-10;
+		padding: var(--wpds-dimension-padding-xs) var(--wpds-dimension-padding-sm);
 		font-size: 11px;
 		text-transform: uppercase;
-		font-weight: $font-weight-medium;
+		font-weight: var(--wpds-typography-font-weight-medium);
 
 		&:not(:hover) {
-			color: $gray-900;
+			color: var(--wpds-color-fg-interactive-neutral);
 		}
 
 		span {
@@ -222,7 +220,7 @@
 	}
 
 	.dataviews-view-table-header {
-		padding-left: $grid-unit-05;
+		padding-left: var(--wpds-dimension-padding-xs);
 	}
 
 	.dataviews-view-table__actions-column {
@@ -246,14 +244,14 @@
 		}
 		td,
 		th {
-			padding: $grid-unit-05 $grid-unit-10;
+			padding: var(--wpds-dimension-padding-xs) var(--wpds-dimension-padding-sm);
 		}
 	}
 
 	&.has-comfortable-density {
 		td,
 		th {
-			padding: $grid-unit-20 $grid-unit-15;
+			padding: var(--wpds-dimension-padding-lg) var(--wpds-dimension-padding-md);
 		}
 	}
 
@@ -278,17 +276,17 @@
 
 .dataviews-column-primary__media {
 	max-width: 60px;
-	min-width: $grid-unit-40;
-	min-height: $grid-unit-40;
+	min-width: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+	min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
 	overflow: hidden;
 	position: relative;
 	flex-shrink: 0;
-	background-color: $white;
-	border-radius: $radius-medium;
+	background-color: var(--wpds-color-bg-surface-neutral-strong);
+	border-radius: var(--wpds-border-radius-md);
 
 	img {
-		width: $grid-unit-40;
-		height: $grid-unit-40;
+		width: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+		height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
 		object-fit: cover;
 	}
 
@@ -299,8 +297,8 @@
 		left: 0;
 		width: 100%;
 		height: 100%;
-		box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);
-		border-radius: $radius-medium;
+		box-shadow: inset 0 0 0 var(--wpds-border-width-xs) rgba(0, 0, 0, 0.1);
+		border-radius: var(--wpds-border-radius-md);
 	}
 }
 
@@ -314,9 +312,9 @@
 
 .dataviews-view-table__group-header-row {
 	.dataviews-view-table__group-header-cell {
-		font-weight: $font-weight-medium;
-		padding: $grid-unit-15 $grid-unit-30;
-		color: $gray-900;
+		font-weight: var(--wpds-typography-font-weight-medium);
+		padding: var(--wpds-dimension-padding-md) var(--wpds-dimension-padding-2xl);
+		color: var(--wpds-color-fg-content-neutral);
 	}
 }
 

package/src/components/dataviews-layouts/table/use-scroll-state.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { MutableRefObject } from 'react';
+import type { RefObject } from 'react';
 
 /**
  * WordPress dependencies
@@ -30,16 +30,16 @@ const isScrolledToEnd = ( element: Element ) => {
  *
  * See https://github.com/Automattic/wp-calypso/pull/103005#discussion_r2077567912.
  *
- * @param {Object}                                  params                           The parameters for the hook.
- * @param {MutableRefObject<HTMLDivElement | null>} params.scrollContainerRef        The ref to the scroll container element.
- * @param {boolean}                                 [params.enabledHorizontal=false] Whether to track horizontal scroll end.
- * @return {{ isHorizontalScrollEnd: boolean, isVerticallyScrolled: boolean }} The scroll state.
+ * @param params                           The parameters for the hook.
+ * @param params.scrollContainerRef        The ref to the scroll container element.
+ * @param [params.enabledHorizontal=false] Whether to track horizontal scroll end.
+ * @return  The scroll state.
  */
 export function useScrollState( {
 	scrollContainerRef,
 	enabledHorizontal = false,
 }: {
-	scrollContainerRef: React.MutableRefObject< HTMLDivElement | null >;
+	scrollContainerRef: RefObject< HTMLDivElement | null >;
 	enabledHorizontal?: boolean;
 } ): { isHorizontalScrollEnd: boolean; isVerticallyScrolled: boolean } {
 	const [ isHorizontalScrollEnd, setIsHorizontalScrollEnd ] =

package/src/components/dataviews-layouts/utils/grid-items.scss

@@ -1,12 +1,10 @@
-@use "@wordpress/base-styles/variables" as *;
-
 .dataviews-view-grid-items {
 	margin-bottom: auto;
 	display: grid;
-	gap: $grid-unit-30;
+	gap: var(--wpds-dimension-gap-xl);
 	grid-template-rows: max-content;
 	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
-	padding: 0 $grid-unit-30 $grid-unit-30;
+	padding: 0 var(--wpds-dimension-padding-2xl) var(--wpds-dimension-padding-2xl);
 	container-type: inline-size;
 
 	@media not (prefers-reduced-motion) {
@@ -14,10 +12,10 @@
 	}
 
 	&.has-compact-density {
-		gap: $grid-unit-20;
+		gap: var(--wpds-dimension-gap-lg);
 	}
 
 	&.has-comfortable-density {
-		gap: $grid-unit-40;
+		gap: var(--wpds-dimension-gap-2xl);
 	}
 }

package/src/components/dataviews-layouts/utils/item-click-wrapper.tsx

@@ -86,7 +86,9 @@ export function ItemClickWrapper< Item >( {
 			className: `${ className } ${ className }--clickable`,
 			...extraProps,
 			children,
-		} );
+		} ) as ReactElement<
+			Pick< React.DOMAttributes< Element >, 'onClick' | 'onKeyDown' >
+		>;
 
 		// Clone the element and enhance onClick to stop propagation
 		return cloneElement( renderedElement, {

package/src/components/dataviews-pagination/style.scss

@@ -1,15 +1,14 @@
-@use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/mixins" as *;
 
 .dataviews-pagination__page-select {
 	font-size: 11px;
-	font-weight: $font-weight-medium;
+	font-weight: var(--wpds-typography-font-weight-medium);
 	text-transform: uppercase;
 
 	@include break-small() {
 		.components-select-control__input {
 			font-size: 11px !important;
-			font-weight: $font-weight-medium;
+			font-weight: var(--wpds-typography-font-weight-medium);
 		}
 	}
 }

package/src/components/dataviews-picker-footer/style.scss

@@ -1,11 +1,9 @@
-@use "@wordpress/base-styles/variables" as *;
-
 // For mobile viewports:
 // - align bulk selection checkbox to the left.
 // - align footer actions to the right.
 .dataviews-picker-footer__bulk-selection {
 	align-self: flex-start;
-	height: $grid-unit-40;
+	height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
 }
 .dataviews-picker-footer__actions {
 	align-self: flex-end;

package/src/components/dataviews-selection-checkbox/style.scss

@@ -1,4 +1,3 @@
-@use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/mixins" as *;
 
 .dataviews-selection-checkbox {

package/src/components/dataviews-view-config/properties-section.tsx

@@ -5,7 +5,7 @@ import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
 	BaseControl,
-	Icon,
+	Icon as WCIcon,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useContext } from '@wordpress/element';
@@ -32,7 +32,7 @@ function FieldItem( {
 		<Item onClick={ field.enableHiding ? onToggleVisibility : undefined }>
 			<Stack direction="row" gap="sm" justify="flex-start" align="center">
 				<div style={ { height: 24, width: 24 } }>
-					{ isVisible && <Icon icon={ check } /> }
+					{ isVisible && <WCIcon icon={ check } /> }
 				</div>
 				<span className="dataviews-view-config__label">
 					{ field.label }

package/src/components/dataviews-view-config/style.scss

@@ -1,12 +1,9 @@
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/variables" as *;
-
 .dataviews-view-config {
 	width: 320px;
 	/* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
 	container-type: inline-size;
-	font-size: $default-font-size;
-	line-height: $default-line-height;
+	font-size: var(--wpds-typography-font-size-md);
+	line-height: var(--wpds-typography-line-height-sm);
 }
 
 .dataviews-config__popover.is-expanded .dataviews-config__popover-content-wrapper {
@@ -22,7 +19,7 @@
 }
 
 .dataviews-settings-section__title.dataviews-settings-section__title {
-	line-height: $grid-unit-30;
+	line-height: var(--wpds-typography-line-height-md);
 	font-size: 15px;
 }
 
@@ -74,11 +71,11 @@
 
 .dataviews-view-config__modified-indicator {
 	position: absolute;
-	top: $grid-unit-05;
-	right: $grid-unit-05;
-	width: $grid-unit-05;
-	height: $grid-unit-05;
-	background: var(--wp-admin-theme-color, #3858e9);
+	top: var(--wpds-dimension-gap-xs);
+	right: var(--wpds-dimension-gap-xs);
+	width: var(--wpds-dimension-gap-xs);
+	height: var(--wpds-dimension-gap-xs);
+	background: var(--wpds-color-bg-interactive-brand-strong);
 	border-radius: 50%;
 	pointer-events: none;
 }

package/src/dataviews/stories/free-composition.tsx

@@ -174,7 +174,9 @@ export const FreeCompositionComponent = () => {
 						No planets
 					</WCText>
 					<WCText variant="muted">{ `Try a different search because “${ view.search }” returned no results.` }</WCText>
-					<Button variant="secondary">Create new planet</Button>
+					<Button variant="secondary" __next40pxDefaultSize>
+						Create new planet
+					</Button>
 				</Stack>
 			}
 		>

package/src/dataviews/style.scss

@@ -1,5 +1,3 @@
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/mixins" as *;
 
 @mixin dataviews-refreshing {
@@ -15,21 +13,23 @@
 .dataviews-wrapper,
 .dataviews-picker-wrapper {
 	height: 100%;
+	flex-grow: 1;
+	min-height: 0;
 	box-sizing: border-box;
-	scroll-padding-bottom: $grid-unit-80;
+	scroll-padding-bottom: calc(var(--wpds-dimension-base) * 16);
 	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
 	container: dataviews-wrapper / inline-size;
 	display: flex;
 	flex-direction: column;
-	font-size: $default-font-size;
-	line-height: $default-line-height;
-	background-color: var(--wp-dataviews-color-background, $white);
+	font-size: var(--wpds-typography-font-size-md);
+	line-height: var(--wpds-typography-line-height-sm);
+	background-color: var(--wp-dataviews-color-background, var(--wpds-color-bg-surface-neutral-strong));
 }
 
 .dataviews__view-actions,
 .dataviews-filters__container {
 	box-sizing: border-box;
-	padding: $grid-unit-20 $grid-unit-30;
+	padding: var(--wpds-dimension-padding-lg) var(--wpds-dimension-padding-2xl);
 	flex-shrink: 0;
 	position: sticky;
 	left: 0;
@@ -42,7 +42,7 @@
 
 .dataviews-no-results,
 .dataviews-loading {
-	padding: 0 $grid-unit-30;
+	padding: 0 var(--wpds-dimension-padding-2xl);
 	flex-grow: 1;
 	display: flex;
 	align-items: center;
@@ -75,14 +75,14 @@
 @container (max-width: 430px) {
 	.dataviews__view-actions,
 	.dataviews-filters__container {
-		padding: $grid-unit-15 $grid-unit-30;
+		padding: var(--wpds-dimension-padding-md) var(--wpds-dimension-padding-2xl);
 	}
 }
 
 .dataviews-title-field {
-	font-size: $default-font-size;
-	font-weight: $font-weight-medium;
-	color: $gray-800;
+	font-size: var(--wpds-typography-font-size-md);
+	font-weight: var(--wpds-typography-font-weight-medium);
+	color: var(--wpds-color-fg-content-neutral);
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	width: 100%;
@@ -94,10 +94,10 @@
 		overflow: hidden;
 		display: block;
 		flex-grow: 0;
-		color: $gray-800;
+		color: var(--wpds-color-fg-interactive-neutral);
 
 		&:hover {
-			color: var(--wp-admin-theme-color);
+			color: var(--wpds-color-fg-interactive-brand);
 		}
 		@include link-reset();
 	}
@@ -110,18 +110,18 @@
 		overflow: hidden;
 		display: block;
 		width: 100%;
-		color: $gray-900;
+		color: var(--wpds-color-fg-interactive-neutral-active);
 		&:hover {
-			color: var(--wp-admin-theme-color);
+			color: var(--wpds-color-fg-interactive-brand);
 		}
 	}
 }
 
 .dataviews-title-field--clickable {
 	cursor: var(--wpds-cursor-control);
-	color: $gray-800;
+	color: var(--wpds-color-fg-interactive-neutral);
 	&:hover {
-		color: var(--wp-admin-theme-color);
+		color: var(--wpds-color-fg-interactive-brand);
 	}
 	@include link-reset();
 }
@@ -132,3 +132,12 @@
 	z-index: 2; // Ensure it appears above dataview items when scrolling.
 	background-color: #fff;
 }
+
+/**
+ * When DataViews are placed within cards, apply a consistent top padding.
+ */
+.components-card__body:has(> .dataviews-wrapper),
+.components-card__body:has(> .dataviews-picker-wrapper) {
+	padding: var(--wpds-dimension-padding-sm) 0 0;
+	overflow: hidden; // Prevent cells with white backgrounds overflowing the card
+}

package/src/dataviews-picker/stories/index.story.tsx

@@ -254,6 +254,7 @@ export const WithModal = ( {
 			<Stack direction="row" justify="left" gap="sm">
 				<Button
 					variant="primary"
+					__next40pxDefaultSize
 					onClick={ () => setIsModalOpen( true ) }
 				>
 					Open Picker Modal
@@ -262,6 +263,7 @@ export const WithModal = ( {
 					onClick={ () => setSelectedItems( [] ) }
 					disabled={ ! selectedItems.length }
 					accessibleWhenDisabled
+					__next40pxDefaultSize
 				>
 					Clear Selection
 				</Button>

package/src/field-types/stories/index.story.tsx

@@ -3,7 +3,7 @@
  */
 import { useState, useMemo } from '@wordpress/element';
 import {
-	Icon,
+	Icon as WCIcon,
 	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
 	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 } from '@wordpress/components';
@@ -88,7 +88,7 @@ const DollarPrefix = () => (
 );
 const StarIconPrefix = () => (
 	<InputControlPrefixWrapper variant="icon">
-		<Icon icon={ starFilled } />
+		<WCIcon icon={ starFilled } />
 	</InputControlPrefixWrapper>
 );
 const PercentSuffix = () => (

package/src/hooks/use-form-validity.ts

@@ -392,8 +392,8 @@ function handleCustomValidationAsync< Item >(
 }
 
 type PromiseHandler< Item > = {
-	customCounterRef: React.MutableRefObject< Record< string, number > >;
-	elementsCounterRef: React.MutableRefObject< Record< string, number > >;
+	customCounterRef: React.RefObject< Record< string, number > >;
+	elementsCounterRef: React.RefObject< Record< string, number > >;
 	setFormValidity: React.Dispatch< React.SetStateAction< FormValidity > >;
 	path: string[];
 	item: Item;