Make the showPages prop on our Pagination components responsive

[mperrotti]

The showPages prop on both Pagination components can now accept a responsive value.

Closes #2773

Screenshots

Kapture.2023-06-07.at.16.56.12.mp4

Merge checklist

• Added/updated tests
• Added/updated documentation
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 34bc0c8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	102.15 KB (+0.21% 🔺)
dist/browser.umd.js	102.69 KB (+0.21% 🔺)

[joshblack]

@mperrotti sorry for the delay on this! Just wanted to ask if this is something that could be built-in, e.g. the steps are always hidden at narrow and become visible at larger breakpoints, or if showPages is needed for specific use-cases 👀 Just wanted to double-check to make sure I understand the context here.

[mperrotti]

@joshblack - instead of building it in, I wanted to give users the option to change the value for different viewport sizes. For example, I might be using pagination in a narrow sidebar on wide screens, so I'd want to set showPages={{wide: false}}

[joshblack]

With the stuff from container queries figured moving forward with option 2 works like you suggested would work! Just had one question on the implementation, curious what you think 👀

[joshblack]

Is the hiddenViewportRanges prop something that can be placed on TablePaginationSteps? Would be great to calculate this once and place it on the outermost node and then target it e.g.

  @media ${viewportRanges.narrow} {
    .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:not(:first-child):not(:last-child) {
      display: none;
    }

    .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:first-child {
      margin-inline-end: 0;
    }
  }

If not, I think this is something we should calculate once instead of as a function and just pass its value to each Step instead of messing around with useCallback() and calling it for each step.

[mperrotti]

Ahh good catch! Ok, I'll refactor 👍

[joshblack]

🥳