From 389718c4487b8c56e2a28b05c7730d1e47d81851 Mon Sep 17 00:00:00 2001 From: Damon Cook Date: Tue, 10 Sep 2024 17:14:30 -0400 Subject: [PATCH 01/10] Remove background-color and box-shadow from actions --- packages/dataviews/src/dataviews-layouts/list/style.scss | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/dataviews/src/dataviews-layouts/list/style.scss b/packages/dataviews/src/dataviews-layouts/list/style.scss index ea3236f6d75e1e..47847967af16e6 100644 --- a/packages/dataviews/src/dataviews-layouts/list/style.scss +++ b/packages/dataviews/src/dataviews-layouts/list/style.scss @@ -45,10 +45,8 @@ ul.dataviews-view-list { &.is-hovered, &:focus-within { .dataviews-view-list__item-actions { - background: #f8f8f8; padding-left: $grid-unit-10; margin-right: $grid-unit-30; - box-shadow: -12px 0 8px 0 #f8f8f8; .components-button { opacity: 1; @@ -57,13 +55,6 @@ ul.dataviews-view-list { } } - &.is-selected { - .dataviews-view-list__item-actions { - background-color: rgb(247 248 255); - box-shadow: -12px 0 8px 0 rgb(247 248 255); - } - } - &.is-selected.is-selected { border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12); From d3a51054eed2633d47c6f55bafebbc6e86883381 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Wed, 11 Sep 2024 12:20:45 -0700 Subject: [PATCH 02/10] =?UTF-8?q?Shorten=20primary=20field=E2=80=99s=20tex?= =?UTF-8?q?t=20on=20hover=20or=20selected=20state?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/dataviews-layouts/list/index.tsx | 24 ++++++++++++------- .../src/dataviews-layouts/list/style.scss | 3 ++- 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/packages/dataviews/src/dataviews-layouts/list/index.tsx b/packages/dataviews/src/dataviews-layouts/list/index.tsx index fb46521fe217b7..0077498f4f067d 100644 --- 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,14 @@ 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( () => { @@ -186,6 +188,10 @@ function ListItem< Item >( { const renderedPrimaryField = primaryField?.render ? ( ) : null; + const primaryFieldInlineStyle = + isHovered || isSelected + ? { paddingInlineEnd: actionsWidth } + : undefined; return ( ( { 'is-selected': isSelected, 'is-hovered': isHovered, } ) } - onMouseEnter={ handleMouseEnter } - onMouseLeave={ handleMouseLeave } + onMouseEnter={ handleHover } + onMouseLeave={ handleHover } > ( { { renderedPrimaryField } @@ -267,6 +274,7 @@ function ListItem< Item >( { flexShrink: '0', width: 'auto', } } + ref={ measureActionsWidth } > { primaryAction && ( div { @@ -45,7 +47,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 { From 779ae85fd219e9fe55f75ac120e8b0189b75ad7f Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Thu, 12 Sep 2024 11:05:38 -0700 Subject: [PATCH 03/10] Data Views list layout: revise for improved text truncation --- .../src/dataviews-layouts/list/index.tsx | 173 ++++++++---------- .../src/dataviews-layouts/list/style.scss | 56 +++--- 2 files changed, 103 insertions(+), 126 deletions(-) diff --git a/packages/dataviews/src/dataviews-layouts/list/index.tsx b/packages/dataviews/src/dataviews-layouts/list/index.tsx index 0077498f4f067d..fa083af3b527e7 100644 --- 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, useRefEffect } from '@wordpress/compose'; +import { useInstanceId, usePrevious } from '@wordpress/compose'; import { __experimentalHStack as HStack, __experimentalVStack as VStack, @@ -144,10 +144,6 @@ 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 handleHover: React.MouseEventHandler = ( { type } ) => { const isHover = type === 'mouseenter'; @@ -188,10 +184,45 @@ function ListItem< Item >( { const renderedPrimaryField = primaryField?.render ? ( ) : null; - const primaryFieldInlineStyle = - isHovered || isSelected - ? { paddingInlineEnd: actionsWidth } - : undefined; + + const usedActions = eligibleActions?.length > 0 && ( + + { primaryAction && ( + + ) } +
+ + } + /> + } + placement="bottom-end" + > + + +
+ + ); return ( ( { >
} - role="button" id={ generateItemWrapperCompositeId( idPrefix ) } aria-pressed={ isSelected } aria-labelledby={ labelId } aria-describedby={ descriptionId } className="dataviews-view-list__item" onClick={ () => onSelect( item ) } + /> + - + { renderedMediaField } +
+ -
- { renderedMediaField } -
- - +
{ renderedPrimaryField } - -
- { visibleFields.map( ( field ) => ( -
- - { field.label } - - - - -
- ) ) }
- - - -
- { eligibleActions?.length > 0 && ( - - { primaryAction && ( - - ) } -
- - } - /> - } - placement="bottom-end" + { usedActions } + +
- - -
+ { visibleFields.map( ( field ) => ( +
+ + { field.label } + + + + +
+ ) ) } +
+ - ) } + ); diff --git a/packages/dataviews/src/dataviews-layouts/list/style.scss b/packages/dataviews/src/dataviews-layouts/list/style.scss index 8fd6991173332a..87002ea51acf11 100644 --- a/packages/dataviews/src/dataviews-layouts/list/style.scss +++ b/packages/dataviews/src/dataviews-layouts/list/style.scss @@ -13,6 +13,7 @@ ul.dataviews-view-list { .dataviews-view-list__item-wrapper { position: relative; border-radius: $grid-unit-05; + padding: $grid-unit-20 $grid-unit-30; > * { width: 100%; @@ -20,38 +21,27 @@ ul.dataviews-view-list { } .dataviews-view-list__item-actions { - 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; - + flex: 0; + overflow: hidden; > div { height: $button-size-small; } .components-button { + position: relative; + z-index: 1; opacity: 0; } } - &:has(.dataviews-view-list__fields:empty) { - .dataviews-view-list__item-actions { - top: 50%; - transform: translateY(-50%); - } - } - - &.is-selected, - &.is-hovered, - &:focus-within { + &:where(.is-selected, .is-hovered, :focus-within) { .dataviews-view-list__item-actions { - margin-right: $grid-unit-30; + flex-basis: min-content; + overflow: unset; .components-button { opacity: 1; - position: static; } } } @@ -97,28 +87,33 @@ ul.dataviews-view-list { } .dataviews-view-list__item { - box-sizing: border-box; - padding: $grid-unit-20 $grid-unit-30; - width: 100%; + position: absolute; + inset: 0; scroll-margin: $grid-unit-10 0; + appearance: none; + border: none; + background: none; + padding: 0; &:focus-visible { + outline: none; + &::before { position: absolute; content: ""; - top: var(--wp-admin-border-width-focus); - right: var(--wp-admin-border-width-focus); - bottom: var(--wp-admin-border-width-focus); - left: var(--wp-admin-border-width-focus); + inset: var(--wp-admin-border-width-focus); box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); border-radius: $radius-small; + // Windows High Contrast mode will show this outline, but not the box-shadow. + outline: 2px solid transparent; } } - .dataviews-view-list__primary-field { - min-height: $grid-unit-30; - line-height: $grid-unit-30; - overflow: hidden; - } + } + .dataviews-view-list__primary-field { + flex: 1; + min-height: $grid-unit-30; + line-height: $grid-unit-30; + overflow: hidden; } .dataviews-view-list__media-wrapper { @@ -156,6 +151,7 @@ ul.dataviews-view-list { .dataviews-view-list__field-wrapper { min-height: $grid-unit-05 * 13; // Ensures title is centrally aligned when all fields are hidden + flex-grow: 1; } .dataviews-view-list__fields { From 54645c88b3ed35078be93d10d4c67af98eed62b1 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Fri, 13 Sep 2024 20:35:08 -0700 Subject: [PATCH 04/10] Let primary field be full with in resting state --- packages/dataviews/src/dataviews-layouts/list/index.tsx | 2 +- packages/dataviews/src/dataviews-layouts/list/style.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/dataviews/src/dataviews-layouts/list/index.tsx b/packages/dataviews/src/dataviews-layouts/list/index.tsx index fa083af3b527e7..f2489b97b94207 100644 --- a/packages/dataviews/src/dataviews-layouts/list/index.tsx +++ b/packages/dataviews/src/dataviews-layouts/list/index.tsx @@ -262,7 +262,7 @@ function ListItem< Item >( { spacing={ 1 } className="dataviews-view-list__field-wrapper" > - +
Date: Fri, 13 Sep 2024 20:36:01 -0700 Subject: [PATCH 05/10] Remove seemingly errant border radius on item wrapper --- packages/dataviews/src/dataviews-layouts/list/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/dataviews/src/dataviews-layouts/list/style.scss b/packages/dataviews/src/dataviews-layouts/list/style.scss index 8d86bf768f5f74..1d9a0961dc7009 100644 --- a/packages/dataviews/src/dataviews-layouts/list/style.scss +++ b/packages/dataviews/src/dataviews-layouts/list/style.scss @@ -12,7 +12,6 @@ ul.dataviews-view-list { .dataviews-view-list__item-wrapper { position: relative; - border-radius: $grid-unit-05; padding: $grid-unit-20 $grid-unit-30; > * { From dbb1958b701d12e7f531a6ed5c5dcd161f5775e5 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Fri, 13 Sep 2024 21:06:49 -0700 Subject: [PATCH 06/10] Unnest actions gridcells --- .../src/dataviews-layouts/list/index.tsx | 82 +++++++++---------- .../src/dataviews-layouts/list/style.scss | 4 - 2 files changed, 37 insertions(+), 49 deletions(-) diff --git a/packages/dataviews/src/dataviews-layouts/list/index.tsx b/packages/dataviews/src/dataviews-layouts/list/index.tsx index f2489b97b94207..e737b18f5b02a9 100644 --- a/packages/dataviews/src/dataviews-layouts/list/index.tsx +++ b/packages/dataviews/src/dataviews-layouts/list/index.tsx @@ -236,11 +236,7 @@ function ListItem< Item >( { onMouseEnter={ handleHover } onMouseLeave={ handleHover } > - +
( { className="dataviews-view-list__item" onClick={ () => onSelect( item ) } /> - + +
+ { renderedMediaField } +
+ -
- { renderedMediaField } -
- +
+ { renderedPrimaryField } +
+ { usedActions } + +
- + { visibleFields.map( ( field ) => (
- { renderedPrimaryField } -
- { usedActions } - -
- { visibleFields.map( ( field ) => ( -
- - { field.label } - - - - -
- ) ) } -
- - -
+ { field.label } + + + + +
+ ) ) } +
+ + ); diff --git a/packages/dataviews/src/dataviews-layouts/list/style.scss b/packages/dataviews/src/dataviews-layouts/list/style.scss index 1d9a0961dc7009..23bd826269f142 100644 --- a/packages/dataviews/src/dataviews-layouts/list/style.scss +++ b/packages/dataviews/src/dataviews-layouts/list/style.scss @@ -13,10 +13,6 @@ ul.dataviews-view-list { .dataviews-view-list__item-wrapper { position: relative; padding: $grid-unit-20 $grid-unit-30; - - > * { - width: 100%; - } } .dataviews-view-list__item-actions { From 9601c78b687f82056201e1907a7a4ad1da60327e Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Mon, 7 Oct 2024 20:35:48 -0700 Subject: [PATCH 07/10] Fix cursor style of list items --- packages/dataviews/src/dataviews-layouts/list/style.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/dataviews/src/dataviews-layouts/list/style.scss b/packages/dataviews/src/dataviews-layouts/list/style.scss index 23bd826269f142..f28ffb677c982a 100644 --- a/packages/dataviews/src/dataviews-layouts/list/style.scss +++ b/packages/dataviews/src/dataviews-layouts/list/style.scss @@ -7,7 +7,6 @@ ul.dataviews-view-list { li { margin: 0; - cursor: pointer; border-top: 1px solid $gray-100; .dataviews-view-list__item-wrapper { @@ -84,12 +83,14 @@ ul.dataviews-view-list { .dataviews-view-list__item { position: absolute; + z-index: 1; inset: 0; scroll-margin: $grid-unit-10 0; appearance: none; border: none; background: none; padding: 0; + cursor: pointer; &:focus-visible { outline: none; From 59e8b7dfab39df3994468920b731b72477760d86 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Tue, 8 Oct 2024 11:50:20 -0700 Subject: [PATCH 08/10] Update test selector --- test/performance/specs/site-editor.spec.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/test/performance/specs/site-editor.spec.js b/test/performance/specs/site-editor.spec.js index 9c9d8aec71da4a..b6659483595ba9 100644 --- a/test/performance/specs/site-editor.spec.js +++ b/test/performance/specs/site-editor.spec.js @@ -235,7 +235,12 @@ test.describe( 'Site Editor Performance', () => { } await metrics.startTracing(); - await page.getByText( 'Single Posts', { exact: true } ).click(); + await page + .getByRole( 'button', { + name: 'Single Posts', + exact: true, + } ) + .click(); await metrics.stopTracing(); // Get the durations. From a60c591b357b6f62294853566a1f0eeadf3fe5e8 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Tue, 8 Oct 2024 17:15:52 -0700 Subject: [PATCH 09/10] Revert "Update test selector" This reverts commit 59e8b7dfab39df3994468920b731b72477760d86. --- test/performance/specs/site-editor.spec.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/test/performance/specs/site-editor.spec.js b/test/performance/specs/site-editor.spec.js index b6659483595ba9..9c9d8aec71da4a 100644 --- a/test/performance/specs/site-editor.spec.js +++ b/test/performance/specs/site-editor.spec.js @@ -235,12 +235,7 @@ test.describe( 'Site Editor Performance', () => { } await metrics.startTracing(); - await page - .getByRole( 'button', { - name: 'Single Posts', - exact: true, - } ) - .click(); + await page.getByText( 'Single Posts', { exact: true } ).click(); await metrics.stopTracing(); // Get the durations. From db85c39e4eea6dd394943a08ac2d699424319729 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Tue, 8 Oct 2024 17:17:04 -0700 Subject: [PATCH 10/10] Put primary field in front if it has interactive elements --- packages/dataviews/src/dataviews-layouts/list/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/dataviews/src/dataviews-layouts/list/style.scss b/packages/dataviews/src/dataviews-layouts/list/style.scss index f28ffb677c982a..9a3128c14b76a7 100644 --- a/packages/dataviews/src/dataviews-layouts/list/style.scss +++ b/packages/dataviews/src/dataviews-layouts/list/style.scss @@ -111,6 +111,10 @@ ul.dataviews-view-list { min-height: $grid-unit-30; line-height: $grid-unit-30; overflow: hidden; + // The field should be in front of the main button in case it has a link/button. + &:has(a, button) { + z-index: 1; + } } .dataviews-view-list__media-wrapper {