DataViews: remove onDetailsChange event (#60387)

Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
WordPress · Apr 3, 2024 · 5406de6 · 5406de6 · github-actions · Apr 3, 2024
1 parent 6b78b7d
commit 5406de6
Show file tree

Hide file tree

Showing 5 changed files with 4 additions and 43 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 }