feat(Pagination): add renderPage prop to Pagination #5820

hussam-i-am · 2025-03-25T20:40:07Z

Closes https://github.com/github/primer/issues/4946

Changelog

New

Adds renderPage prop to support render custom links within the Pagination component.
Creates shared ReactRouterLink mock to be shared among tests
Adds new tests

Changed

Removed

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

changeset-bot · 2025-03-25T20:40:11Z

🦋 Changeset detected

Latest commit: bbbe613

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 · 2025-03-25T20:40:41Z

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

github-actions · 2025-03-25T20:43:37Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	105.84 KB (+0.03% 🔺)
packages/react/dist/browser.umd.js	106.15 KB (-0.1% 🔽)

…am/pagination-render-page

theinterned · 2025-03-25T21:10:29Z

packages/react/src/__tests__/Pagination/Pagination.test.tsx

+        currentPage={1}
+        renderPageLink={({content, key, className}) => (
+          <ReactRouterLikeLink key={key} className={className} to={`#${content}`}>
+            {content}


the content could be a page number, but it could also be Next or Previous I think? Maybe we need an additional pageNum (or the actual page / page.num from model.tsx?)

It would be nice if content was children ... then the API could be

renderPageLink={({pageNum, ...props}) => <Link {...props} to={`#${pageNum}`} />}

…om/primer/react into hussam-i-am/pagination-render-page

joshblack

Left some quick comments, let me know what you think!

packages/react/src/Pagination/Pagination.features.stories.tsx

packages/react/src/Pagination/Pagination.tsx

…om/primer/react into hussam-i-am/pagination-render-page

primer-integration · 2025-03-28T04:23:46Z

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/369948

primer-integration · 2025-03-28T05:15:52Z

🔴 golden-jobs completed with status failure.

hussam-i-am added 3 commits March 25, 2025 19:25

feat(Pagination): add renderPage prop to Pagination

c34da34

add react router link mock

46810fd

rename prop and add doc

63144b6

hussam-i-am self-assigned this Mar 25, 2025

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Mar 25, 2025

hussam-i-am requested a review from theinterned March 25, 2025 20:41

add missing react

67ffa8b

add missing react

2dda335

github-actions bot requested a deployment to storybook-preview-5820 March 25, 2025 20:46 Abandoned

hussam-i-am deployed to github-pages March 25, 2025 20:59 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-5820 March 25, 2025 20:59 Inactive

Merge branch 'main' of https://github.com/primer/react into hussam-i-…

84cf870

…am/pagination-render-page

theinterned reviewed Mar 25, 2025

View reviewed changes

hussam-i-am deployed to github-pages March 25, 2025 21:18 — with GitHub Actions View deployment

hussam-i-am added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Mar 25, 2025

github-actions bot temporarily deployed to storybook-preview-5820 March 25, 2025 21:18 Inactive

test(vrt): update snapshots

927740b

github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Mar 25, 2025

hussam-i-am added 2 commits March 25, 2025 21:34

add number

980c645

Merge branch 'hussam-i-am/pagination-render-page' of https://github.c…

0d0fe4b

…om/primer/react into hussam-i-am/pagination-render-page

hussam-i-am marked this pull request as ready for review March 25, 2025 21:34

hussam-i-am requested review from a team as code owners March 25, 2025 21:34

hussam-i-am requested a review from langermank March 25, 2025 21:35

github-actions bot requested a deployment to storybook-preview-5820 March 25, 2025 21:38 Abandoned

hussam-i-am deployed to github-pages March 25, 2025 21:52 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-5820 March 25, 2025 21:52 Inactive

github-actions bot added the integration-tests: failing Changes in this PR cause breaking changes in gh/gh label Mar 26, 2025

Merge branch 'main' into hussam-i-am/pagination-render-page

a4f3214

hussam-i-am deployed to github-pages March 26, 2025 17:22 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-5820 March 26, 2025 17:22 Inactive

hussam-i-am deployed to github-pages March 26, 2025 20:40 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-5820 March 26, 2025 20:40 Inactive

hussam-i-am changed the title ~~feat(Pagination): add renderPage prop to Pagination~~ feat(Pagination): add renderPageLink prop to Pagination Mar 26, 2025

joshblack reviewed Mar 27, 2025

View reviewed changes

packages/react/src/Pagination/Pagination.features.stories.tsx Outdated Show resolved Hide resolved

packages/react/src/Pagination/Pagination.tsx Outdated Show resolved Hide resolved

packages/react/src/Pagination/Pagination.tsx Outdated Show resolved Hide resolved

hussam-i-am changed the title ~~feat(Pagination): add renderPageLink prop to Pagination~~ feat(Pagination): add renderPage prop to Pagination Mar 27, 2025

hussam-i-am added 2 commits March 27, 2025 17:55

rename renderPageLink to renderPage

f3b97e2

Merge branch 'hussam-i-am/pagination-render-page' of https://github.c…

3a29241

…om/primer/react into hussam-i-am/pagination-render-page

hussam-i-am requested a review from joshblack March 27, 2025 17:58

hussam-i-am deployed to github-pages March 27, 2025 18:09 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-5820 March 27, 2025 18:10 Inactive

hussam-i-am requested review from theinterned March 28, 2025 03:05

Merge branch 'main' into hussam-i-am/pagination-render-page

574a23a

hussam-i-am deployed to github-pages March 28, 2025 03:18 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-5820 March 28, 2025 03:19 Inactive

Merge branch 'main' into hussam-i-am/pagination-render-page

bbbe613

joshblack approved these changes Mar 28, 2025

View reviewed changes

hussam-i-am deployed to github-pages March 28, 2025 16:19 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-5820 March 28, 2025 16:19 View deployment

hussam-i-am added this pull request to the merge queue Mar 28, 2025

Merged via the queue into main with commit bd9225d Mar 28, 2025
44 checks passed

hussam-i-am deleted the hussam-i-am/pagination-render-page branch March 28, 2025 16:33

primer bot mentioned this pull request Mar 28, 2025

Release tracking (37.18.0) #5834

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(Pagination): add renderPage prop to Pagination #5820

feat(Pagination): add renderPage prop to Pagination #5820

Uh oh!

hussam-i-am commented Mar 25, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Mar 25, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Mar 25, 2025

Uh oh!

github-actions bot commented Mar 25, 2025 •

edited

Loading

Uh oh!

theinterned Mar 25, 2025

Uh oh!

theinterned Mar 25, 2025 •

edited

Loading

Uh oh!

hussam-i-am Mar 25, 2025

Uh oh!

joshblack left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

primer-integration bot commented Mar 28, 2025

Uh oh!

primer-integration bot commented Mar 28, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

feat(Pagination): add renderPage prop to Pagination #5820

feat(Pagination): add renderPage prop to Pagination #5820

Uh oh!

Conversation

hussam-i-am commented Mar 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Mar 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Mar 25, 2025

Uh oh!

github-actions bot commented Mar 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

theinterned Mar 25, 2025

Choose a reason for hiding this comment

Uh oh!

theinterned Mar 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hussam-i-am Mar 25, 2025

Choose a reason for hiding this comment

Uh oh!

joshblack left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

primer-integration bot commented Mar 28, 2025

Uh oh!

primer-integration bot commented Mar 28, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

hussam-i-am commented Mar 25, 2025 •

edited

Loading

changeset-bot bot commented Mar 25, 2025 •

edited

Loading

github-actions bot commented Mar 25, 2025 •

edited

Loading

theinterned Mar 25, 2025 •

edited

Loading