From 5406de6e4b208b904f2eac5322b4dc1daec79b03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Wed, 3 Apr 2024 09:57:37 +0200
Subject: [PATCH] DataViews: remove `onDetailsChange` event (#60387)

Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
---
 packages/dataviews/CHANGELOG.md     |  4 ++++
 packages/dataviews/README.md        |  4 ----
 packages/dataviews/src/dataviews.js |  2 --
 packages/dataviews/src/style.scss   | 20 --------------------
 packages/dataviews/src/view-list.js | 17 -----------------
 5 files changed, 4 insertions(+), 43 deletions(-)

diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
index 7be7018cb29a86..3fbb7a27319a23 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Breaking changes
+
+- Removed the `onDetailsChange` event only available for the list layout. We are looking into adding actions to the list layout, including primary ones.
+
 ## 0.9.0 (2024-04-03)
 
 ### Enhancement
diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md
index efe7a8d3be8b53..59d5b5306a60dd 100644
--- a/packages/dataviews/README.md
+++ b/packages/dataviews/README.md
@@ -283,10 +283,6 @@ Whether the items should be rendered asynchronously. Useful when there's a field
 
 Callback that signals the user selected one of more items, and takes them as parameter. So far, only the `list` view implements it.
 
-### `onDetailsChange`: `function`
-
-Callback that signals the user triggered the details for one of more items, and takes them as paremeter. So far, only the `list` view implements it.
-
 ## Types
 
 ### Layouts
diff --git a/packages/dataviews/src/dataviews.js b/packages/dataviews/src/dataviews.js
index 8b7d3f4819c8f6..7e9a9482eec5a1 100644
--- a/packages/dataviews/src/dataviews.js
+++ b/packages/dataviews/src/dataviews.js
@@ -41,7 +41,6 @@ export default function DataViews( {
 	paginationInfo,
 	supportedLayouts,
 	onSelectionChange = defaultOnSelectionChange,
-	onDetailsChange = null,
 	deferredRendering = false,
 } ) {
 	const [ selection, setSelection ] = useState( [] );
@@ -136,7 +135,6 @@ export default function DataViews( {
 				getItemId={ getItemId }
 				isLoading={ isLoading }
 				onSelectionChange={ onSetSelection }
-				onDetailsChange={ onDetailsChange }
 				selection={ selection }
 				deferredRendering={ deferredRendering }
 				setOpenedFilter={ setOpenedFilter }
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 92a096384dc19e..127a3182ba95b1 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -492,26 +492,6 @@
 		justify-content: space-between;
 	}
 
-	.dataviews-view-list__details-button {
-		align-self: center;
-		opacity: 0;
-	}
-
-	li.is-selected,
-	li:hover,
-	li:focus-within {
-		.dataviews-view-list__details-button {
-			opacity: 1;
-		}
-	}
-
-	li.is-selected {
-		.dataviews-view-list__details-button {
-			&:focus {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) currentColor;
-			}
-		}
-	}
 }
 
 .dataviews-action-modal {
diff --git a/packages/dataviews/src/view-list.js b/packages/dataviews/src/view-list.js
index 7d4b322579a544..2fdff995747586 100644
--- a/packages/dataviews/src/view-list.js
+++ b/packages/dataviews/src/view-list.js
@@ -11,12 +11,10 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	privateApis as componentsPrivateApis,
-	Button,
 	Spinner,
 	VisuallyHidden,
 } from '@wordpress/components';
 import { useCallback, useEffect, useRef } from '@wordpress/element';
-import { info } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -36,7 +34,6 @@ function ListItem( {
 	item,
 	isSelected,
 	onSelect,
-	onDetailsChange,
 	mediaField,
 	primaryField,
 	visibleFields,
@@ -118,18 +115,6 @@ function ListItem( {
 						</HStack>
 					</CompositeItem>
 				</div>
-				{ onDetailsChange && (
-					<div role="gridcell">
-						<CompositeItem
-							render={ <Button /> }
-							className="dataviews-view-list__details-button"
-							onClick={ () => onDetailsChange( [ item ] ) }
-							icon={ info }
-							label={ __( 'View details' ) }
-							size="compact"
-						/>
-					</div>
-				) }
 			</HStack>
 		</CompositeRow>
 	);
@@ -142,7 +127,6 @@ export default function ViewList( {
 	isLoading,
 	getItemId,
 	onSelectionChange,
-	onDetailsChange,
 	selection,
 	deferredRendering,
 	id: preferredId,
@@ -215,7 +199,6 @@ export default function ViewList( {
 						item={ item }
 						isSelected={ item === selectedItem }
 						onSelect={ onSelect }
-						onDetailsChange={ onDetailsChange }
 						mediaField={ mediaField }
 						primaryField={ primaryField }
 						visibleFields={ visibleFields }