@wordpress/dataviews 11.4.1-next.v.0 → 12.0.0

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

@@ -66,6 +66,7 @@ export function ItemClickWrapper< Item >( {
 		} & ComponentProps< 'a' >
 	) => ReactElement;
 	className?: string;
+	title?: string;
 	children: ReactNode;
 } ) {
 	// Always render a wrapper element so layout and styling relying on the wrapper

package/src/components/dataviews-pagination/index.tsx

@@ -51,13 +51,13 @@ export function DataViewsPagination() {
 				className="dataviews-pagination"
 				justify="end"
 				align="center"
-				gap="lg"
+				gap="xl"
 			>
 				<Stack
 					direction="row"
 					justify="flex-start"
 					align="center"
-					gap="2xs"
+					gap="xs"
 					className="dataviews-pagination__page-select"
 				>
 					{ createInterpolateElement(
@@ -90,7 +90,7 @@ export function DataViewsPagination() {
 						}
 					) }
 				</Stack>
-				<Stack direction="row" gap="2xs" align="center">
+				<Stack direction="row" gap="xs" align="center">
 					<Button
 						onClick={ () =>
 							onChangeView( {

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

@@ -88,7 +88,7 @@ function ActionButtons< Item >( {
 	);
 
 	return (
-		<Stack direction="row" gap="2xs">
+		<Stack direction="row" gap="xs">
 			{ actions.map( ( action ) => {
 				// Only support actions with callbacks for DataViewsPicker.
 				// This is because many use cases of the picker will be already within modals.
@@ -158,12 +158,12 @@ export function DataViewsPickerFooter() {
 			justify="space-between"
 			align="center"
 			className="dataviews-footer"
-			gap="xs"
+			gap="sm"
 		>
 			<Stack
 				direction="row"
 				className="dataviews-picker-footer__bulk-selection"
-				gap="sm"
+				gap="md"
 				align="center"
 			>
 				{ isMultiselect && (

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

@@ -14,9 +14,7 @@ import {
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
 	SelectControl,
-	__experimentalGrid as Grid,
 	__experimentalHeading as Heading,
-	__experimentalText as Text,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
@@ -247,46 +245,36 @@ function ItemsPerPageControl() {
 	);
 }
 
-function SettingsSection( {
-	title,
-	description,
-	children,
-}: {
-	title: string;
-	description?: string;
-	children: React.ReactNode;
-} ) {
+function ResetViewButton() {
+	const { onReset } = useContext( DataViewsContext );
+
+	// Don't render if no persistence support (onReset is undefined)
+	if ( onReset === undefined ) {
+		return null;
+	}
+
+	const isDisabled = onReset === false;
+
 	return (
-		<Grid columns={ 12 } className="dataviews-settings-section" gap={ 4 }>
-			<div className="dataviews-settings-section__sidebar">
-				<Heading
-					level={ 2 }
-					className="dataviews-settings-section__title"
-				>
-					{ title }
-				</Heading>
-				{ description && (
-					<Text
-						variant="muted"
-						className="dataviews-settings-section__description"
-					>
-						{ description }
-					</Text>
-				) }
-			</div>
-			<Grid
-				columns={ 8 }
-				gap={ 4 }
-				className="dataviews-settings-section__content"
-			>
-				{ children }
-			</Grid>
-		</Grid>
+		<Button
+			variant="tertiary"
+			size="compact"
+			disabled={ isDisabled }
+			accessibleWhenDisabled
+			className="dataviews-view-config__reset-button"
+			onClick={ () => {
+				if ( typeof onReset === 'function' ) {
+					onReset();
+				}
+			} }
+		>
+			{ __( 'Reset view' ) }
+		</Button>
 	);
 }
 
 export function DataviewsViewConfigDropdown() {
-	const { view } = useContext( DataViewsContext );
+	const { view, onReset } = useContext( DataViewsContext );
 	const popoverId = useInstanceId(
 		_DataViewsViewConfig,
 		'dataviews-view-config-dropdown'
@@ -294,6 +282,7 @@ export function DataviewsViewConfigDropdown() {
 	const activeLayout = VIEW_LAYOUTS.find(
 		( layout ) => layout.type === view.type
 	);
+	const isModified = typeof onReset === 'function';
 	return (
 		<Dropdown
 			expandOnMobile
@@ -303,14 +292,22 @@ export function DataviewsViewConfigDropdown() {
 			} }
 			renderToggle={ ( { onToggle, isOpen } ) => {
 				return (
-					<Button
-						size="compact"
-						icon={ cog }
-						label={ _x( 'View options', 'View is used as a noun' ) }
-						onClick={ onToggle }
-						aria-expanded={ isOpen ? 'true' : 'false' }
-						aria-controls={ popoverId }
-					/>
+					<div className="dataviews-view-config__toggle-wrapper">
+						<Button
+							size="compact"
+							icon={ cog }
+							label={ _x(
+								'View options',
+								'View is used as a noun'
+							) }
+							onClick={ onToggle }
+							aria-expanded={ isOpen ? 'true' : 'false' }
+							aria-controls={ popoverId }
+						/>
+						{ isModified && (
+							<span className="dataviews-view-config__modified-indicator" />
+						) }
+					</div>
 				);
 			} }
 			renderContent={ () => (
@@ -321,13 +318,27 @@ export function DataviewsViewConfigDropdown() {
 					<Stack
 						direction="column"
 						className="dataviews-view-config"
-						gap="lg"
+						gap="xl"
 					>
-						<SettingsSection title={ __( 'Appearance' ) }>
+						<Stack
+							direction="row"
+							justify="space-between"
+							align="center"
+							className="dataviews-view-config__header"
+						>
+							<Heading
+								level={ 2 }
+								className="dataviews-settings-section__title"
+							>
+								{ __( 'Appearance' ) }
+							</Heading>
+							<ResetViewButton />
+						</Stack>
+						<Stack direction="column" gap="lg">
 							<Stack
 								direction="row"
-								gap="xs"
-								className="is-divided-in-two"
+								gap="sm"
+								className="dataviews-view-config__sort-controls"
 							>
 								<SortFieldControl />
 								<SortDirectionControl />
@@ -338,7 +349,7 @@ export function DataviewsViewConfigDropdown() {
 							<InfiniteScrollToggle />
 							<ItemsPerPageControl />
 							<PropertiesSection />
-						</SettingsSection>
+						</Stack>
 					</Stack>
 				</DropdownContentWrapper>
 			) }

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

@@ -30,7 +30,7 @@ function FieldItem( {
 } ) {
 	return (
 		<Item onClick={ field.enableHiding ? onToggleVisibility : undefined }>
-			<Stack direction="row" gap="xs" justify="flex-start" align="center">
+			<Stack direction="row" gap="sm" justify="flex-start" align="center">
 				<div style={ { height: 24, width: 24 } }>
 					{ isVisible && <Icon icon={ check } /> }
 				</div>

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

@@ -59,6 +59,27 @@
 	}
 }
 
+.dataviews-view-config__sort-controls > * {
+	flex: 1;
+}
+
 .dataviews-view-config__label {
 	text-wrap: nowrap;
 }
+
+.dataviews-view-config__toggle-wrapper {
+	position: relative;
+	display: inline-flex;
+}
+
+.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);
+	border-radius: 50%;
+	pointer-events: none;
+}
+

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

@@ -68,7 +68,7 @@ export const Labels: Story = {
 		);
 
 		return (
-			<Stack direction="column" gap="md">
+			<Stack direction="column" gap="lg">
 				<DataForm< SampleData >
 					data={ data }
 					fields={ fields }
@@ -135,7 +135,7 @@ export const HelpText: Story = {
 		);
 
 		return (
-			<Stack direction="column" gap="md">
+			<Stack direction="column" gap="lg">
 				<DataForm< HelpTextData >
 					data={ data }
 					fields={ fields }
@@ -240,7 +240,7 @@ export const ValidationMessages: Story = {
 
 		return (
 			<div ref={ containerRef }>
-				<Stack direction="column" gap="lg">
+				<Stack direction="column" gap="xl">
 					<DataForm< ValidationMessagesData >
 						data={ data }
 						fields={ fields }
@@ -314,7 +314,7 @@ export const HighLevelHelpText: Story = {
 		);
 
 		return (
-			<Stack direction="column" gap="md">
+			<Stack direction="column" gap="lg">
 				<DataForm< HighLevelHelpTextData >
 					data={ data }
 					fields={ fields }
@@ -375,7 +375,7 @@ export const Placeholders: Story = {
 		);
 
 		return (
-			<Stack direction="column" gap="md">
+			<Stack direction="column" gap="lg">
 				<DataForm< PlaceholdersData >
 					data={ data }
 					fields={ fields }

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

@@ -62,6 +62,11 @@ export const LayoutPanel = {
 			description: 'Chooses how to open the panel.',
 			options: [ 'default', 'dropdown', 'modal' ],
 		},
+		editVisibility: {
+			control: { type: 'select' },
+			description: 'Chooses when the edit icon is visible.',
+			options: [ 'default', 'always', 'on-hover' ],
+		},
 	},
 };
 
@@ -112,7 +117,7 @@ export const Validation = {
 		required: {
 			control: { type: 'boolean' },
 			description:
-				'Whether or not the required validation rule is active.',
+				'Whether or not the required validation rule is active (only applies when fieldDistribution is allSame).',
 		},
 		elements: {
 			control: { type: 'select' },

package/src/dataform/stories/layout-panel.tsx

@@ -7,7 +7,13 @@ import { useMemo, useState } from '@wordpress/element';
  * Internal dependencies
  */
 import DataForm from '../index';
-import type { Field, Form, Layout, PanelLayout } from '../../types';
+import type {
+	Field,
+	Form,
+	Layout,
+	PanelLayout,
+	EditVisibility,
+} from '../../types';
 
 type SamplePost = {
 	title: string;
@@ -261,10 +267,12 @@ const getPanelLayoutFromStoryArgs = ( {
 	summary,
 	labelPosition,
 	openAs,
+	editVisibility,
 }: {
 	summary?: string[];
 	labelPosition?: 'default' | 'top' | 'side' | 'none';
 	openAs?: 'default' | 'dropdown' | 'modal';
+	editVisibility?: 'default' | EditVisibility;
 } ): Layout | undefined => {
 	const panelLayout: PanelLayout = {
 		type: 'panel',
@@ -282,16 +290,22 @@ const getPanelLayoutFromStoryArgs = ( {
 		panelLayout.summary = summary;
 	}
 
+	if ( editVisibility !== 'default' ) {
+		panelLayout.editVisibility = editVisibility;
+	}
+
 	return panelLayout;
 };
 
 const LayoutPanelComponent = ( {
 	labelPosition,
 	openAs,
+	editVisibility,
 }: {
 	type: 'default' | 'regular' | 'panel' | 'card';
 	labelPosition: 'default' | 'top' | 'side' | 'none';
 	openAs: 'default' | 'dropdown' | 'modal';
+	editVisibility: 'default' | EditVisibility;
 } ) => {
 	const [ post, setPost ] = useState< SamplePost >( {
 		title: 'Hello, World!',
@@ -321,6 +335,7 @@ const LayoutPanelComponent = ( {
 			layout: getPanelLayoutFromStoryArgs( {
 				labelPosition,
 				openAs,
+				editVisibility,
 			} ),
 			fields: [
 				'title',
@@ -357,6 +372,7 @@ const LayoutPanelComponent = ( {
 						summary: [ 'origin', 'destination', 'flight_status' ],
 						labelPosition,
 						openAs,
+						editVisibility,
 					} ),
 				},
 				{
@@ -367,11 +383,12 @@ const LayoutPanelComponent = ( {
 						summary: [ 'author', 'seat' ],
 						labelPosition,
 						openAs,
+						editVisibility,
 					} ),
 				},
 			],
 		};
-	}, [ labelPosition, openAs ] );
+	}, [ labelPosition, openAs, editVisibility ] );
 
 	return (
 		<DataForm< SamplePost >

package/src/dataform/stories/validation.tsx

@@ -877,7 +877,7 @@ const ValidationComponent = ( {
 				},
 			},
 		];
-	}, [ elements, custom, required, pattern, minMax, getElements ] );
+	}, [ elements, custom, pattern, minMax, getElements, required ] );
 
 	const form = useMemo( () => {
 		if ( layout === 'regular' ) {
@@ -1018,7 +1018,7 @@ const ValidationComponent = ( {
 
 	return (
 		<form>
-			<Stack direction="column" align="start" gap="xl">
+			<Stack direction="column" align="start" gap="3xl">
 				<DataForm< ValidatedItem >
 					data={ post }
 					fields={ _fields }

package/src/dataform/test/dataform.tsx

@@ -511,9 +511,9 @@ describe( 'DataForm component', () => {
 				/>
 			);
 
-			const titleField = screen.getByText( data.title );
+			const titleButton = fieldsSelector.title.view();
 			const user = await userEvent.setup();
-			await user.click( titleField );
+			await user.click( titleButton );
 			const titleEditField = screen.getByText(
 				'This is the Title Field'
 			);

package/src/dataviews/index.tsx

@@ -66,6 +66,7 @@ type DataViewsProps< Item > = {
 		perPageSizes: number[];
 	};
 	empty?: ReactNode;
+	onReset?: ( () => void ) | false;
 } & ( Item extends ItemWithId
 	? { getItemId?: ( item: Item ) => string }
 	: { getItemId: ( item: Item ) => string } );
@@ -95,18 +96,18 @@ function DefaultUI( {
 				align="top"
 				justify="space-between"
 				className="dataviews__view-actions"
-				gap="2xs"
+				gap="xs"
 			>
 				<Stack
 					direction="row"
 					justify="start"
-					gap="xs"
+					gap="sm"
 					className="dataviews__search"
 				>
 					{ search && <DataViewsSearch label={ searchLabel } /> }
 					<FiltersToggle />
 				</Stack>
-				<Stack direction="row" gap="2xs" style={ { flexShrink: 0 } }>
+				<Stack direction="row" gap="xs" style={ { flexShrink: 0 } }>
 					<DataViewsViewConfig />
 					{ header }
 				</Stack>
@@ -140,9 +141,10 @@ function DataViews< Item >( {
 	children,
 	config = { perPageSizes: [ 10, 20, 50, 100 ] },
 	empty,
+	onReset,
 }: DataViewsProps< Item > ) {
 	const { infiniteScrollHandler } = paginationInfo;
-	const containerRef = useRef< HTMLDivElement | null >( null );
+	const containerRef = useRef< HTMLDivElement >( null );
 	const [ containerWidth, setContainerWidth ] = useState( 0 );
 	const resizeObserverRef = useResizeObserver(
 		( resizeObserverEntries: any ) => {
@@ -267,6 +269,7 @@ function DataViews< Item >( {
 				config,
 				empty,
 				hasInfiniteScrollHandler: !! infiniteScrollHandler,
+				onReset,
 			} }
 		>
 			<div className="dataviews-wrapper" ref={ containerRef }>

package/src/dataviews/stories/empty.tsx

@@ -39,7 +39,7 @@ const PlanetIllustration = () => (
 	</svg>
 );
 const CustomEmptyComponent = () => (
-	<Stack direction="column" align="center" justify="center" gap="sm">
+	<Stack direction="column" align="center" justify="center" gap="md">
 		<PlanetIllustration />
 		<Text>No celestial bodies found</Text>
 	</Stack>