Docs - Update content for mobile pagination in design guidelines

[edonehoo]

RE Mobile full pagination in toolbar, replace this with accurate description: "Items in view: At this screen size, the top toolbar only shows the item count to indicate items currently in view. It hides all other pagination controls."

---

Jira Issue: PF-2715

[mcoker]

Some notes on this from the design meeting (cc @lboehling)

• The screenshot in design guidelines for top pagination on mobile is incorrect and should be updated to match what's in PF currently.
• Best practice for mobile is to have the text/summary view for top pagination and sticky bottom pagination serve as functional pagination with controls
• We recommend against having full controls in both places on mobile - either have them in top or bottom, but not in both
• Controls should only be used in top pagination on mobile if you can't use bottom pagination, or you can only use the text/summary in the bottom for some reason.

Just read the pagination docs and had some other notes:

Bottom pagination: Right-align pagination below content views, too. If you want the bottom pagination to be sticky so it does not scroll off the page when the content is taller that the viewport, place the pagination in a footer page section and apply the pf-m-sticky-bottom modifier section to create a sticky page footer.

• We don't have a "footer" page section - even if the wording is just to say it should go at the bottom or something, pagination shouldn't go in its own page section. We recommend placing the bottom pagination directly after the thing it's attached to (table, data-list, etc). FWIW we do not recommend placing bottom pagination in a toolbar, either. The structure looks like this:

<Page>
  <PageSection>
    <Toolbar /> // optional, top pagination goes in this toolbar
    <Table /> // the thing you're paginating
    <Pagination variant="bottom" />

• pf-m-sticky-bottom - This is a CSS class that goes on page sections. If you want to call out how to make bottom pagination sticky (at all viewports), you'd use the react props isSticky with variation="bottom", like <Pagination isSticky variant="bottom" />. I'm not sure if we normally call out CSS classes, but FWIW it's a combination of .pf-m-bottom and .pf-m-sticky.

Full pager: Supplies the same pagination options as the desktop full pager, but in the bottom toolbar.

• Shouldn't go in a toolbar (from the note above)
• It doesn't have the same options as full pagination. From the desktop section above it in the docs, full pagination is described as "Full pager: Supplies all necessary pagination options including page-back and page-forward, page-first and page-last, and a manual option to type in a desired page number." The bottom pagination on mobile only gives you page-back, page-forward, and the menu to select how many items in view/per page. Specifically, it doesn't have page-first, page-last, or the manual option to type in a page number.