@wordpress/dataviews 16.0.0 → 17.0.1-next.v.202606191442.0

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: {

package/src/dataviews/style.scss

@@ -23,7 +23,7 @@
 	flex-direction: column;
 	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));
+	background-color: var(--wp-dataviews-color-background, var(--wpds-color-background-surface-neutral-strong));
 }
 
 .dataviews__view-actions,
@@ -82,7 +82,7 @@
 .dataviews-title-field {
 	font-size: var(--wpds-typography-font-size-md);
 	font-weight: var(--wpds-typography-font-weight-medium);
-	color: var(--wpds-color-fg-content-neutral);
+	color: var(--wpds-color-foreground-content-neutral);
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	width: 100%;
@@ -94,10 +94,10 @@
 		overflow: hidden;
 		display: block;
 		flex-grow: 0;
-		color: var(--wpds-color-fg-interactive-neutral);
+		color: var(--wpds-color-foreground-interactive-neutral);
 
 		&:hover {
-			color: var(--wpds-color-fg-interactive-brand);
+			color: var(--wpds-color-foreground-interactive-brand);
 		}
 		@include link-reset();
 	}
@@ -110,18 +110,18 @@
 		overflow: hidden;
 		display: block;
 		width: 100%;
-		color: var(--wpds-color-fg-interactive-neutral-active);
+		color: var(--wpds-color-foreground-interactive-neutral-active);
 		&:hover {
-			color: var(--wpds-color-fg-interactive-brand);
+			color: var(--wpds-color-foreground-interactive-brand);
 		}
 	}
 }
 
 .dataviews-title-field--clickable {
 	cursor: var(--wpds-cursor-control);
-	color: var(--wpds-color-fg-interactive-neutral);
+	color: var(--wpds-color-foreground-interactive-neutral);
 	&:hover {
-		color: var(--wpds-color-fg-interactive-brand);
+		color: var(--wpds-color-foreground-interactive-brand);
 	}
 	@include link-reset();
 }

package/src/dataviews-picker/index.tsx

@@ -29,7 +29,10 @@ import {
 	FiltersToggle,
 } from '../components/dataviews-filters';
 import DataViewsLayout from '../components/dataviews-layout';
-import { DataViewsPickerFooter } from '../components/dataviews-picker-footer';
+import {
+	DataViewsPickerFooter,
+	DataViewsPickerBulkActionToolbar,
+} from '../components/dataviews-picker-footer';
 import DataViewsSearch from '../components/dataviews-search';
 import { DataViewsPagination } from '../components/dataviews-pagination';
 import DataViewsViewConfig, {
@@ -269,7 +272,8 @@ function DataViewsPicker< Item >( {
 // Populate the DataViews sub components
 const DataViewsPickerSubComponents =
 	DataViewsPicker as typeof DataViewsPicker & {
-		BulkActionToolbar: typeof DataViewsPickerFooter;
+		BulkActionToolbar: typeof DataViewsPickerBulkActionToolbar;
+		Footer: typeof DataViewsPickerFooter;
 		Filters: typeof Filters;
 		FiltersToggled: typeof FiltersToggled;
 		FiltersToggle: typeof FiltersToggle;
@@ -280,7 +284,9 @@ const DataViewsPickerSubComponents =
 		ViewConfig: typeof DataviewsViewConfigDropdown;
 	};
 
-DataViewsPickerSubComponents.BulkActionToolbar = DataViewsPickerFooter;
+DataViewsPickerSubComponents.BulkActionToolbar =
+	DataViewsPickerBulkActionToolbar;
+DataViewsPickerSubComponents.Footer = DataViewsPickerFooter;
 DataViewsPickerSubComponents.Filters = Filters;
 DataViewsPickerSubComponents.FiltersToggled = FiltersToggled;
 DataViewsPickerSubComponents.FiltersToggle = FiltersToggle;

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

@@ -20,6 +20,7 @@ import type { ActionButton, View } from '../../types';
 import { data, fields, type SpaceObject } from './fixtures';
 
 const meta = {
+	tags: [ 'manifest' ],
 	title: 'DataViews/DataViewsPicker',
 	component: DataViewsPicker,
 } as Meta< typeof DataViewsPicker >;
@@ -186,6 +187,11 @@ const DataViewsPickerContent = ( {
 				fields={ fields }
 				onChangeView={ setView }
 				config={ { perPageSizes } }
+				defaultLayouts={ {
+					pickerGrid: true,
+					pickerTable: true,
+					pickerActivity: true,
+				} }
 				itemListLabel="Galactic Bodies"
 			/>
 		</>

package/src/dataviews-picker/test/dataviews-picker.tsx

@@ -543,6 +543,11 @@ describe( 'DataViews Picker', () => {
 				screen.getByRole( 'menuitemradio', { name: 'Table' } )
 			).toBeInTheDocument();
 
+			// The Activity layout is opt-in and must not appear by default.
+			expect(
+				screen.queryByRole( 'menuitemradio', { name: 'Activity' } )
+			).not.toBeInTheDocument();
+
 			// The grid layout is active by default.
 			expect(
 				screen.getByRole( 'menuitemradio', { name: 'Grid' } )

package/src/style.scss

@@ -13,6 +13,7 @@
 @use "./components/dataviews-layouts/picker-grid/style.scss" as *;
 @use "./components/dataviews-layouts/picker-table/style.scss" as *;
 @use "./components/dataviews-layouts/activity/style.scss" as *;
+@use "./components/dataviews-layouts/picker-activity/style.scss" as *;
 @use "./components/dataviews-picker-footer/style.scss" as *;
 
 @use "./components/dataform-controls/style.scss" as *;

package/src/types/dataviews.ts

@@ -342,12 +342,24 @@ export interface ViewPickerTable extends ViewBase {
 	};
 }
 
+export interface ViewPickerActivity extends ViewBase {
+	type: 'pickerActivity';
+
+	layout?: {
+		/**
+		 * The density of the view.
+		 */
+		density?: Density;
+	};
+}
+
 export type View =
 	| ViewList
 	| ViewGrid
 	| ViewTable
 	| ViewPickerGrid
 	| ViewPickerTable
+	| ViewPickerActivity
 	| ViewActivity;
 
 interface ActionBase< Item > {
@@ -516,6 +528,11 @@ export interface ViewPickerTableProps< Item >
 	view: ViewPickerTable;
 }
 
+export interface ViewPickerActivityProps< Item >
+	extends Omit< ViewPickerBaseProps< Item >, 'view' > {
+	view: ViewPickerActivity;
+}
+
 export type ViewProps< Item > =
 	| ViewTableProps< Item >
 	| ViewGridProps< Item >
@@ -524,7 +541,8 @@ export type ViewProps< Item > =
 
 export type ViewPickerProps< Item > =
 	| ViewPickerGridProps< Item >
-	| ViewPickerTableProps< Item >;
+	| ViewPickerTableProps< Item >
+	| ViewPickerActivityProps< Item >;
 
 export interface SupportedLayouts {
 	list?: Omit< ViewList, 'type' > | true;
@@ -533,6 +551,7 @@ export interface SupportedLayouts {
 	activity?: Omit< ViewActivity, 'type' > | true;
 	pickerGrid?: Omit< ViewPickerGrid, 'type' > | true;
 	pickerTable?: Omit< ViewPickerTable, 'type' > | true;
+	pickerActivity?: Omit< ViewPickerActivity, 'type' > | true;
 }
 
 export interface NormalizedSupportedLayouts {
@@ -542,4 +561,5 @@ export interface NormalizedSupportedLayouts {
 	activity?: Omit< ViewActivity, 'type' >;
 	pickerGrid?: Omit< ViewPickerGrid, 'type' >;
 	pickerTable?: Omit< ViewPickerTable, 'type' >;
+	pickerActivity?: Omit< ViewPickerActivity, 'type' >;
 }