From ef0af0e41cbb4f89abc7158ca788207ba4c7617c Mon Sep 17 00:00:00 2001 From: Tudor Gradinaru Date: Mon, 24 Nov 2025 10:17:41 +0200 Subject: [PATCH] fix(pagination): remove unnecessary ellipsis when count equals visiblePages + 2 (#2624) * fix(pagination): remove unnecessary ellipsis when count equals visiblePages + 1 Fixes #2589 - Changed condition from to - This allows one extra page to be displayed without ellipsis (e.g., [1,2,3,4,5,6] instead of [1,2,3,4,5,'...',6]) - Added test case to verify ellipsis is not shown when count=6 and visiblePages=5 * Update packages/ui/components/pagination/src/LionPagination.js Co-authored-by: gerjanvangeest * test: add additional ellipsis display tests - Add test for count=7 (visiblePages + 2) without ellipsis - Add test for count=8 (visiblePages + 3) with ellipsis - Update condition to visiblePages + 2 to allow both count=6 and count=7 without ellipsis --------- Co-authored-by: gerjanvangeest --- .changeset/wise-zebras-allow.md | 7 ++++ .../pagination/src/LionPagination.js | 3 +- .../pagination/test/lion-pagination.test.js | 41 +++++++++++++++++++ 3 files changed, 50 insertions(+), 1 deletion(-) create mode 100644 .changeset/wise-zebras-allow.md diff --git a/.changeset/wise-zebras-allow.md b/.changeset/wise-zebras-allow.md new file mode 100644 index 000000000..6a8e2a53d --- /dev/null +++ b/.changeset/wise-zebras-allow.md @@ -0,0 +1,7 @@ +--- +'@lion/ui': patch +--- + +fix(pagination): remove unnecessary ellipsis when count equals visiblePages + 1 + +Fixed issue where LionPagination component incorrectly displayed ellipsis when the total page count was exactly one more than the visible pages setting (e.g., showing [1, 2, 3, 4, 5, '...', 6] instead of [1, 2, 3, 4, 5, 6] when visiblePages=5 and count=6). diff --git a/packages/ui/components/pagination/src/LionPagination.js b/packages/ui/components/pagination/src/LionPagination.js index d443cc8e3..348af7355 100644 --- a/packages/ui/components/pagination/src/LionPagination.js +++ b/packages/ui/components/pagination/src/LionPagination.js @@ -196,7 +196,8 @@ export class LionPagination extends LocalizeMixin(LitElement) { const finish = this.count; // If there are more pages then we want to display we have to redo the list each time // Else we can just return the same list every time. - if (this.count > this.__visiblePages) { + // Allow up to 2 extra pages without ellipsis (e.g., count=6 or count=7 when visiblePages=5) + if (this.count > this.__visiblePages + 2) { // Calculate left side of current page and right side const pos3 = this.current - 1; const pos4 = this.current; diff --git a/packages/ui/components/pagination/test/lion-pagination.test.js b/packages/ui/components/pagination/test/lion-pagination.test.js index 2b80860c2..c8fe6c4cc 100644 --- a/packages/ui/components/pagination/test/lion-pagination.test.js +++ b/packages/ui/components/pagination/test/lion-pagination.test.js @@ -164,4 +164,45 @@ describe('Pagination', () => { expect(buttons[3].getAttribute('aria-current')).to.equal('false'); }); }); + + describe('Ellipsis display', () => { + it('should not show ellipsis when count is visiblePages + 1 (count=6, visiblePages=5)', async () => { + const el = await fixture(html` `); + const navItems = Array.from(/** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('li')); + // Check that no ellipsis is rendered (no elements with '...') + const spans = Array.from( + /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('li span'), + ); + expect(spans.length).to.equal(0); + + // There should be 8 nav items: previous button + 6 page buttons + next button + expect(navItems.length).to.equal(8); + }); + + it('should not show ellipsis when count is visiblePages + 2 (count=7, visiblePages=5)', async () => { + const el = await fixture(html` `); + // Check that no ellipsis is rendered (no elements with '...') + const spans = Array.from( + /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('li span'), + ); + expect(spans.length).to.equal(0); + + // There should be 9 nav items: previous button + 7 page buttons + next button + const navItems = Array.from(/** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('li')); + expect(navItems.length).to.equal(9); + }); + + it('should show ellipsis when count is visiblePages + 3 (count=8, visiblePages=5)', async () => { + const el = await fixture(html` `); + // Check that ellipsis is rendered (should have elements with '...') + const spans = Array.from( + /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('li span'), + ); + expect(spans.length).to.be.greaterThan(0); + + // Verify the ellipsis contains '...' + const ellipsisText = Array.from(spans).map(span => span.textContent); + expect(ellipsisText).to.include('...'); + }); + }); });