DataViews: add actions to list layout (#60805)

Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: DaniGuardiola <daniguardiola@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: mrfoxtalbot <mrfoxtalbot@git.wordpress.org>
WordPress · May 14, 2024 · 5ea53bb · 5ea53bb
1 parent 2010994
commit 5ea53bb
Show file tree

Hide file tree

Showing 6 changed files with 276 additions and 47 deletions.
diff --git a/packages/dataviews/src/dataviews.js b/packages/dataviews/src/dataviews.js
@@ -128,16 +128,16 @@ export default function DataViews( {
 				/>
 			</HStack>
 			<ViewComponent
-				fields={ _fields }
-				view={ view }
-				onChangeView={ onChangeView }
 				actions={ actions }
 				data={ data }
+				fields={ _fields }
 				getItemId={ getItemId }
 				isLoading={ isLoading }
+				onChangeView={ onChangeView }
 				onSelectionChange={ onSetSelection }
 				selection={ selection }
 				setOpenedFilter={ setOpenedFilter }
+				view={ view }
 			/>
 			<Pagination
 				view={ view }

diff --git a/packages/dataviews/src/item-actions.js b/packages/dataviews/src/item-actions.js
@@ -47,6 +47,32 @@ function DropdownMenuItemTrigger( { action, onClick } ) {
 	);
 }
 
+export function ActionModal( {
+	action,
+	items,
+	closeModal,
+	onActionStart,
+	onActionPerformed,
+} ) {
+	return (
+		<Modal
+			title={ action.modalHeader || action.label }
+			__experimentalHideHeader={ !! action.hideModalHeader }
+			onRequestClose={ closeModal }
+			overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase(
+				action.id
+			) }` }
+		>
+			<action.RenderModal
+				items={ items }
+				closeModal={ closeModal }
+				onActionStart={ onActionStart }
+				onActionPerformed={ onActionPerformed }
+			/>
+		</Modal>
+	);
+}
+
 export function ActionWithModal( {
 	action,
 	items,
@@ -64,34 +90,23 @@ export function ActionWithModal( {
 		items,
 		isBusy,
 	};
-	const { RenderModal, hideModalHeader } = action;
 	return (
 		<>
 			<ActionTrigger { ...actionTriggerProps } />
 			{ isModalOpen && (
-				<Modal
-					title={ action.modalHeader || action.label }
-					__experimentalHideHeader={ !! hideModalHeader }
-					onRequestClose={ () => {
-						setIsModalOpen( false );
-					} }
-					overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase(
-						action.id
-					) }` }
-				>
-					<RenderModal
-						items={ items }
-						closeModal={ () => setIsModalOpen( false ) }
-						onActionStart={ onActionStart }
-						onActionPerformed={ onActionPerformed }
-					/>
-				</Modal>
+				<ActionModal
+					action={ action }
+					items={ items }
+					closeModal={ () => setIsModalOpen( false ) }
+					onActionStart={ onActionStart }
+					onActionPerformed={ onActionPerformed }
+				/>
 			) }
 		</>
 	);
 }
 
-function ActionsDropdownMenuGroup( { actions, item } ) {
+export function ActionsDropdownMenuGroup( { actions, item } ) {
 	return (
 		<DropdownMenuGroup>
 			{ actions.map( ( action ) => {

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
@@ -401,6 +401,7 @@
 	li {
 		margin: 0;
 		cursor: pointer;
+		border-top: 1px solid $gray-100;
 
 		.dataviews-view-list__item-wrapper {
 			position: relative;
@@ -411,6 +412,18 @@
 			}
 		}
 
+		.dataviews-view-list__item-actions .components-button {
+			opacity: 0;
+		}
+
+		&.is-selected,
+		&.is-hovered,
+		&:focus-within {
+			.dataviews-view-list__item-actions .components-button {
+				opacity: 1;
+			}
+		}
+
 		&:not(.is-selected) {
 			.dataviews-view-list__primary-field {
 				color: $gray-900;
@@ -426,6 +439,7 @@
 				}
 			}
 		}
+
 	}
 
 	li.is-selected,
@@ -443,10 +457,9 @@
 	}
 
 	.dataviews-view-list__item {
-		padding: $grid-unit-20 $grid-unit-40;
+		padding: $grid-unit-20 0 $grid-unit-20 $grid-unit-40;
 		width: 100%;
 		scroll-margin: $grid-unit-10 0;
-		border-top: 1px solid $gray-100;
 
 		&:focus-visible {
 			&::before {
@@ -514,6 +527,11 @@
 		}
 	}
 
+	.dataviews-view-list__item-actions {
+		padding-top: $grid-unit-20;
+		padding-right: $grid-unit-40;
+	}
+
 	& + .dataviews-pagination {
 		justify-content: space-between;
 	}

diff --git a/packages/dataviews/src/view-grid.js b/packages/dataviews/src/view-grid.js
@@ -175,14 +175,14 @@ function GridItem( {
 }
 
 export default function ViewGrid( {
+	actions,
 	data,
 	fields,
-	view,
-	actions,
-	isLoading,
 	getItemId,
-	selection,
+	isLoading,
 	onSelectionChange,
+	selection,
+	view,
 } ) {
 	const mediaField = fields.find(
 		( field ) => field.id === view.layout.mediaField