Skip to content

Commit

Permalink
Data Views list layout: revise for improved text truncation (WordPres…
Browse files Browse the repository at this point in the history 
…s#65376)

* Remove background-color and box-shadow from actions

* Shorten primary field’s text on hover or selected state

* Data Views list layout: revise for improved text truncation

* Let primary field be full with in resting state

* Remove seemingly errant border radius on item wrapper

* Unnest actions gridcells

* Fix cursor style of list items

* Update test selector

* Revert "Update test selector"

This reverts commit 59e8b7d.

* Put primary field in front if it has interactive elements

---------

Co-authored-by: colorful-tones <colorful-tones@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: kevin940726 <kevin940726@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: ndiego <ndiego@git.wordpress.org>
  • Loading branch information
@stokesman @colorful-tones
@ciampo @afercia @kevin940726 @aaronrobertshaw @jameskoster @ndiego
8 people authored Oct 14, 2024
1 parent 4b6e08a commit 3d87652
Show file tree
Hide file tree
Showing 2 changed files with 113 additions and 143 deletions.
181 changes: 81 additions & 100 deletions packages/dataviews/src/dataviews-layouts/list/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,11 +145,9 @@ function ListItem< Item >( {
const descriptionId = `${ idPrefix }-description`;

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( () => {
Expand Down Expand Up @@ -187,6 +185,45 @@ function ListItem< Item >( {
<primaryField.render item={ item } />
) : null;

const usedActions = eligibleActions?.length > 0 && (
<HStack spacing={ 3 } className="dataviews-view-list__item-actions">
{ primaryAction && (
<PrimaryActionGridCell
idPrefix={ idPrefix }
primaryAction={ primaryAction }
item={ item }
/>
) }
<div role="gridcell">
<DropdownMenu
trigger={
<Composite.Item
id={ generateDropdownTriggerCompositeId(
idPrefix
) }
render={
<Button
size="small"
icon={ moreVertical }
label={ __( 'Actions' ) }
accessibleWhenDisabled
disabled={ ! actions.length }
onKeyDown={ onDropdownTriggerKeyDown }
/>
}
/>
}
placement="bottom-end"
>
<ActionsDropdownMenuGroup
actions={ eligibleActions }
item={ item }
/>
</DropdownMenu>
</div>
</HStack>
);

return (
<Composite.Row
ref={ itemRef }
Expand All @@ -196,116 +233,60 @@ function ListItem< Item >( {
'is-selected': isSelected,
'is-hovered': isHovered,
} ) }
onMouseEnter={ handleMouseEnter }
onMouseLeave={ handleMouseLeave }
onMouseEnter={ handleHover }
onMouseLeave={ handleHover }
>
<HStack
className="dataviews-view-list__item-wrapper"
alignment="center"
spacing={ 0 }
>
<HStack className="dataviews-view-list__item-wrapper" spacing={ 0 }>
<div role="gridcell">
<Composite.Item
render={ <div /> }
role="button"
id={ generateItemWrapperCompositeId( idPrefix ) }
aria-pressed={ isSelected }
aria-labelledby={ labelId }
aria-describedby={ descriptionId }
className="dataviews-view-list__item"
onClick={ () => onSelect( item ) }
/>
</div>
<HStack spacing={ 3 } justify="start" alignment="flex-start">
<div className="dataviews-view-list__media-wrapper">
{ renderedMediaField }
</div>
<VStack
spacing={ 1 }
className="dataviews-view-list__field-wrapper"
>
<HStack
spacing={ 3 }
justify="start"
alignment="flex-start"
>
<div className="dataviews-view-list__media-wrapper">
{ renderedMediaField }
</div>
<VStack
spacing={ 1 }
className="dataviews-view-list__field-wrapper"
<HStack spacing={ 0 }>
<div
className="dataviews-view-list__primary-field"
id={ labelId }
>
<span
className="dataviews-view-list__primary-field"
id={ labelId }
>
{ renderedPrimaryField }
</span>
{ renderedPrimaryField }
</div>
{ usedActions }
</HStack>
<div
className="dataviews-view-list__fields"
id={ descriptionId }
>
{ visibleFields.map( ( field ) => (
<div
className="dataviews-view-list__fields"
id={ descriptionId }
key={ field.id }
className="dataviews-view-list__field"
>
{ visibleFields.map( ( field ) => (
<div
key={ field.id }
className="dataviews-view-list__field"
>
<VisuallyHidden
as="span"
className="dataviews-view-list__field-label"
>
{ field.label }
</VisuallyHidden>
<span className="dataviews-view-list__field-value">
<field.render item={ item } />
</span>
</div>
) ) }
<VisuallyHidden
as="span"
className="dataviews-view-list__field-label"
>
{ field.label }
</VisuallyHidden>
<span className="dataviews-view-list__field-value">
<field.render item={ item } />
</span>
</div>
</VStack>
</HStack>
</Composite.Item>
</div>
{ eligibleActions?.length > 0 && (
<HStack
spacing={ 3 }
justify="flex-end"
className="dataviews-view-list__item-actions"
style={ {
flexShrink: '0',
width: 'auto',
} }
>
{ primaryAction && (
<PrimaryActionGridCell
idPrefix={ idPrefix }
primaryAction={ primaryAction }
item={ item }
/>
) }
<div role="gridcell">
<DropdownMenu
trigger={
<Composite.Item
id={ generateDropdownTriggerCompositeId(
idPrefix
) }
render={
<Button
size="small"
icon={ moreVertical }
label={ __( 'Actions' ) }
accessibleWhenDisabled
disabled={ ! actions.length }
onKeyDown={
onDropdownTriggerKeyDown
}
/>
}
/>
}
placement="bottom-end"
>
<ActionsDropdownMenuGroup
actions={ eligibleActions }
item={ item }
/>
</DropdownMenu>
) ) }
</div>
</HStack>
) }
</VStack>
</HStack>
</HStack>
</Composite.Row>
);
Expand Down
75 changes: 32 additions & 43 deletions packages/dataviews/src/dataviews-layouts/list/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,63 +7,40 @@ ul.dataviews-view-list {

li {
margin: 0;
cursor: pointer;
border-top: 1px solid $gray-100;

.dataviews-view-list__item-wrapper {
position: relative;
border-radius: $grid-unit-05;

> * {
width: 100%;
}
padding: $grid-unit-20 $grid-unit-30;
}

.dataviews-view-list__item-actions {
position: absolute;
top: $grid-unit-20;
right: 0;

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 {
background: #f8f8f8;
padding-left: $grid-unit-10;
margin-right: $grid-unit-30;
box-shadow: -12px 0 8px 0 #f8f8f8;
flex-basis: min-content;
overflow: unset;
margin-inline: $grid-unit-10 0;

.components-button {
opacity: 1;
position: static;
}
}
}

&.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);

Expand Down Expand Up @@ -105,27 +82,38 @@ ul.dataviews-view-list {
}

.dataviews-view-list__item {
box-sizing: border-box;
padding: $grid-unit-20 $grid-unit-30;
width: 100%;
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;

&::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;
// The field should be in front of the main button in case it has a link/button.
&:has(a, button) {
z-index: 1;
}
}

Expand Down Expand Up @@ -164,6 +152,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 {
Expand Down

0 comments on commit 3d87652

Please sign in to comment.