chore(DataTable.Pagination): Convert DataTable.Pagination to CSS modules by jonrohan · Pull Request #6273 · primer/react

jonrohan · 2025-07-02T20:52:06Z

This converts the DataTable.Pagination component to CSS modules. This was overlooked in the original migration.

Changelog

New

Changed

Converts styled-component styling to CSS modules.

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-07-02T20:52:11Z

🦋 Changeset detected

Latest commit: 90e70cc

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-07-02T20:52:37Z

👋 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-07-02T20:56:12Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	92.02 KB (0%)
packages/react/dist/browser.umd.js	92.23 KB (0%)

primer-integration · 2025-07-02T21:09:12Z

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

Copilot

Pull Request Overview

This PR converts the styling of the DataTable.Pagination component (and the internal ButtonReset component) from styled-components to CSS modules.

Replaces the styled-components-based ButtonReset with a functional component that applies a CSS module and clsx.
Migrates all pagination-related styles in DataTable.Pagination to a CSS module, replacing StyledPagination and scoped class names.
Adds a changeset entry for a minor release.

Reviewed Changes

Copilot reviewed 3 out of 5 changed files in this pull request and generated 1 comment.

File	Description
packages/react/src/internal/components/ButtonReset.tsx	Replaced styled-components with `ButtonReset.module.css` and a functional component.
packages/react/src/DataTable/Pagination.tsx	Swapped out `StyledPagination` and inline styles for `Pagination.module.css` + `clsx`.
.changeset/polite-pandas-tie.md	Added changeset marking the minor version bump for this chore.

Files not reviewed (2)

packages/react/src/DataTable/Pagination.module.css: Language not supported
packages/react/src/internal/components/ButtonReset.module.css: Language not supported

Comments suppressed due to low confidence (1)

packages/react/src/internal/components/ButtonReset.tsx:11

Missing import of React for using React.PropsWithChildren and React.ButtonHTMLAttributes. Please add import type React from 'react' at the top.

}: React.PropsWithChildren & React.ButtonHTMLAttributes<HTMLButtonElement>) => {

primer-integration · 2025-07-03T01:00:10Z

🟢 golden-jobs completed with status success.

joshblack

Just one suggestion for the ButtonReset but otherwise LGTM 👍

joshblack · 2025-07-03T16:18:51Z

+ border-end-end-radius: var(--borderRadius-medium);
+}
+
+@media ((max-width: calc(768px - 0.02px))) {


Completely separate from the refactor, would this be something we would ever want a container query for now that we can use them or is this best tied to the viewport range? (Was just curious)

Yes I think this was a bit verbose and would love either media query variables here or container queries.

Co-authored-by: Josh Black <joshblack@github.com>

github-actions · 2025-07-03T16:25:15Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

github-actions · 2025-07-03T16:32:22Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

github-actions · 2025-07-03T22:24:08Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

github-actions · 2025-07-10T00:46:38Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

…les (#6273) Co-authored-by: Josh Black <joshblack@github.com> Co-authored-by: primer[bot] <119360173+primer[bot]@users.noreply.github.com>

Convert DataTable.Pagination to CSS modules
ed7c805

github-actionsBot added the staff Author is a staff member label Jul 2, 2025

Create polite-pandas-tie.md
a9015bc

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

github-actionsBot requested a deployment to storybook-preview-6273 July 2, 2025 20:55 Abandoned

jonrohan added 2 commits July 2, 2025 21:00

Disabling lint errors
2c1d39a

change to minor
478a7b8

github-actionsBot requested a deployment to storybook-preview-6273 July 2, 2025 21:04 Abandoned

jonrohan marked this pull request as ready for review July 2, 2025 21:09

CopilotAI review requested due to automatic review settings July 2, 2025 21:09

jonrohan requested a review from a team as a code owner July 2, 2025 21:09

jonrohan requested a review from joshblack July 2, 2025 21:09

CopilotAI reviewed Jul 2, 2025
View reviewed changes

Comment threadpackages/react/src/internal/components/ButtonReset.tsx

jonrohan deployed to github-pages July 2, 2025 21:23 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6273 July 2, 2025 21:23 Inactive

github-actionsBot added integration-tests: failing Changes in this PR cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Jul 2, 2025

jonrohan enabled auto-merge July 2, 2025 23:59

github-actionsBot added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: failing Changes in this PR cause breaking changes in gh/gh labels Jul 3, 2025

joshblack reviewed Jul 3, 2025
View reviewed changes

Update packages/react/src/internal/components/ButtonReset.tsx
7b856af
Co-authored-by: Josh Black <joshblack@github.com>

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

Update ButtonReset.tsx
f1d0489

github-actionsBot added integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Jul 3, 2025

github-actionsBot requested a deployment to storybook-preview-6273 July 3, 2025 16:34 Abandoned

joshblack approved these changes Jul 3, 2025
View reviewed changes

jonrohan had a problem deploying to github-pages July 3, 2025 17:18 — with GitHub Actions Failure

github-actionsBot requested a deployment to storybook-preview-6273 July 3, 2025 17:18 Abandoned

jonrohan had a problem deploying to github-pages July 3, 2025 17:58 — with GitHub Actions Failure

github-actionsBot requested a deployment to storybook-preview-6273 July 3, 2025 17:58 Abandoned

Merge branch 'main' into css_modules_datatable_pagination
421bad1

github-actionsBot removed the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Jul 3, 2025

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

jonrohan added this pull request to the merge queue Jul 3, 2025

jonrohan deployed to github-pages July 3, 2025 22:36 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6273 July 3, 2025 22:36 Inactive

jonrohan removed this pull request from the merge queue due to a manual request Jul 3, 2025

jonrohan enabled auto-merge July 7, 2025 22:18

Merge branch 'main' into css_modules_datatable_pagination
90e70cc

github-actionsBot added integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Jul 10, 2025

jonrohan added this pull request to the merge queue Jul 10, 2025

primerBotdeployed to github-pages July 10, 2025 00:55 View deployment

github-actionsBottemporarily deployed to storybook-preview-6273 July 10, 2025 00:55 Inactive

Merged via the queue into main with commit 0cb9a5dJul 10, 2025

jonrohan deleted the css_modules_datatable_pagination branch July 10, 2025 01:04

primerBot mentioned this pull request Jul 10, 2025
Release tracking #6312
Merged

Uh oh!

Conversation

jonrohan commented Jul 2, 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-botBot commented Jul 2, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actionsBot commented Jul 2, 2025

Uh oh!

github-actionsBot commented Jul 2, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

primer-integrationBot commented Jul 2, 2025

Uh oh!

CopilotAI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

primer-integrationBot commented Jul 3, 2025

Uh oh!

joshblack left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

joshblackJul 3, 2025

Choose a reason for hiding this comment

Uh oh!

jonrohanJul 3, 2025

Choose a reason for hiding this comment

Uh oh!

github-actionsBot commented Jul 3, 2025

Uh oh!

github-actionsBot commented Jul 3, 2025

Uh oh!

github-actionsBot commented Jul 3, 2025

Uh oh!

Uh oh!

github-actionsBot commented Jul 10, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jonrohan commented Jul 2, 2025•
edited
Loading

changeset-botBot commented Jul 2, 2025•
edited
Loading

github-actionsBot commented Jul 2, 2025•
edited
Loading