Skip to content

DataViews: add support for infinite scroll in table, grid, and list layouts #70955

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 25 commits into from
Aug 15, 2025
Merged

DataViews: add support for infinite scroll in table, grid, and list layouts #70955

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
b58dce5
Try adding optional infinite scroll to dataviews
tellthemachines Jul 29, 2025
a8042d9
try infinite scroll on all view types
tellthemachines Jul 30, 2025
5ef7214
make `infiniteScrollHandler` a property of `paginationInfo`
tellthemachines Jul 30, 2025
8b6f5f4
Add some more moons to storybook fixtures
tellthemachines Aug 4, 2025
61736d3
Add infinite scroll story
tellthemachines Aug 4, 2025
c8f47ab
update tests referring to data fixture
tellthemachines Aug 4, 2025
83c5644
Add aria roles for feed pattern
tellthemachines Aug 5, 2025
6269827
add feed aria roles to list and table layouts
tellthemachines Aug 5, 2025
afc4ac7
try toggle group control
tellthemachines Aug 5, 2025
c7b4fba
Changelog entry
tellthemachines Aug 5, 2025
c86bb1c
Fix storybook example
tellthemachines Aug 7, 2025
47dec0d
Fix styling issues with story
tellthemachines Aug 7, 2025
ac60b59
Hide pagination when infinite scroll is enabled
tellthemachines Aug 7, 2025
9a7d7aa
Remove memoed const
tellthemachines Aug 11, 2025
bf8010e
Make posinset optional prop and remove semantics from list layout
tellthemachines Aug 11, 2025
55302da
add aria attribs to div wrapper in list layout
tellthemachines Aug 11, 2025
fd50cfa
update changelog
tellthemachines Aug 11, 2025
be34116
Add loading more text
tellthemachines Aug 11, 2025
fd42a2c
Disable when data by group
tellthemachines Aug 11, 2025
b1ecc53
move infiniteScroll to base view
tellthemachines Aug 13, 2025
074c8ae
Try simple toggle and hiding per page values
tellthemachines Aug 13, 2025
3d54442
Center-align "loading more results"
tellthemachines Aug 13, 2025
1a9d90a
Change loading more text to spinner
tellthemachines Aug 13, 2025
07b49dc
Remove post list handler meant for testing
tellthemachines Aug 14, 2025
0cb6ad2
Update property name and clean up
tellthemachines Aug 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
add aria attribs to div wrapper in list layout
  • Loading branch information
@tellthemachines
tellthemachines committed Aug 13, 2025
commit 55302da0b2a52ea2fd167b89f86750fa83029b30
25 changes: 21 additions & 4 deletions packages/dataviews/src/dataviews-layouts/list/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
useMemo,
useRef,
useState,
useContext,
} from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { moreVertical } from '@wordpress/icons';
Expand All @@ -35,6 +36,7 @@ import {
ActionsMenuGroup,
ActionModal,
} from '../../components/dataviews-item-actions';
import DataViewsContext from '../../components/dataviews-context';
import type {
Action,
NormalizedField,
Expand Down Expand Up @@ -154,6 +156,7 @@ function ListItem< Item >( {
onSelect,
otherFields,
onDropdownTriggerKeyDown,
posinset,
}: ListViewItemProps< Item > ) {
const { showTitle = true, showMedia = true, showDescription = true } = view;
const itemRef = useRef< HTMLDivElement >( null );
Expand All @@ -170,6 +173,9 @@ function ListItem< Item >( {
setIsHovered( isHover );
};

const isInfiniteScroll = view.layout?.infiniteScroll;
const { paginationInfo } = useContext( DataViewsContext );

useEffect( () => {
if ( isSelected ) {
itemRef.current?.scrollIntoView( {
Expand Down Expand Up @@ -270,8 +276,16 @@ function ListItem< Item >( {
return (
<Composite.Row
ref={ itemRef }
render={ <div /> }
role="row"
render={
/* aria-posinset breaks Composite.Row if passed to it directly. */
<div
aria-posinset={ posinset }
aria-setsize={
isInfiniteScroll ? paginationInfo.totalItems : undefined
}
/>
}
role={ isInfiniteScroll ? 'article' : 'row' }
className={ clsx( {
'is-selected': isSelected,
'is-hovered': isHovered,
Expand Down Expand Up @@ -498,16 +512,18 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
);
}

const isInfiniteScroll = view.layout?.infiniteScroll;

return (
<Composite
id={ baseId }
render={ <div /> }
className={ clsx( 'dataviews-view-list', className ) }
role="grid"
role={ isInfiniteScroll ? 'feed' : 'grid' }
activeId={ activeCompositeId }
setActiveId={ setActiveCompositeId }
>
{ data.map( ( item ) => {
{ data.map( ( item, index ) => {
const id = generateCompositeItemIdPrefix( item );
return (
<ListItem
Expand All @@ -523,6 +539,7 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
descriptionField={ descriptionField }
otherFields={ otherFields }
onDropdownTriggerKeyDown={ onDropdownTriggerKeyDown }
posinset={ isInfiniteScroll ? index + 1 : undefined }
/>
);
} ) }
Expand Down
10 changes: 7 additions & 3 deletions packages/dataviews/src/dataviews-layouts/list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ div.dataviews-view-list {
.dataviews-view-list {
margin: 0 0 auto;

div[role="row"] {
div[role="row"],
div[role="article"] {
margin: 0;
border-top: 1px solid $gray-100;

Expand Down Expand Up @@ -57,7 +58,8 @@ div.dataviews-view-list {
&.is-selected.is-selected {
border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);

& + div[role="row"] {
& + div[role="row"],
& + div[role="article"] {
border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
}
}
Expand All @@ -82,7 +84,9 @@ div.dataviews-view-list {
}

div[role="row"].is-selected,
div[role="row"].is-selected:focus-within {
div[role="row"].is-selected:focus-within,
div[role="article"].is-selected,
div[role="article"].is-selected:focus-within {
.dataviews-view-list__item-wrapper {
background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
color: $gray-900;
Expand Down