feat(pager): align with Fusion DS by nuria1110 · Pull Request #8010 · Sage/carbon

nuria1110 · 2026-06-10T13:56:03Z

Proposed behaviour

Alignes Pager to Fusion DS Pagination component.

Updates styles and adds fusion-tokens.
Replaces navigation links with buttons.
Updates translation keys and deprecates keys that are no longer relevant.
Adds accessible labels for navigation landmark, current page input and navigation buttons.
Adds size prop:

Deprecated props:

hideDisabledElements
showPageSizeLabelBefore
showPageSizeLabelAfter
showTotalRecords
showPreviousAndNextButtons
showPageCount
smallScreenBreakpoint

Current behaviour

Pager is not aligned with Fusion DS.

Checklist

QA

Tested in provided StackBlitz sandbox/Storybook
Add new Playwright test coverage if required
Carbon implementation matches Design System/designs
UI Tests GitHub check reviewed if required

Additional context

Testing instructions

Copilot

Pull request overview

Aligns the Pager component with Fusion DS Pagination, updating styling/tokens, interaction patterns, accessibility labels, and the public API surface (including a new size prop and deprecations of several legacy props/translation keys).

Changes:

Replaces link-based navigation with button-based navigation and introduces Fusion-aligned sizing/styling.
Updates i18n model: adds new aria/label keys and deprecates older pager translation keys.
Updates unit tests, Playwright tests, stories, and docs to match the new UI/behavior.

Reviewed changes

Copilot reviewed 25 out of 25 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
src/locales/locale.ts	Updates pager locale typings, adds new keys and deprecates old ones.
src/locales/en-gb.ts	Implements new pager translation keys for en-GB.
src/components/pager/pagination.style.ts	Adds new Fusion-aligned pager styles (nav container + page size area).
src/components/pager/pagination.component.tsx	Introduces new Pagination implementation (exported as Pager).
src/components/pager/internal/pagination-navigation.style.tsx	Adds styling for navigation buttons and current page input layout.
src/components/pager/internal/pagination-navigation.component.tsx	Implements button navigation + current-page input behavior and a11y.
src/components/pager/index.ts	Switches default export to the new Pagination component and aliases props type.
src/components/pager/pager.test.tsx	Reworks unit tests for the updated behavior and new aria-labels.
src/components/pager/pager.pw.tsx	Updates/rewrites Playwright tests for focus management and a11y coverage.
src/components/pager/components.test-pw.tsx	Updates Playwright mount component for the new Pager behavior.
src/components/pager/pager.stories.tsx	Updates stories to reflect new API/behavior and adds size variants.
src/components/pager/pager-test.stories.tsx	Updates test stories for broader visual/viewport coverage of new variants.
src/components/pager/pager.mdx	Updates component docs and translation keys table.
src/components/pager/pager.component.tsx	Removes the legacy Pager implementation.
src/components/pager/pager.style.ts	Removes legacy Pager styling.
src/components/pager/internal/pager-navigation.component.tsx	Removes legacy navigation implementation.
src/components/pager/internal/pager-navigation-link.component.tsx	Removes legacy link-based navigation helper.
src/components/pager/internal/pager-navigation.test.tsx	Removes legacy navigation tests.
src/components/flat-table/flat-table.style.ts	Updates footer styling hooks to target the new pager root component.
src/components/flat-table/flat-table.test.tsx	Updates Pager imports/usages in FlatTable tests.
src/components/flat-table/flat-table.pw.tsx	Removes FlatTable pager-navigation Playwright tests tied to the old implementation.
src/internal/input/input.style.ts	Removes legacy pager-specific input overrides hook.
src/internal/input/input-style-overrides.style.ts	Deletes legacy pager input override CSS blocks.
src/internal/input-icon-toggle/input-icon-toggle.style.ts	Removes pager-specific icon-toggle overrides.
skills/carbon-react/components/pager.md	Updates skills docs for new Pager/Pagination API details.

nuria1110 · 2026-06-12T11:45:55Z

+    if (+totalRecords < 0 || Number.isNaN(+totalRecords)) {
+      return 1;
+    }
+    return Math.ceil(+totalRecords / internalPageSize);
+  }, [totalRecords, internalPageSize]);


When totalRecords is 0, output is "0 of 0 pages" as the current page can never be larger than the total. This change is unnecessary.

nuria1110 · 2026-06-12T11:47:11Z

+    ariaLabel?: () => string;
+    // TODO - make the following keys required once deprecated keys are removed.
+    pageX: (currentPage?: number | string) => string;
+    ofTotalPages?: (totalPages: string | number) => string;
+    itemsPerPage?: () => string;


Translations will be provided at a later date, consumers can set the translations themselves if necessary.

I have removed the deprecated translations that are no longer in use in all locales and added currentPage prop to translation key pageX.

+      name: "pager.previousAriaLabel",
      description:
-        "The text to display for the button that navigates to the last page of records",
+        "Accessible label for the 'Go To Next' button.",
      type: "func",
      returnType: "string",


nuria1110 · 2026-06-12T12:31:23Z

 ## Source
 - Export: `./components/pager`
- Props interface: `PagerProps`
+- Props interface: `PaginationProps`



.md files cannot be manually updated, I have reverted the interface name to PagerProps and added a TODO for this to be updated once the public interface it updated as a breaking change.

DipperTheDan · 2026-06-15T10:25:27Z

suggestions: Beware of conflicts with the FlatTable testing optimisation stuff @sianford is currently doing with FlatTable.

nineteen88 · 2026-06-16T13:59:21Z

This work will close the following issue as it will be superseded by this updated Pager/Pagination.

#7734

nineteen88 · 2026-06-18T07:07:20Z

-    previous: () => "Vorherige",
-    pageX: () => "Seite",
-    ofY: (count) => `von ${count}`,
+    pageX: (currentPage?: number | string) => `Seite ${currentPage}`,


comment: frustrating that we lose i18n support for this component again

Not a lot we can do about it, as it's not worth blocking while waiting for translations, but I wonder if this will cause issues for consuming teams

Silviota · 2026-06-22T10:16:18Z

UXQA:

Rename "Pager" to "Pagination" to match industry standards.
In the Items per page control (M and L sizes), use hug content width. Reduce the spacing between the number and the caret, as it currently appears too wide.

Copilot

Warning

Copilot's review of this pull request may be incomplete because some of the changed files are excluded by your Copilot content exclusion settings. See Excluding content from Copilot for details.

Pull request overview

Copilot reviewed 30 out of 30 changed files in this pull request and generated 3 comments.

Files excluded by content exclusion policy (1)

skills/carbon-react/components/pager.md

Aligns to Pagination component in Fusion DS, Pager to be renamed to Pagination in a future release. Deprecates props that are no longer relevant, updates styles with fusion-tokens and updates translation keys.

carbonci · 2026-06-30T15:49:19Z

🎉 This PR is included in version 159.15.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

nuria1110 self-assigned this Jun 10, 2026

nuria1110 force-pushed the pager-audit branch from 3e3851c to e49fcd2 Compare June 10, 2026 14:06

nuria1110 added Pending Review Pending QA Pending UX QA Squad Front End labels Jun 10, 2026

nuria1110 requested a review from Copilot June 10, 2026 14:19

Copilot started reviewing on behalf of nuria1110 June 10, 2026 14:19 View session

Copilot AI reviewed Jun 10, 2026

View reviewed changes

nuria1110 force-pushed the pager-audit branch from e49fcd2 to 8e4d41e Compare June 12, 2026 12:50

DipperTheDan self-requested a review June 15, 2026 09:59

DipperTheDan previously approved these changes Jun 15, 2026

View reviewed changes

nineteen88 self-requested a review June 17, 2026 09:08

nineteen88 previously approved these changes Jun 18, 2026

View reviewed changes

nineteen88 added Passed Review and removed Pending Review labels Jun 18, 2026

nuria1110 marked this pull request as ready for review June 22, 2026 09:07

nuria1110 requested review from a team as code owners June 22, 2026 09:07

Silviota added Passed UX QA and removed Pending UX QA labels Jun 22, 2026

nuria1110 dismissed stale reviews from nineteen88 and DipperTheDan via 9363aa6 June 24, 2026 15:05

nuria1110 force-pushed the pager-audit branch from 8e4d41e to 9363aa6 Compare June 24, 2026 15:05

nuria1110 marked this pull request as draft June 24, 2026 16:02

divyajindel marked this pull request as ready for review June 25, 2026 10:10

divyajindel previously approved these changes Jun 25, 2026

View reviewed changes

divyajindel added Passed QA and removed Pending QA labels Jun 25, 2026

nuria1110 dismissed divyajindel’s stale review via e120c0d June 26, 2026 10:41

nuria1110 force-pushed the pager-audit branch 2 times, most recently from e120c0d to def6ed2 Compare June 30, 2026 09:01

nineteen88 previously approved these changes Jun 30, 2026

View reviewed changes

nineteen88 requested a review from Copilot June 30, 2026 09:48

Copilot started reviewing on behalf of nineteen88 June 30, 2026 09:48 View session

Copilot AI reviewed Jun 30, 2026

View reviewed changes

Comment thread src/components/pager/__internal__/pagination-navigation.component.tsx

Comment thread src/components/pager/pager.component.tsx

Comment thread src/components/flat-table/flat-table.test.tsx

divyajindel previously approved these changes Jun 30, 2026

View reviewed changes

feat(pager): align with Fusion DS

7c6aa54

Aligns to Pagination component in Fusion DS, Pager to be renamed to Pagination in a future release. Deprecates props that are no longer relevant, updates styles with fusion-tokens and updates translation keys.

nuria1110 dismissed stale reviews from divyajindel and nineteen88 via 7c6aa54 June 30, 2026 15:16

nuria1110 force-pushed the pager-audit branch from def6ed2 to 7c6aa54 Compare June 30, 2026 15:16

edleeks87 approved these changes Jun 30, 2026

View reviewed changes

nineteen88 approved these changes Jun 30, 2026

View reviewed changes

divyajindel approved these changes Jun 30, 2026

View reviewed changes

nuria1110 merged commit c87418b into master Jun 30, 2026
37 of 38 checks passed

nuria1110 deleted the pager-audit branch June 30, 2026 15:46

carbonci added the released label Jun 30, 2026

Uh oh!

Conversation

nuria1110 commented Jun 10, 2026

Proposed behaviour

Current behaviour

Checklist

QA

Additional context

Testing instructions

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

nuria1110 Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

nuria1110 Jun 12, 2026 • 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!

nuria1110 Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

DipperTheDan Jun 15, 2026

Choose a reason for hiding this comment

Uh oh!

nineteen88 commented Jun 16, 2026

Uh oh!

nineteen88 Jun 18, 2026

Choose a reason for hiding this comment

Uh oh!

Silviota commented Jun 22, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

carbonci commented Jun 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

8 participants

nuria1110 Jun 12, 2026 •

edited

Loading