@wordpress/dataviews 16.0.0 → 17.0.0

package/src/dataviews/style.scss

@@ -16,14 +16,14 @@
 	flex-grow: 1;
 	min-height: 0;
 	box-sizing: border-box;
-	scroll-padding-bottom: calc(var(--wpds-dimension-base) * 16);
+	scroll-padding-bottom: 64px;
 	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
 	container: dataviews-wrapper / inline-size;
 	display: flex;
 	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' >;
 }