@wordpress/dataviews 14.2.1-next.v.202605131032.0 → 15.0.0

package/src/components/dataviews-filters/filter.tsx

@@ -11,13 +11,13 @@ import {
 	Dropdown,
 	FlexItem,
 	SelectControl,
-	Tooltip,
-	Icon,
+	Icon as WCIcon,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useMemo, useRef } from '@wordpress/element';
 import { closeSmall } from '@wordpress/icons';
-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';
 
 /**
  * Internal dependencies
@@ -257,6 +257,10 @@ export default function Filter( {
 	const isLocked = filterInView?.isLocked;
 	const hasValues = ! isLocked && filterInView?.value !== undefined;
 	const canResetOrRemove = ! isLocked && ( ! isPrimary || hasValues );
+	// TODO: revisit once `@wordpress/ui`'s `IconButton` is ready — it should
+	// collapse the manual icon-only `<button>` + `aria-label` + Tooltip
+	// composition below into a single primitive.
+	const resetOrRemoveLabel = isPrimary ? __( 'Reset' ) : __( 'Remove' );
 	return (
 		<Dropdown
 			defaultOpen={ openedFilter === filter.field }
@@ -267,83 +271,95 @@ export default function Filter( {
 			} }
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<div className="dataviews-filters__summary-chip-container">
-					<Tooltip
-						text={ sprintf(
-							/* translators: 1: Filter name. */
-							__( 'Filter by: %1$s' ),
-							filter.name.toLowerCase()
-						) }
-						placement="top"
-					>
-						<div
-							className={ clsx(
-								'dataviews-filters__summary-chip',
-								{
-									'has-reset': canResetOrRemove,
-									'has-values': hasValues,
-									'is-not-clickable': isLocked,
-								}
+					<Tooltip.Root>
+						<Tooltip.Trigger
+							render={
+								<div
+									className={ clsx(
+										'dataviews-filters__summary-chip',
+										{
+											'has-reset': canResetOrRemove,
+											'has-values': hasValues,
+											'is-not-clickable': isLocked,
+										}
+									) }
+									role="button"
+									tabIndex={ isLocked ? -1 : 0 }
+									onClick={ () => {
+										if ( ! isLocked ) {
+											onToggle();
+										}
+									} }
+									onKeyDown={ ( event ) => {
+										if (
+											! isLocked &&
+											[ ENTER, SPACE ].includes(
+												event.key
+											)
+										) {
+											onToggle();
+											event.preventDefault();
+										}
+									} }
+									aria-disabled={ isLocked }
+									aria-pressed={ isOpen }
+									aria-expanded={ isOpen }
+									ref={ toggleRef }
+								>
+									<FilterText
+										activeElements={ activeElements }
+										filterInView={ filterInView }
+										filter={ filter }
+									/>
+								</div>
+							}
+						/>
+						<Tooltip.Popup>
+							{ sprintf(
+								/* translators: 1: Filter name. */
+								__( 'Filter by: %1$s' ),
+								filter.name.toLowerCase()
 							) }
-							role="button"
-							tabIndex={ isLocked ? -1 : 0 }
-							onClick={ () => {
-								if ( ! isLocked ) {
-									onToggle();
-								}
-							} }
-							onKeyDown={ ( event ) => {
-								if (
-									! isLocked &&
-									[ ENTER, SPACE ].includes( event.key )
-								) {
-									onToggle();
-									event.preventDefault();
+						</Tooltip.Popup>
+					</Tooltip.Root>
+					{ canResetOrRemove && (
+						<Tooltip.Root>
+							<Tooltip.Trigger
+								render={
+									<button
+										className={ clsx(
+											'dataviews-filters__summary-chip-remove',
+											{ 'has-values': hasValues }
+										) }
+										aria-label={ resetOrRemoveLabel }
+										onClick={ () => {
+											onChangeView( {
+												...view,
+												page: 1,
+												filters: view.filters?.filter(
+													( _filter ) =>
+														_filter.field !==
+														filter.field
+												),
+											} );
+											// If the filter is not primary and can be removed, it will be added
+											// back to the available filters from `Add filter` component.
+											if ( ! isPrimary ) {
+												addFilterRef.current?.focus();
+											} else {
+												// If is primary, focus the toggle button.
+												toggleRef.current?.focus();
+											}
+										} }
+									>
+										<WCIcon icon={ closeSmall } />
+									</button>
 								}
-							} }
-							aria-disabled={ isLocked }
-							aria-pressed={ isOpen }
-							aria-expanded={ isOpen }
-							ref={ toggleRef }
-						>
-							<FilterText
-								activeElements={ activeElements }
-								filterInView={ filterInView }
-								filter={ filter }
 							/>
-						</div>
-					</Tooltip>
-					{ canResetOrRemove && (
-						<Tooltip
-							text={ isPrimary ? __( 'Reset' ) : __( 'Remove' ) }
-							placement="top"
-						>
-							<button
-								className={ clsx(
-									'dataviews-filters__summary-chip-remove',
-									{ 'has-values': hasValues }
-								) }
-								onClick={ () => {
-									onChangeView( {
-										...view,
-										page: 1,
-										filters: view.filters?.filter(
-											( _filter ) =>
-												_filter.field !== filter.field
-										),
-									} );
-									// If the filter is not primary and can be removed, it will be added
-									// back to the available filters from `Add filter` component.
-									if ( ! isPrimary ) {
-										addFilterRef.current?.focus();
-									} else {
-										// If is primary, focus the toggle button.
-										toggleRef.current?.focus();
-									}
-								} }
-							>
-								<Icon icon={ closeSmall } />
-							</button>
-						</Tooltip>
+							<Tooltip.Popup>
+								{ resetOrRemoveLabel }
+							</Tooltip.Popup>
+						</Tooltip.Root>
 					) }
 				</div>
 			) }

package/src/components/dataviews-filters/search-widget.tsx

@@ -12,7 +12,7 @@ import clsx from 'clsx';
 import { useInstanceId } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { useState, useMemo, useDeferredValue } from '@wordpress/element';
-import { Icon, Composite, Spinner } from '@wordpress/components';
+import { Icon as WCIcon, Composite, Spinner } from '@wordpress/components';
 import { search, check } from '@wordpress/icons';
 import { VisuallyHidden } from '@wordpress/ui';
 
@@ -68,7 +68,7 @@ const MultiSelectionOption = ( { selected }: { selected: boolean } ) => {
 				{ 'is-selected': selected }
 			) }
 		>
-			{ selected && <Icon icon={ check } /> }
+			{ selected && <WCIcon icon={ check } /> }
 		</span>
 	);
 };
@@ -272,7 +272,7 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 					className="dataviews-filters__search-widget-filter-combobox__input"
 				/>
 				<div className="dataviews-filters__search-widget-filter-combobox__icon">
-					<Icon icon={ search } />
+					<WCIcon icon={ search } />
 				</div>
 			</div>
 			<Ariakit.ComboboxList

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

@@ -1,6 +1,4 @@
-@use "sass:math";
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/variables" as vars;
 @use "@wordpress/base-styles/mixins" as *;
 
 .dataviews-filters__button {
@@ -23,14 +21,14 @@
 }
 
 .dataviews-filters__summary-popover {
-	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);
 
 	.components-popover__content {
 		width: 100%;
 		min-width: 230px;
 		max-width: 250px;
-		border-radius: $grid-unit-05;
+		border-radius: var(--wpds-border-radius-md);
 	}
 
 	&.components-dropdown__content {
@@ -41,12 +39,12 @@
 }
 
 .dataviews-filters__summary-operators-container {
-	padding: $grid-unit-10 $grid-unit-20;
+	padding: var(--wpds-dimension-padding-sm) var(--wpds-dimension-padding-lg);
 
 	&:has(+ .dataviews-filters__search-widget-listbox),
 	&:has(+ .dataviews-filters__search-widget-no-elements),
 	&:has(+ .dataviews-filters__user-input-widget) {
-		border-bottom: 1px solid $gray-200;
+		border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral);
 	}
 
 	&:empty {
@@ -54,7 +52,7 @@
 	}
 
 	.dataviews-filters__summary-operators-filter-name {
-		color: $gray-700;
+		color: var(--wpds-color-fg-content-neutral-weak);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -74,13 +72,12 @@
 	white-space: pre-wrap;
 
 	.dataviews-filters__summary-chip {
-		border-radius: $grid-unit-20;
-		border: $border-width solid transparent;
+		border-radius: var(--wpds-border-radius-lg);
+		border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-interactive-neutral);
 		cursor: var(--wpds-cursor-control);
-		padding: $grid-unit-05 $grid-unit-15;
-		min-height: $grid-unit-40;
-		background: $gray-100;
-		color: $gray-800;
+		padding: var(--wpds-dimension-padding-xs) var(--wpds-dimension-padding-md);
+		min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+		color: var(--wpds-color-fg-interactive-neutral);
 		position: relative;
 		display: flex;
 		align-items: center;
@@ -91,46 +88,51 @@
 		}
 
 		&.has-reset {
-			padding-inline-end: $button-size-small + $grid-unit-05;
+			padding-inline-end: calc(#{vars.$icon-size} + var(--wpds-dimension-padding-xs));
 		}
 
 		&:hover:not(&.is-not-clickable),
 		&:focus-visible,
 		&[aria-expanded="true"] {
-			background: $gray-200;
-			color: $gray-900;
+			color: var(--wpds-color-fg-interactive-neutral);
+			border-color: var(--wpds-color-stroke-interactive-neutral-active);
+			background-color: var(--wpds-color-bg-interactive-neutral-weak-active);
 		}
 
 		&.has-values {
-			color: var(--wp-admin-theme-color);
-			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+			color: var(--wpds-color-fg-interactive-brand);
+			background: var(--wpds-color-bg-interactive-brand-weak);
+			border-color: var(--wpds-color-stroke-interactive-brand);
 
-			&:hover,
+			&:hover:not(&.is-not-clickable),
 			&[aria-expanded="true"] {
-				background: rgba(var(--wp-admin-theme-color--rgb), 0.12);
+				color: var(--wpds-color-fg-interactive-brand-active);
+				background: var(--wpds-color-bg-interactive-brand-weak-active);
+				border-color: var(--wpds-color-stroke-interactive-brand-active);
 			}
 		}
 
 		&:focus-visible {
 			outline: none;
 			box-shadow:
-				0 0 0 var(--wp-admin-border-width-focus)
-				var(--wp-admin-theme-color);
+				0 0 0 var(--wpds-border-width-focus)
+				var(--wpds-color-stroke-focus-brand);
 		}
 
 		.dataviews-filters-__summary-filter-text-name {
-			font-weight: $font-weight-medium;
+			font-weight: var(--wpds-typography-font-weight-medium);
 		}
 	}
 
 	.dataviews-filters__summary-chip-remove {
-		width: $icon-size;
-		height: $icon-size;
-		border-radius: 50%;
+		// TODO: use size token when available.
+		width: vars.$icon-size;
+		height: vars.$icon-size;
+		border-radius: var(--wpds-border-radius-md);
 		border: 0;
 		padding: 0;
 		position: absolute;
-		right: $grid-unit-05;
+		right: var(--wpds-dimension-padding-xs);
 		top: 50%;
 		transform: translateY(-50%);
 		display: flex;
@@ -140,40 +142,40 @@
 		cursor: var(--wpds-cursor-control);
 
 		svg {
-			fill: $gray-700;
+			fill: var(--wpds-color-fg-interactive-neutral);
 		}
 
 		&:hover,
 		&:focus {
-			background: $gray-200;
+			background: var(--wpds-color-bg-interactive-neutral-weak-active);
 			svg {
-				fill: $gray-900;
+				fill: var(--wpds-color-fg-interactive-neutral-active);
 			}
 		}
 
 		&.has-values {
 			svg {
-				fill: var(--wp-admin-theme-color);
+				fill: var(--wpds-color-fg-interactive-brand);
 			}
 			&:hover {
-				background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+				background: var(--wpds-color-bg-interactive-brand-weak-active);
 			}
 		}
 
 		&:focus-visible {
 			outline: none;
 			box-shadow:
-				0 0 0 var(--wp-admin-border-width-focus)
-				var(--wp-admin-theme-color);
+				0 0 0 var(--wpds-border-width-focus)
+				var(--wpds-color-stroke-focus-brand);
 		}
 	}
 }
 
 .dataviews-filters__search-widget-filter-combobox-list {
-	max-height: $grid-unit * 23;
-	padding: $grid-unit-05;
+	max-height: calc(var(--wpds-dimension-base) * 46);
+	padding: var(--wpds-dimension-padding-xs);
 	overflow: auto;
-	border-top: 1px solid $gray-200;
+	border-top: 1px solid var(--wpds-color-stroke-surface-neutral);
 
 	.dataviews-filters__search-widget-filter-combobox-item-value {
 		[data-user-value] {
@@ -183,19 +185,19 @@
 }
 
 .dataviews-filters__search-widget-listbox {
-	padding: $grid-unit-05;
+	padding: var(--wpds-dimension-padding-xs);
 	overflow: auto;
 }
 
 .dataviews-filters__search-widget-listitem {
 	display: flex;
 	align-items: center;
-	gap: $grid-unit-10;
-	border-radius: $radius-small;
+	gap: var(--wpds-dimension-gap-md);
+	border-radius: var(--wpds-border-radius-sm);
 	box-sizing: border-box;
-	padding: $grid-unit-05 $grid-unit-15;
+	padding: var(--wpds-dimension-padding-xs) var(--wpds-dimension-padding-md);
 	cursor: default;
-	min-height: $grid-unit-40;
+	min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
 	@include body-medium();
 
 	&:last-child {
@@ -205,28 +207,24 @@
 	&:hover,
 	&[data-active-item],
 	&:focus {
-		background-color: var(--wp-admin-theme-color);
-		color: $white;
-
-		.dataviews-filters__search-widget-listitem-description {
-			color: $white;
-		}
+		background-color: var(--wpds-color-bg-interactive-brand-weak-active);
 
 		.dataviews-filters__search-widget-listitem-single-selection {
-			border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
-			background: $white;
+			border-color: var(--wpds-color-stroke-interactive-brand-active);
+			background: var(--wpds-color-bg-surface-neutral-strong);
 			&.is-selected {
-				border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
-				background: var(--wp-admin-theme-color-darker-20, #183ad6);
+				border-color: var(--wpds-color-stroke-interactive-brand-active);
+				background: var(--wpds-color-bg-interactive-brand-strong-active);
 			}
 		}
 
 		.dataviews-filters__search-widget-listitem-multi-selection {
-			border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
+			border-color: var(--wpds-color-stroke-interactive-brand-active);
+			background: var(--wpds-color-bg-surface-neutral-strong);
 
 			&.is-selected {
-				border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
-				background: var(--wp-admin-theme-color-darker-20, #183ad6);
+				border-color: var(--wpds-color-stroke-interactive-brand-active);
+				background: var(--wpds-color-bg-interactive-brand-strong-active);
 			}
 		}
 	}
@@ -242,9 +240,9 @@
 		display: block;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		font-size: $helptext-font-size;
+		font-size: var(--wpds-typography-font-size-sm);
 		line-height: 16px;
-		color: $gray-700;
+		color: var(--wpds-color-fg-content-neutral-weak);
 	}
 
 	.dataviews-filters__search-widget-listitem-single-selection {
@@ -253,28 +251,28 @@
 		padding: 0;
 
 		&.is-selected {
-			background: var(--wp-admin-theme-color, #3858e9);
-			border-color: var(--wp-admin-theme-color, #3858e9);
+			background: var(--wpds-color-bg-interactive-brand-strong);
+			border-color: var(--wpds-color-stroke-interactive-brand);
 
 			&::before {
 				content: "";
-				border-radius: $radius-round;
+				border-radius: 50%;
 				box-sizing: inherit;
-				width: math.div($radio-input-size-sm, 2);
-				height: math.div($radio-input-size-sm, 2);
+				width: vars.$radio-input-size-sm * 0.5;
+				height: vars.$radio-input-size-sm * 0.5;
 				position: absolute;
 				top: 50%;
 				left: 50%;
 				transform: translate(-50%, -50%);
 				margin: 0;
-				background-color: $white;
+				background-color: var(--wpds-color-fg-interactive-brand-strong);
 
 				// This border serves as a background color in Windows High Contrast mode.
-				border: 4px solid $white;
+				border: 4px solid var(--wpds-color-fg-interactive-brand-strong);
 
 				@include break-small() {
-					width: math.div($radio-input-size, 2);
-					height: math.div($radio-input-size, 2);
+					width: vars.$radio-input-size * 0.5;
+					height: vars.$radio-input-size * 0.5;
 				}
 			}
 		}
@@ -286,8 +284,8 @@
 
 		@include checkbox-control;
 		position: relative;
-		background: $white;
-		color: $gray-900;
+		background: var(--wpds-color-bg-interactive-neutral-weak);
+		color: var(--wpds-color-fg-content-neutral);
 		margin: 0;
 		padding: 0;
 		width: var(--checkbox-size);
@@ -302,13 +300,13 @@
 		}
 
 		&.is-selected {
-			background: var(--wp-admin-theme-color, #3858e9);
-			border-color: var(--wp-admin-theme-color, #3858e9);
+			background: var(--wpds-color-bg-interactive-brand-strong);
+			border-color: var(--wpds-color-stroke-interactive-brand);
 
 			svg {
 				--checkmark-size: var(--checkbox-size);
 
-				fill: $white;
+				fill: var(--wpds-color-fg-interactive-neutral-strong);
 				position: absolute;
 				left: 50%;
 				top: 50%;
@@ -326,34 +324,34 @@
 
 .dataviews-filters__search-widget-filter-combobox__wrapper {
 	position: relative;
-	padding: $grid-unit-10;
+	padding: var(--wpds-dimension-padding-sm);
 
 	.dataviews-filters__search-widget-filter-combobox__input {
 		@include input-control;
 		display: block;
-		padding: 0 $grid-unit-10 0 $grid-unit-40;
+		padding: 0 var(--wpds-dimension-padding-sm) 0 calc(var(--wpds-dimension-base) * 8);
 		width: 100%;
-		height: $grid-unit-40;
+		height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
 
 		// Unset inherited values.
 		margin-left: 0;
 		margin-right: 0;
 
 		/* Fonts smaller than 16px causes mobile safari to zoom. */
-		font-size: $mobile-text-min-font-size;
+		font-size: vars.$mobile-text-min-font-size;
 		@include break-small {
-			font-size: $default-font-size;
+			font-size: var(--wpds-typography-font-size-md);
 		}
 
 		&:focus {
-			background: $white;
+			background: var(--wpds-color-bg-surface-neutral-strong);
 			box-shadow:
-				inset 0 0 0 var(--wp-admin-border-width-focus)
-				var(--wp-admin-theme-color);
+				inset 0 0 0 var(--wpds-border-width-focus)
+				var(--wpds-color-stroke-focus-brand);
 		}
 
 		&::placeholder {
-			color: $gray-700;
+			color: var(--wpds-color-fg-content-neutral-weak);
 		}
 
 		&::-webkit-search-decoration,
@@ -366,13 +364,13 @@
 
 	.dataviews-filters__search-widget-filter-combobox__icon {
 		position: absolute;
-		inset-inline-start: $grid-unit-15;
+		inset-inline-start: var(--wpds-dimension-gap-md);
 		top: 0;
 		bottom: 0;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: $icon-size;
+		width: vars.$icon-size;
 
 		&:dir(ltr) {
 			transform: scaleX(-1);
@@ -390,16 +388,16 @@
 	top: 0;
 	right: 0;
 	transform: translate(50%, -50%);
-	background: var(--wp-admin-theme-color, #3858e9);
-	height: $grid-unit-20;
-	min-width: $grid-unit-20;
-	line-height: $grid-unit-20;
-	padding: 0 $grid-unit-05;
+	background: var(--wpds-color-bg-interactive-brand-strong);
+	height: calc(var(--wpds-dimension-base) * 4); // TODO: use size token when available
+	min-width: calc(var(--wpds-dimension-base) * 4); // TODO: use size token when available
+	line-height: var(--wpds-typography-line-height-xs);
+	padding: 0 var(--wpds-dimension-padding-xs);
 	text-align: center;
-	border-radius: $grid-unit-10;
+	border-radius: var(--wpds-border-radius-lg);
 	font-size: 11px;
-	outline: var(--wp-admin-border-width-focus) solid $white;
-	color: $white;
+	outline: var(--wpds-border-width-focus) solid var(--wpds-color-bg-surface-neutral-strong);
+	color: var(--wpds-color-fg-interactive-neutral-strong);
 	box-sizing: border-box;
 }
 
@@ -408,10 +406,10 @@
 }
 
 .dataviews-filters__user-input-widget {
-	padding: $grid-unit-20;
+	padding: var(--wpds-dimension-padding-lg);
 
 	.components-input-control__prefix {
-		padding-left: $grid-unit-10;
+		padding-left: var(--wpds-dimension-padding-sm);
 	}
 }
 
@@ -419,5 +417,5 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	padding: $grid-unit-20;
+	padding: var(--wpds-dimension-padding-lg);
 }

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

@@ -1,6 +1,3 @@
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/variables" as *;
-@use "@wordpress/base-styles/z-index" as *;
 @use "../../dataviews/style" as *;
 
 .dataviews-footer {
@@ -8,15 +5,16 @@
 	bottom: 0;
 	left: 0;
 	background-color: inherit;
-	padding: $grid-unit-15 $grid-unit-30;
-	border-top: $border-width solid $gray-100;
+	padding: var(--wpds-dimension-padding-md) var(--wpds-dimension-padding-2xl);
+	border-top: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak);
 	flex-shrink: 0;
 
 	@media not (prefers-reduced-motion) {
 		transition: padding ease-out 0.1s;
 	}
 
-	z-index: z-index(".dataviews-footer");
+	// Ensure the footer stays above the scrolling content, independent of DOM order.
+	z-index: 1;
 
 	.is-refreshing {
 		@include dataviews-refreshing();