DataForm: panel layout can open as dropdown or modal

packages/dataviews/CHANGELOG.md

@@ -11,6 +11,7 @@
 - Introduce a new `array` DataForm Edit control that supports multi-selection. [#71136](https://github.com/WordPress/gutenberg/pull/71136)
 - Add `enableMoving` option to the `table` layout to allow or disallow column moving left and right. [#71120](https://github.com/WordPress/gutenberg/pull/71120)
 - Add infinite scroll support across all layout types (grid, list, table). Enable infinite scroll by providing an `infiniteScrollHandler` function in the `paginationInfo` prop and toggling the feature in the view configuration. ([#70955](https://github.com/WordPress/gutenberg/pull/70955))
+- Add support for modal in DataForm panel layouts. [#71212](https://github.com/WordPress/gutenberg/pull/71212)
 
 ### Enhancements
 

packages/dataviews/src/components/dataform/stories/index.story.tsx

@@ -30,6 +30,9 @@ type SamplePost = {
 	filesize?: number;
 	dimensions?: string;
 	tags?: string[];
+	address1?: string;
+	address2?: string;
+	city?: string;
 };
 
 const meta = {
@@ -47,6 +50,11 @@ const meta = {
 			description: 'Chooses the label position of the layout.',
 			options: [ 'default', 'top', 'side', 'none' ],
 		},
+		openAs: {
+			control: { type: 'select' },
+			description: 'Chooses the type of panel to use.',
+			options: [ 'default', 'dropdown', 'modal' ],
+		},
 	},
 };
 export default meta;
@@ -158,14 +166,31 @@ const fields = [
 			{ value: 'travel', label: 'Travel' },
 		],
 	},
+	{
+		id: 'address1',
+		label: 'Address 1',
+		type: 'text' as const,
+	},
+	{
+		id: 'address2',
+		label: 'Address 2',
+		type: 'text' as const,
+	},
+	{
+		id: 'city',
+		label: 'City',
+		type: 'text' as const,
+	},
 ] as Field< SamplePost >[];
 
 export const Default = ( {
 	type,
 	labelPosition,
+	openAs,
 }: {
 	type: 'default' | 'regular' | 'panel' | 'card';
 	labelPosition: 'default' | 'top' | 'side' | 'none';
+	openAs: 'default' | 'dropdown' | 'modal';
 } ) => {
 	const [ post, setPost ] = useState( {
 		title: 'Hello, World!',
@@ -188,6 +213,7 @@ export const Default = ( {
 			layout: {
 				type,
 				labelPosition,
+				openAs,
 			},
 			fields: [
 				'title',
@@ -206,7 +232,7 @@ export const Default = ( {
 				'tags',
 			],
 		} ),
-		[ type, labelPosition ]
+		[ type, labelPosition, openAs ]
 	) as Form;
 
 	return (
@@ -227,9 +253,11 @@ export const Default = ( {
 const CombinedFieldsComponent = ( {
 	type,
 	labelPosition,
+	openAs,
 }: {
 	type: 'default' | 'regular' | 'panel' | 'card';
 	labelPosition: 'default' | 'top' | 'side' | 'none';
+	openAs: 'default' | 'dropdown' | 'modal';
 } ) => {
 	const [ post, setPost ] = useState< SamplePost >( {
 		title: 'Hello, World!',
@@ -242,13 +270,17 @@ const CombinedFieldsComponent = ( {
 		filesize: 1024,
 		dimensions: '1920x1080',
 		tags: [ 'photography' ],
+		address1: '123 Main St',
+		address2: 'Apt 4B',
+		city: 'New York',
 	} );
 
 	const form = useMemo(
 		() => ( {
 			layout: {
 				type,
 				labelPosition,
+				openAs,
 			},
 			fields: [
 				'title',
@@ -262,9 +294,14 @@ const CombinedFieldsComponent = ( {
 				'filesize',
 				'dimensions',
 				'tags',
+				{
+					id: 'address1',
+					label: 'Combined Address',
+					children: [ 'address1', 'address2', 'city' ],
+				},
 			],
 		} ),
-		[ type, labelPosition ]
+		[ type, labelPosition, openAs ]
 	) as Form;
 
 	return (
@@ -725,7 +762,11 @@ const LayoutMixedComponent = () => {
 				fields: [
 					{
 						id: 'title',
-						layout: { type: 'panel', labelPosition: 'top' },
+						layout: {
+							type: 'panel',
+							labelPosition: 'top',
+							openAs: 'dropdown',
+						},
 					},
 					'status',
 					{ id: 'order', layout: { type: 'card' } },

packages/dataviews/src/dataforms-layouts/panel/dropdown.tsx

@@ -0,0 +1,160 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
+	__experimentalSpacer as Spacer,
+	Dropdown,
+	Button,
+} from '@wordpress/components';
+import { sprintf, __, _x } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
+import { closeSmall } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import type { Form, FormField, NormalizedField } from '../../types';
+import { DataFormLayout } from '../data-form-layout';
+import { isCombinedField } from '../is-combined-field';
+import { DEFAULT_LAYOUT } from '../../normalize-form-fields';
+
+function DropdownHeader( {
+	title,
+	onClose,
+}: {
+	title?: string;
+	onClose: () => void;
+} ) {
+	return (
+		<VStack
+			className="dataforms-layouts-panel__dropdown-header"
+			spacing={ 4 }
+		>
+			<HStack alignment="center">
+				{ title && (
+					<Heading level={ 2 } size={ 13 }>
+						{ title }
+					</Heading>
+				) }
+				<Spacer />
+				{ onClose && (
+					<Button
+						label={ __( 'Close' ) }
+						icon={ closeSmall }
+						onClick={ onClose }
+						size="small"
+					/>
+				) }
+			</HStack>
+		</VStack>
+	);
+}
+
+function PanelDropdown< Item >( {
+	fieldDefinition,
+	popoverAnchor,
+	labelPosition = 'side',
+	data,
+	onChange,
+	field,
+}: {
+	fieldDefinition: NormalizedField< Item >;
+	popoverAnchor: HTMLElement | null;
+	labelPosition: 'side' | 'top' | 'none';
+	data: Item;
+	onChange: ( value: any ) => void;
+	field: FormField;
+} ) {
+	const fieldLabel = isCombinedField( field )
+		? field.label
+		: fieldDefinition?.label;
+
+	const form: Form = useMemo(
+		(): Form => ( {
+			layout: DEFAULT_LAYOUT,
+			fields: isCombinedField( field )
+				? field.children
+				: // If not explicit children return the field id itself.
+				  [ { id: field.id } ],
+		} ),
+		[ field ]
+	);
+
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+
+	return (
+		<Dropdown
+			contentClassName="dataforms-layouts-panel__field-dropdown"
+			popoverProps={ popoverProps }
+			focusOnMount
+			toggleProps={ {
+				size: 'compact',
+				variant: 'tertiary',
+				tooltipPosition: 'middle left',
+			} }
+			renderToggle={ ( { isOpen, onToggle } ) => (
+				<Button
+					className="dataforms-layouts-panel__field-control"
+					size="compact"
+					variant={
+						[ 'none', 'top' ].includes( labelPosition )
+							? 'link'
+							: 'tertiary'
+					}
+					aria-expanded={ isOpen }
+					aria-label={ sprintf(
+						// translators: %s: Field name.
+						_x( 'Edit %s', 'field' ),
+						fieldLabel || ''
+					) }
+					onClick={ onToggle }
+					disabled={ fieldDefinition.readOnly === true }
+					accessibleWhenDisabled
+				>
+					<fieldDefinition.render
+						item={ data }
+						field={ fieldDefinition }
+					/>
+				</Button>
+			) }
+			renderContent={ ( { onClose } ) => (
+				<>
+					<DropdownHeader title={ fieldLabel } onClose={ onClose } />
+					<DataFormLayout
+						data={ data }
+						form={ form }
+						onChange={ onChange }
+					>
+						{ ( FieldLayout, nestedField ) => (
+							<FieldLayout
+								key={ nestedField.id }
+								data={ data }
+								field={ nestedField }
+								onChange={ onChange }
+								hideLabelFromVision={
+									( form?.fields ?? [] ).length < 2
+								}
+							/>
+						) }
+					</DataFormLayout>
+				</>
+			) }
+		/>
+	);
+}
+
+export default PanelDropdown;