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('...'); + }); + }); });