Reduce visual prominence of primary actions in table data views, and …

…consolidate primary + secondary actions in ellipsis menu (#59128)

Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: andrewhayward <andrewhayward@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>

packages/dataviews/src/item-actions.js

@@ -21,6 +21,7 @@ const {
 	DropdownMenuGroupV2: DropdownMenuGroup,
 	DropdownMenuItemV2: DropdownMenuItem,
 	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
+	DropdownMenuSeparatorV2: DropdownMenuSeparator,
 	kebabCase,
 } = unlock( componentsPrivateApis );
 
@@ -136,6 +137,7 @@ export default function ItemActions( { item, actions, isCompact } ) {
 		<HStack
 			spacing={ 1 }
 			justify="flex-end"
+			className="dataviews-view-table__actions"
 			style={ {
 				flexShrink: '0',
 				width: 'auto',
@@ -168,10 +170,16 @@ export default function ItemActions( { item, actions, isCompact } ) {
 						icon={ moreVertical }
 						label={ __( 'Actions' ) }
 						disabled={ ! secondaryActions.length }
+						className="dataviews-view-table__all-actions-button"
 					/>
 				}
 				placement="bottom-end"
 			>
+				<ActionsDropdownMenuGroup
+					actions={ primaryActions }
+					item={ item }
+				/>
+				<DropdownMenuSeparator />
 				<ActionsDropdownMenuGroup
 					actions={ secondaryActions }
 					item={ item }

packages/dataviews/src/style.scss

@@ -123,7 +123,7 @@
 			border-bottom: 0;
 		}
 
-		&:hover {
+		&.is-hovered {
 			background-color: #f8f8f8;
 		}
 
@@ -137,9 +137,14 @@
 			}
 		}
 
+		.dataviews-view-table__actions .components-button:not(.dataviews-view-table__all-actions-button) {
+			opacity: 0;
+		}
+
 		&:focus-within,
-		&:hover {
-			.components-checkbox-control__input {
+		&.is-hovered {
+			.components-checkbox-control__input,
+			.dataviews-view-table__actions .components-button:not(.dataviews-view-table__all-actions-button) {
 				opacity: 1;
 			}
 		}

packages/dataviews/src/view-table.js

@@ -237,12 +237,28 @@ function TableRow( {
 	data,
 } ) {
 	const hasPossibleBulkAction = useHasAPossibleBulkAction( actions, item );
+
 	const isSelected = selection.includes( id );
+
+	const [ isHovered, setIsHovered ] = useState( false );
+
+	const handleMouseEnter = () => {
+		setIsHovered( true );
+	};
+
+	const handleMouseLeave = () => {
+		setIsHovered( false );
+	};
+
 	return (
 		<tr
 			className={ classnames( 'dataviews-view-table__row', {
-				'is-selected': hasPossibleBulkAction && isSelected,
+				'is-selected':
+					hasPossibleBulkAction && selection.includes( id ),
+				'is-hovered': isHovered,
 			} ) }
+			onMouseEnter={ handleMouseEnter }
+			onMouseLeave={ handleMouseLeave }
 			onClickCapture={ ( event ) => {
 				if ( event.ctrlKey || event.metaKey ) {
 					event.stopPropagation();