Skip to content

feat: add compact variant to pagination - #4696

Merged
amanabiy merged 6 commits into
mainfrom
dev-v3-amanabiy-pagination-compact
Aug 6, 2026
Merged

feat: add compact variant to pagination#4696
amanabiy merged 6 commits into
mainfrom
dev-v3-amanabiy-pagination-compact

Conversation

@amanabiy

@amanabiy amanabiy commented Jul 6, 2026

Copy link
Copy Markdown
Member

Description

Adds a compact Pagination variant via pagesVariant="compact", which shows a single 3 of 12 counter between the arrows instead of numbered page buttons, for space-constrained layouts. The text is localized through i18nStrings.pagesCompactText (receiving { currentPage, pagesCount, openEnd }); openEnd appends a +. pagesVariant defaults to 'normal', so existing usage is unchanged.

Related links, issue #, if available: fUKQXLDPlRFb

How has this been tested?

Unit tests, and visual on test pages, and added to visual regression test as well.

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • Changes were manually tested for accessibility, see accessibility guidelines.

Security

Testing

  • Changes are covered with new/existing unit tests?
  • Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

@codecov

codecov Bot commented Jul 6, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.63%. Comparing base (b4269b2) to head (0387277).

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #4696   +/-   ##
=======================================
  Coverage   97.63%   97.63%           
=======================================
  Files         957      957           
  Lines       31100    31114   +14     
  Branches    11435    11443    +8     
=======================================
+ Hits        30364    30378   +14     
  Misses        729      729           
  Partials        7        7           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@amanabiy
amanabiy force-pushed the dev-v3-amanabiy-pagination-compact branch 2 times, most recently from a114090 to 6755fe5 Compare July 9, 2026 14:07
@amanabiy
amanabiy force-pushed the dev-v3-amanabiy-pagination-compact branch from a8e09f8 to 0d40095 Compare July 21, 2026 15:37
@amanabiy
amanabiy force-pushed the dev-v3-amanabiy-pagination-compact branch from 0d40095 to 929bec5 Compare July 23, 2026 16:53
@amanabiy
amanabiy force-pushed the dev-v3-amanabiy-pagination-compact branch from 929bec5 to 96f8597 Compare July 23, 2026 17:41
@amanabiy
amanabiy force-pushed the dev-v3-amanabiy-pagination-compact branch from 96f8597 to 21e7a73 Compare July 27, 2026 14:14
return { wrapper, rerender };
}

function renderWithI18n(jsx: React.ReactElement) {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a TestI18nProvider helper specifically for testing the logic independent of the strings themselves (src/i18n/testing.tsx)

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, used the TestI18nProvider

Comment thread src/pagination/interfaces.ts Outdated

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure why these tags (inside the I18nStrings interface) were here before, they technically do nothing here (except confuse people using IDE suggestions).

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have cleaned it up. I have removed the other comments as well.

Comment thread src/pagination/internal.tsx Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants