Remove the CSS modules feature flag from Pagination component

[jamieshark]

• Closes https://github.com/github/primer/issues/4301

Changelog

New

Changed

Removed

CSS modules feature flag from Pagination component

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]

🦋 Changeset detected

Latest commit: 8c53016

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]

👋 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!

[jamieshark]

I thought this should have been an a tag based on the previous code, but that caused a test to fail with the expected number of a tags to render. Not sure if the test had to be updated, or if this is the correct default element.

[Copilot]

Pull Request Overview

This PR removes the legacy CSS modules feature flag from the Pagination component and replaces the styled‑components implementation with CSS module classes and a toggleable SX component.

• Removed toggleStyledComponent, styled-components imports, useFeatureFlag, and theme props
• Replaced custom <Page> styled anchor with a <span> using CSS module classes
• Swapped toggleStyledComponent for toggleSxComponent on the container and always apply CSS module classes via className

Reviewed Changes

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

File	Description
packages/react/src/Pagination/Pagination.tsx	Remove styled‑components and feature flag, apply CSS modules classes, update container to SX component
.changeset/nasty-nails-appear.md	Update changelog to reflect removal of CSS modules flag

[Copilot]

Replacing the styled anchor component with a removes native anchor semantics (e.g., href support, keyboard focus, and accessibility). Consider rendering an or using a component that preserves the original element type via the as prop.

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	97.96 KB (-0.6% 🔽)
packages/react/dist/browser.umd.js	98.22 KB (-0.55% 🔽)

[joshblack]

One option for these is to use BoxWithFallback directly where the component is used since we don't really need these wrappers anymore. For example:

// Before
  return (
    <PaginationContainer
      className={clsx(enabled && classes.PaginationContainer)}
      aria-label="Pagination"
      {...rest}
      theme={theme}
    >

// After
  return (
    <BoxWithFallback
      as="nav"
      className={clsx(enabled && classes.PaginationContainer)}
      aria-label="Pagination"
      {...rest}
    >

Let me know what you think!

[joshblack]

I think if we're exposing theme / it's in our Public API we should add a deprecation note here for this type and then update the usage below to noop like:

function Pagination({
  theme: _theme,

This will help out when rolling this out to avoid:

• A TypeScript error with theme being provided (but it's no longer on the type)
• A runtime error if theme is now added to the element that {...rest} is being called on since it would be in the rest argument

Hope that makes sense, let me know what you think! If all of this is internal feel free to ignore me too 😂

[primer-integration]

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

[primer-integration]

🟢 golden-jobs completed with status success.