Skip to content

[WC-3216] Gallery paging and autoselect#2034

Open
iobuhov wants to merge 19 commits intomainfrom
3216/gallery-paging-and-autoselect
Open

[WC-3216] Gallery paging and autoselect#2034
iobuhov wants to merge 19 commits intomainfrom
3216/gallery-paging-and-autoselect

Conversation

@iobuhov
Copy link
Collaborator

@iobuhov iobuhov commented Jan 19, 2026

Pull request type

Refactoring (e.g. file rename, variable rename, etc.)

New feature (non-breaking change which adds functionality)


Description

Migrated features from data grid to gallery.

What should be covered while testing?

  • Auto select first item
  • Selection counter
  • Load more
  • Virtual scroll
  • Pagination
  • Custom pagination
  • Custom empty state

@iobuhov iobuhov requested a review from a team as a code owner January 19, 2026 14:11
@iobuhov iobuhov force-pushed the 3216/gallery-paging-and-autoselect branch 3 times, most recently from ee916ba to 719c753 Compare February 2, 2026 11:46
@iobuhov iobuhov force-pushed the 3216/gallery-paging-and-autoselect branch from 1492bce to 5b16988 Compare February 9, 2026 15:17
@iobuhov iobuhov force-pushed the 3216/gallery-paging-and-autoselect branch from 38cf8bc to db93377 Compare February 12, 2026 13:24
}

function isAutoSelectEnabled(props: DatagridContainerProps): boolean {
return props.itemSelection?.type === "Multi" && props.autoSelect;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why it is restricted to multi, I believe it should work for both.

Comment on lines +72 to +75
<property key="autoSelect" type="boolean" defaultValue="false">
<caption>Auto select first item</caption>
<description>Automatically select the first item</description>
</property>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no hiding of autoSelect in Gallery.editorConfig when selection is set to None.

"dynamicPageSize",
"useCustomPagination",
"customPagination",
"totalCountValue"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see that data grid is not hiding this attribute, not sure which way is the correct one.

Comment on lines +302 to +306
<span className="widget-gallery-selection-counter-text" aria-live="polite" aria-atomic="true">
{props.selectedCountTemplateSingular}
</span>
&nbsp;|&nbsp;
<button className="widget-gallery-btn-link">{props.clearSelectionButtonLabel}</button>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this be widget-datagrid-* instead of widget-gallery-* ? Maybe use ${cls.root}-*.

{children}
</div>
);
export function GalleryFooter({ children, className }: PropsWithChildren<{ className?: string }>): ReactElement {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like no one is passing className prop, maybe it should go as well.

Comment on lines +24 to +29
const isSelected = computed(
() => {
return selectActions.isSelected(item);
},
{ name: "[gallery]:@computed:ListItem:isSelected" }
).get();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it alright to re-create it every time in render?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants