Truncate primaryField w/ inline padding and account for actions

WordPress · Sep 11, 2024 · 9f01005 · 9f01005
1 parent 77202d4
commit 9f01005
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/packages/dataviews/src/dataviews-layouts/list/index.tsx b/packages/dataviews/src/dataviews-layouts/list/index.tsx
@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useInstanceId, usePrevious } from '@wordpress/compose';
+import { useInstanceId, usePrevious, useRefEffect } from '@wordpress/compose';
 import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
@@ -144,12 +144,15 @@ function ListItem< Item >( {
 	const labelId = `${ idPrefix }-label`;
 	const descriptionId = `${ idPrefix }-description`;
 
+	const [ actionsWidth, setActionsWidth ] = useState( 0 );
+	const measureActionsWidth = useRefEffect< HTMLElement >( ( node ) => {
+		setActionsWidth( node.offsetWidth );
+	}, [] );
+
 	const [ isHovered, setIsHovered ] = useState( false );
-	const handleMouseEnter = () => {
-		setIsHovered( true );
-	};
-	const handleMouseLeave = () => {
-		setIsHovered( false );
+	const handleHover: React.MouseEventHandler = ( { type } ) => {
+		const isHover = type === 'mouseenter';
+		setIsHovered( isHover );
 	};
 
 	useEffect( () => {
@@ -187,6 +190,11 @@ function ListItem< Item >( {
 		<primaryField.render item={ item } />
 	) : null;
 
+	const primaryFieldInlineStyle =
+		isHovered || isSelected
+			? { paddingInlineEnd: actionsWidth }
+			: undefined;
+
 	return (
 		<Composite.Row
 			ref={ itemRef }
@@ -196,8 +204,8 @@ function ListItem< Item >( {
 				'is-selected': isSelected,
 				'is-hovered': isHovered,
 			} ) }
-			onMouseEnter={ handleMouseEnter }
-			onMouseLeave={ handleMouseLeave }
+			onMouseEnter={ handleHover }
+			onMouseLeave={ handleHover }
 		>
 			<HStack
 				className="dataviews-view-list__item-wrapper"
@@ -230,6 +238,7 @@ function ListItem< Item >( {
 								<span
 									className="dataviews-view-list__primary-field"
 									id={ labelId }
+									style={ primaryFieldInlineStyle }
 								>
 									{ renderedPrimaryField }
 								</span>
@@ -267,6 +276,7 @@ function ListItem< Item >( {
 							flexShrink: '0',
 							width: 'auto',
 						} }
+						ref={ measureActionsWidth }
 					>
 						{ primaryAction && (
 							<PrimaryActionGridCell

diff --git a/packages/dataviews/src/dataviews-layouts/list/style.scss b/packages/dataviews/src/dataviews-layouts/list/style.scss
@@ -23,7 +23,8 @@ ul.dataviews-view-list {
 			position: absolute;
 			top: $grid-unit-20;
 			right: 0;
-
+			// Pads __primary-field’s text truncation on hover (done in JS; see ./index.tsx).
+			padding-inline-start: $grid-unit-10;
 
 			> div {
 				height: $button-size-small;
@@ -45,7 +46,6 @@ ul.dataviews-view-list {
 		&.is-hovered,
 		&:focus-within {
 			.dataviews-view-list__item-actions {
-				padding-left: $grid-unit-10;
 				margin-right: $grid-unit-30;
 
 				.components-button {