@wordpress/dataviews 16.0.0 → 17.0.0

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

@@ -0,0 +1,227 @@
+.dataviews-view-picker-activity {
+	margin: 0;
+	padding: 0;
+	// Fill the wrapper height so the footer sits at the bottom.
+	flex-grow: 1;
+
+	&:focus-visible {
+		&[aria-activedescendant] {
+			outline: none;
+		}
+
+		.dataviews-view-picker-activity__item[data-active-item="true"] {
+			outline: 2px solid var(--wpds-color-stroke-focus);
+			outline-offset: -2px;
+		}
+	}
+
+	.dataviews-view-picker-activity__item {
+		cursor: var(--wpds-cursor-control);
+		border-radius: var(--wpds-border-radius-sm);
+		// Inset content to the toolbar/footer padding so the timeline aligns with the chrome.
+		padding-inline: var(--wpds-dimension-padding-2xl);
+		transition: background-color 0.1s ease;
+
+		// Selected and hovered rows share the same tint (like the table picker),
+		// keeping selection legible even for bullet-only items.
+		&.is-selected,
+		&:hover {
+			background-color: var(--wpds-color-background-interactive-brand-weak-active);
+		}
+
+		// Selection outline only renders in Windows High Contrast mode.
+		&.is-selected {
+			outline: 3px solid transparent;
+			outline-offset: -2px;
+		}
+
+		&.is-compact {
+			.dataviews-view-picker-activity__item-type {
+				width: var(--wpds-dimension-padding-md);
+
+				&::before {
+					height: var(--wpds-dimension-size-3xs);
+				}
+			}
+			.dataviews-view-picker-activity__item-type-icon {
+				width: calc(var(--wpds-dimension-size-3xs) - 1px);
+				height: calc(var(--wpds-dimension-size-3xs) - 1px);
+			}
+			.dataviews-view-picker-activity__item-content {
+				margin: var(--wpds-dimension-gap-md) 0;
+			}
+		}
+
+		&.is-balanced {
+			.dataviews-view-picker-activity__item-type {
+				width: var(--wpds-dimension-size-sm);
+
+				&::before {
+					height: var(--wpds-dimension-size-3xs);
+				}
+			}
+			.dataviews-view-picker-activity__item-type-icon {
+				width: calc(var(--wpds-dimension-size-sm) + 1px);
+				height: calc(var(--wpds-dimension-size-sm) + 1px);
+			}
+			.dataviews-view-picker-activity__item-content {
+				margin: var(--wpds-dimension-gap-md) 0;
+				padding-top: var(--wpds-dimension-padding-sm);
+			}
+		}
+
+		&.is-comfortable {
+			.dataviews-view-picker-activity__item-type {
+				width: var(--wpds-dimension-size-md);
+
+				&::before {
+					height: var(--wpds-dimension-size-4xs);
+				}
+			}
+			.dataviews-view-picker-activity__item-type-icon {
+				width: calc(var(--wpds-dimension-size-md) + 1px);
+				height: calc(var(--wpds-dimension-size-md) + 1px);
+			}
+			.dataviews-view-picker-activity__item-content {
+				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-picker-activity__item-bullet {
+				width: calc(var(--wpds-dimension-size-4xs) + 1px);
+				height: calc(var(--wpds-dimension-size-4xs) + 1px);
+				position: relative;
+				top: 50%;
+				transform: translateY(-50%);
+			}
+		}
+	}
+
+	.dataviews-view-picker-activity__item-content {
+		flex-grow: 1;
+
+		.dataviews-view-picker-activity__item-title,
+		.dataviews-view-picker-activity__item-description,
+		.dataviews-view-picker-activity__item-fields {
+			min-height: var(--wpds-dimension-size-2xs);
+		}
+
+		.dataviews-view-picker-activity__item-title {
+			position: relative;
+			display: flex;
+			align-items: center;
+			flex: 1;
+			overflow: hidden;
+		}
+
+		.dataviews-view-picker-activity__item-description {
+			&:empty {
+				display: none;
+			}
+		}
+
+		.dataviews-view-picker-activity__item-fields {
+			color: var(--wpds-color-foreground-content-neutral-weak);
+			display: flex;
+			gap: var(--wpds-dimension-gap-md);
+			row-gap: var(--wpds-dimension-gap-xs);
+			flex-wrap: wrap;
+
+			&:empty {
+				display: none;
+			}
+
+			.dataviews-view-picker-activity__item-field {
+				&:has(.dataviews-view-picker-activity__item-field-value:empty) {
+					display: none;
+				}
+			}
+
+			.dataviews-view-picker-activity__item-field-value {
+				display: flex;
+				align-items: center;
+			}
+		}
+	}
+
+	// Timeline connector line
+	.dataviews-view-picker-activity__item-type {
+		align-self: stretch;
+		flex-shrink: 0;
+
+		&::after {
+			content: "";
+			flex: 1 1 auto;
+			width: 1px;
+			margin: 0 auto;
+			background-color: var(--wpds-color-stroke-surface-neutral);
+		}
+
+		&::before {
+			content: "";
+			flex: 0 0 auto;
+			width: 1px;
+			margin: 0 auto;
+			background-color: var(--wpds-color-stroke-surface-neutral);
+		}
+	}
+
+	// First and last item timeline lines
+	.dataviews-view-picker-activity__item:first-child {
+		.dataviews-view-picker-activity__item-type {
+			&::before {
+				visibility: hidden;
+			}
+		}
+	}
+
+	.dataviews-view-picker-activity-group:last-of-type > .dataviews-view-picker-activity__item:last-of-type,
+	& > .dataviews-view-picker-activity__item:last-child {
+		.dataviews-view-picker-activity__item-type {
+			&::after {
+				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%);
+			}
+		}
+	}
+
+	.dataviews-view-picker-activity-group__header {
+		font-size: var(--wpds-typography-font-size-lg);
+		font-weight: var(--wpds-typography-font-weight-medium);
+		color: var(--wpds-color-foreground-content-neutral-weak);
+		margin: 0 0 var(--wpds-dimension-gap-sm) 0;
+		padding: 0;
+		padding-inline-start: var(--wpds-dimension-padding-2xl);
+	}
+
+	// Bullet/icon styling
+	.dataviews-view-picker-activity__item-type-icon {
+		overflow: hidden;
+		flex-shrink: 0;
+		// Transparent so the row tint shows through the corners around the round media.
+		background-color: transparent;
+
+		img,
+		svg,
+		.dataviews-view-picker-activity__item-bullet {
+			display: block;
+			width: 100%;
+			height: 100%;
+			margin: 0 auto;
+			object-fit: cover;
+			border-radius: 50%;
+			box-sizing: border-box;
+			box-shadow: inset 0 0 0 var(--wpds-border-width-xs) var(--wpds-color-stroke-surface-neutral);
+		}
+
+		svg {
+			padding: var(--wpds-dimension-padding-xs);
+		}
+
+		.dataviews-view-picker-activity__item-bullet {
+			background-color: var(--wpds-color-stroke-surface-neutral);
+		}
+	}
+}

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

@@ -22,7 +22,7 @@
 		}
 
 		.dataviews-view-picker-grid__title-field {
-			min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available. Preserve layout when there is no ellipsis button
+			min-height: var(--wpds-dimension-size-sm); // TODO: Preserve layout when there is no ellipsis button
 			overflow: hidden;
 			align-content: center;
 			text-align: start;
@@ -35,16 +35,16 @@
 
 		&.is-selected {
 			.dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
-				color: var(--wpds-color-fg-content-neutral);
+				color: var(--wpds-color-foreground-content-neutral);
 			}
 		}
 		&.is-selected .dataviews-view-picker-grid__media::after {
 			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);
+				inset 0 0 0 var(--wpds-border-width-sm) var(--wpds-color-background-surface-neutral-strong);
 		}
 		.dataviews-view-picker-grid__media:focus::after {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand);
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus);
 		}
 	}
 
@@ -56,7 +56,7 @@
 		}
 
 		[data-active-item="true"] {
-			outline: 2px solid var(--wpds-color-stroke-focus-brand);
+			outline: 2px solid var(--wpds-color-stroke-focus);
 		}
 	}
 
@@ -75,7 +75,7 @@
 		width: 100%;
 		aspect-ratio: 1/1;
 		min-height: 0;
-		background-color: var(--wpds-color-bg-surface-neutral-strong);
+		background-color: var(--wpds-color-background-surface-neutral-strong);
 		border-radius: var(--wpds-border-radius-md);
 		position: relative;
 
@@ -108,18 +108,24 @@
 		}
 
 		.dataviews-view-picker-grid__field-value:not(:empty) {
-			min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
+			min-height: var(--wpds-dimension-size-sm);
 			line-height: var(--wpds-typography-line-height-sm);
-			padding-top: calc(var(--wpds-dimension-base) / 2);
+			// Top half of the slack between the row height and the line box,
+			// optically centering a single line within the row.
+			padding-top:
+				calc((
+					var(--wpds-dimension-size-sm) -
+					var(--wpds-typography-line-height-sm)
+				) / 2);
 		}
 
 		.dataviews-view-picker-grid__field {
-			min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
+			min-height: var(--wpds-dimension-size-sm);
 			align-items: center;
 
 			.dataviews-view-picker-grid__field-name {
 				width: 35%;
-				color: var(--wpds-color-fg-content-neutral-weak);
+				color: var(--wpds-color-foreground-content-neutral-weak);
 				overflow: hidden;
 				text-overflow: ellipsis;
 				white-space: nowrap;
@@ -176,7 +182,7 @@
 .dataviews-view-picker-grid-group__header {
 	font-size: var(--wpds-typography-font-size-lg);
 	font-weight: var(--wpds-typography-font-weight-medium);
-	color: var(--wpds-color-fg-content-neutral);
+	color: var(--wpds-color-foreground-content-neutral);
 	margin: 0 0 var(--wpds-dimension-gap-sm) 0;
-	padding: 0 calc(var(--wpds-dimension-base) * 12);
+	padding: 0 48px;
 }

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

@@ -7,7 +7,9 @@
 
 	// Constrain checkbox column to fixed width while other columns share remaining space.
 	.dataviews-view-table__checkbox-column {
-		width: calc(var(--wpds-dimension-base) * 12);
+		// TODO: Replace with a `--wpds-dimension-size-*` token if 48px is added
+		// to the WPDS element size scale.
+		width: 48px;
 	}
 
 	tbody:focus-visible {
@@ -18,7 +20,7 @@
 		}
 
 		[data-active-item="true"] {
-			outline: 2px solid var(--wpds-color-stroke-focus-brand);
+			outline: 2px solid var(--wpds-color-stroke-focus);
 		}
 	}
 
@@ -37,15 +39,15 @@
 		cursor: var(--wpds-cursor-control);
 
 		&.is-selected {
-			background-color: var(--wpds-color-bg-interactive-brand-weak-active);
+			background-color: var(--wpds-color-background-interactive-brand-weak-active);
 		}
 
 		&.is-hovered {
-			background-color: var(--wpds-color-bg-interactive-brand-weak-active);
+			background-color: var(--wpds-color-background-interactive-brand-weak-active);
 		}
 
 		&.is-selected.is-hovered {
-			background-color: var(--wpds-color-bg-interactive-brand-weak-active);
+			background-color: var(--wpds-color-background-interactive-brand-weak-active);
 		}
 	}
 }

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

@@ -7,13 +7,13 @@
 	border-color: inherit;
 	border-collapse: collapse;
 	position: relative;
-	color: var(--wpds-color-fg-content-neutral-weak);
+	color: var(--wpds-color-foreground-content-neutral-weak);
 	margin-bottom: auto;
 	background-color: inherit;
 
 	th {
 		text-align: left;
-		color: var(--wpds-color-fg-content-neutral);
+		color: var(--wpds-color-foreground-content-neutral);
 		font-weight: normal;
 		font-size: var(--wpds-typography-font-size-md);
 	}
@@ -28,7 +28,7 @@
 		&.dataviews-view-table__actions-column--sticky {
 			position: sticky;
 			right: 0;
-			background-color: var(--wp-dataviews-color-background, var(--wpds-color-bg-surface-neutral-strong));
+			background-color: var(--wp-dataviews-color-background, var(--wpds-color-background-surface-neutral-strong));
 		}
 
 		&.dataviews-view-table__actions-column--stuck {
@@ -40,7 +40,7 @@
 				bottom: 0;
 				left: 0;
 				width: 1px;
-				background-color: var(--wpds-color-bg-surface-neutral);
+				background-color: var(--wpds-color-background-surface-neutral);
 			}
 		}
 
@@ -83,8 +83,8 @@
 		}
 
 		&.is-selected {
-			background-color: var(--wpds-color-bg-interactive-brand-weak-active);
-			color: var(--wpds-color-fg-content-neutral);
+			background-color: var(--wpds-color-background-interactive-brand-weak-active);
+			color: var(--wpds-color-foreground-content-neutral);
 
 			&,
 			& + tr {
@@ -92,7 +92,7 @@
 			}
 
 			.dataviews-view-table__actions-column--sticky {
-				background-color: var(--wpds-color-bg-interactive-brand-weak-active);
+				background-color: var(--wpds-color-background-interactive-brand-weak-active);
 			}
 		}
 
@@ -112,14 +112,14 @@
 			&:focus-within,
 			&:hover {
 				.dataviews-view-table__actions-column--sticky {
-					background-color: var(--wp-dataviews-color-background, var(--wpds-color-bg-surface-neutral-strong));
+					background-color: var(--wp-dataviews-color-background, var(--wpds-color-background-surface-neutral-strong));
 				}
 			}
 
 			&.is-selected,
 			&.is-selected:hover {
 				.dataviews-view-table__actions-column--sticky {
-					background-color: var(--wpds-color-bg-interactive-brand-weak-active);
+					background-color: var(--wpds-color-background-interactive-brand-weak-active);
 				}
 			}
 		}
@@ -181,7 +181,7 @@
 			vertical-align: top;
 		}
 		.dataviews-view-table__cell-content-wrapper {
-			min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+			min-height: var(--wpds-dimension-size-md);
 			display: flex;
 			align-items: center;
 			white-space: nowrap;
@@ -207,7 +207,7 @@
 		font-weight: var(--wpds-typography-font-weight-medium);
 
 		&:not(:hover) {
-			color: var(--wpds-color-fg-interactive-neutral);
+			color: var(--wpds-color-foreground-interactive-neutral);
 		}
 
 		span {
@@ -276,17 +276,17 @@
 
 .dataviews-column-primary__media {
 	max-width: 60px;
-	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
+	min-width: var(--wpds-dimension-size-md);
+	min-height: var(--wpds-dimension-size-md);
 	overflow: hidden;
 	position: relative;
 	flex-shrink: 0;
-	background-color: var(--wpds-color-bg-surface-neutral-strong);
+	background-color: var(--wpds-color-background-surface-neutral-strong);
 	border-radius: var(--wpds-border-radius-md);
 
 	img {
-		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
+		width: var(--wpds-dimension-size-md);
+		height: var(--wpds-dimension-size-md);
 		object-fit: cover;
 	}
 
@@ -314,7 +314,7 @@
 	.dataviews-view-table__group-header-cell {
 		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);
+		color: var(--wpds-color-foreground-content-neutral);
 	}
 }
 

package/src/components/dataviews-picker-footer/index.tsx

@@ -22,7 +22,10 @@ export function useIsMultiselectPicker< Item >(
 	actions: Action< Item >[] | undefined
 ) {
 	return useMemo( () => {
-		return actions?.every( ( action ) => action.supportsBulk );
+		return (
+			!! actions?.length &&
+			actions?.every( ( action ) => action.supportsBulk )
+		);
 	}, [ actions ] );
 }
 
@@ -145,7 +148,7 @@ function ActionButtons< Item >( {
 	);
 }
 
-export function DataViewsPickerFooter() {
+function PickerBulkSelectionInfo() {
 	const {
 		data,
 		selection,
@@ -158,6 +161,17 @@ export function DataViewsPickerFooter() {
 
 	const isMultiselect = useIsMultiselectPicker( actions );
 
+	const selectedItems = useMemo(
+		() =>
+			data.filter( ( item ) => selection.includes( getItemId( item ) ) ),
+		[ selection, getItemId, data ]
+	);
+
+	// The count and the selection checkbox belong with the actions, mirroring `DataViews`.
+	if ( ! actions.length ) {
+		return null;
+	}
+
 	const message = getFooterMessage(
 		selection.length,
 		data.length,
@@ -165,12 +179,88 @@ export function DataViewsPickerFooter() {
 		!! view.infiniteScrollEnabled
 	);
 
+	return (
+		<Stack
+			direction="row"
+			className="dataviews-picker-footer__bulk-selection"
+			gap="md"
+			align="center"
+		>
+			{ isMultiselect && (
+				<BulkSelectionCheckbox
+					selection={ selection }
+					selectedItems={ selectedItems }
+					onChangeSelection={ onChangeSelection }
+					data={ data }
+					getItemId={ getItemId }
+					disableSelectAll={ !! view.infiniteScrollEnabled }
+				/>
+			) }
+			<span className="dataviews-bulk-actions-footer__item-count">
+				{ message }
+			</span>
+		</Stack>
+	);
+}
+
+function PickerActions() {
+	const {
+		data,
+		selection,
+		getItemId,
+		actions = EMPTY_ARRAY,
+	} = useContext( DataViewsContext );
+
 	const selectedItems = useMemo(
 		() =>
 			data.filter( ( item ) => selection.includes( getItemId( item ) ) ),
 		[ selection, getItemId, data ]
 	);
 
+	if ( ! actions.length ) {
+		return null;
+	}
+
+	return (
+		<div className="dataviews-picker-footer__actions">
+			<ActionButtons
+				actions={ actions }
+				items={ selectedItems }
+				selection={ selection }
+			/>
+		</div>
+	);
+}
+
+// The bulk-selection info and action buttons without pagination — the picker
+// counterpart to `DataViews.BulkActionToolbar`, for free composition.
+export function DataViewsPickerBulkActionToolbar() {
+	return (
+		<Stack direction="row" gap="md" align="center">
+			<PickerBulkSelectionInfo />
+			<PickerActions />
+		</Stack>
+	);
+}
+
+// The full picker footer: bulk-selection info, pagination, and actions — the
+// picker counterpart to `DataViews.Footer`.
+export function DataViewsPickerFooter() {
+	const {
+		actions = EMPTY_ARRAY,
+		paginationInfo,
+		view,
+	} = useContext( DataViewsContext );
+
+	const hasPagination =
+		! view.infiniteScrollEnabled &&
+		!! paginationInfo.totalItems &&
+		paginationInfo.totalPages > 1;
+
+	if ( ! actions.length && ! hasPagination ) {
+		return null;
+	}
+
 	return (
 		<Stack
 			direction="row"
@@ -179,36 +269,9 @@ export function DataViewsPickerFooter() {
 			className="dataviews-footer"
 			gap="sm"
 		>
-			<Stack
-				direction="row"
-				className="dataviews-picker-footer__bulk-selection"
-				gap="md"
-				align="center"
-			>
-				{ isMultiselect && (
-					<BulkSelectionCheckbox
-						selection={ selection }
-						selectedItems={ selectedItems }
-						onChangeSelection={ onChangeSelection }
-						data={ data }
-						getItemId={ getItemId }
-						disableSelectAll={ !! view.infiniteScrollEnabled }
-					/>
-				) }
-				<span className="dataviews-bulk-actions-footer__item-count">
-					{ message }
-				</span>
-			</Stack>
+			<PickerBulkSelectionInfo />
 			<DataViewsPagination />
-			{ Boolean( actions?.length ) && (
-				<div className="dataviews-picker-footer__actions">
-					<ActionButtons
-						actions={ actions }
-						items={ selectedItems }
-						selection={ selection }
-					/>
-				</div>
-			) }
+			<PickerActions />
 		</Stack>
 	);
 }

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

@@ -3,7 +3,7 @@
 // - align footer actions to the right.
 .dataviews-picker-footer__bulk-selection {
 	align-self: flex-start;
-	height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+	height: var(--wpds-dimension-size-md);
 }
 .dataviews-picker-footer__actions {
 	align-self: flex-end;

package/src/components/dataviews-view-config/index.tsx

@@ -85,6 +85,7 @@ export function ViewTypeMenu() {
 									case 'table':
 									case 'pickerGrid':
 									case 'pickerTable':
+									case 'pickerActivity':
 									case 'activity':
 										const viewWithoutLayout = { ...view };
 										if ( 'layout' in viewWithoutLayout ) {

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

@@ -75,7 +75,7 @@
 	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);
+	background: var(--wpds-color-background-interactive-brand-strong);
 	border-radius: 50%;
 	pointer-events: none;
 }

package/src/constants.ts

@@ -54,5 +54,6 @@ export const LAYOUT_ACTIVITY = 'activity';
 // Picker view layouts.
 export const LAYOUT_PICKER_GRID = 'pickerGrid';
 export const LAYOUT_PICKER_TABLE = 'pickerTable';
+export const LAYOUT_PICKER_ACTIVITY = 'pickerActivity';
 
 export const DAYS_OF_WEEK: DayNumber[] = [ 0, 1, 2, 3, 4, 5, 6 ];

package/src/dataform/stories/content.story.tsx

@@ -18,7 +18,7 @@ const meta: Meta< typeof DataForm > = {
 	parameters: {
 		controls: { disable: true },
 	},
-	tags: [ '!dev' /* Hide individual story pages from sidebar */ ],
+	tags: [ '!dev' /* Hide individual story pages from sidebar */, 'manifest' ],
 };
 export default meta;
 

package/src/dataform/stories/index.story.tsx

@@ -13,6 +13,7 @@ import ValidationComponent from './validation';
 import VisibilityComponent from './visibility';
 
 const meta = {
+	tags: [ 'manifest' ],
 	title: 'DataViews/DataForm',
 	component: DataForm,
 };

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

@@ -21,6 +21,7 @@ import EmptyComponent from './empty';
 import './style.css';
 
 const meta = {
+	tags: [ 'manifest' ],
 	title: 'DataViews/DataViews',
 	component: DataViews,
 	args: {