DataLis pagination demo

[ajaypratap003]

What: Closes #10247
DataList pagination demo

Additional issues:

[patternfly-build]

Preview: https://patternfly-react-pr-10276.surge.sh

A11y report: https://patternfly-react-pr-10276-a11y.surge.sh

[gitdallas]

let's get a basic pagination working, and more than 10 items to see it (created with a loop so all the code isn't just for the items themselves).

[ajaypratap003]

Thanks you all for reviewing PR. In Github issue, it was about the static pagination. That's why I made it static pagination, not dynamic.
Anyway I made it dynamic and working as expected. I've implemented all the review comments. Please let me know if any review comment missing.

[gitdallas]

i understand the confusion there, HTML demos are always static in that sense necessarily though.

[thatblindgeye]

Couple more comments below, not really blockers though.

[ajaypratap003]

Hey folks,
Can you please merge this PR if everything looks fine

[andrew-ronaldson]

lgtm, thanks!

[tlabaj]

It looks like something went wrong with your rebase. You have files here that should not have been updated in your PR.

[mcoker]

Left some comments, the only potential blocker is that the issue title and demo to match is core's static pagination demo which uses the static variation of bottom pagination (isStatic). This demo is sticky bottom pagination, but with full pagination support. If we were looking for parity with the core demos, maybe we would:

• Update the basic demo to have full pagination support, and add compact bottom pagination to that demo.
• Update this demo title to "Static bottom pagination" and remove isSticky and add isStatic to the bottom pagination

The other comments are just nice-to-haves

• Match the flex layout(s) from core for the data list items. That will address some spacing differences between react/core
• Use compact top pagination

[mcoker]

This is just a nit, I'm not sure how close we need to match the core demo, especially this part which is just content and doesn't impact the purpose of the demo (static bottom pagination) but if we do want to fix it, the layout is below. One decent visual thing it will address is to add space between the icon/text pairings in each row. You could also just add a {' '} or something there, too, or get the svg and number to render on the same line like the basic data list demo

flex.column.space-items-md
  flex.column.space-items-none
    flex-item
      // <p> text
    flex-item
      // <small> text
  flex.wrap
    flex.space-items-xs // one of these for each svg/number pair
      // <svg> and number
    flex-item
      // "Updated [n] days ago" text

[mcoker]

If this is to create a static bottom pagination demo, I'd rename this. The core demo is called "Static bottom pagination"

[mcoker]

To match core (and the basic react data-list demo) this would use compact top pagination

Suggested change

	{renderPagination('top-pagination', PaginationVariant.top, false, false)}
	{renderPagination('top-pagination', PaginationVariant.top, true, false)}

[mcoker]

From the issue title in #10247, if this is supposed to match the HTML/core static bottom pagination demo, you'll want to pass isStatic to this bottom pagination. By default bottom pagination is "sticky" on mobile, meaning it floats on the bottom of the viewport as you scroll. A static pagination won't float on mobile, and will always be at the very end of the datalist. You'll want to make this change, disabling isSticky

Suggested change

	{renderPagination('bottom-pagination', PaginationVariant.bottom, true, true)}
	{renderPagination('bottom-pagination', PaginationVariant.bottom, true, false)}

Then I'm guessing you might need another arg in renderPagination() to set isStatic

patternfly-react/packages/react-core/src/demos/DataList/examples/DataListPagination.tsx

Lines 63 to 78 in 1f492d1

	const renderPagination = (id: string, variant: PaginationVariant, isCompact: boolean, isSticky: boolean) => (
	<Pagination
	id={id}
	variant={variant}
	itemCount={rows.length}
	page={page}
	perPage={perPage}
	isCompact={isCompact}
	isSticky={isSticky}
	onSetPage={handleSetPage}
	onPerPageSelect={handlePerPageSelect}
	titles={{
	paginationAriaLabel: `${variant} pagination`
	}}
	/>
	);

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity.