fix: pagination nav adjacent double ellipses

carbon-design-system · Oct 17, 2024 · 4345adb · 4345adb
1 parent 98b7c28
commit 4345adb
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/packages/react/src/components/PaginationNav/PaginationNav-test.js b/packages/react/src/components/PaginationNav/PaginationNav-test.js
@@ -111,5 +111,11 @@ describe('PaginationNav', () => {
 
       expect(screen.getByText('4')).toHaveAttribute('aria-current', 'page');
     });
+
+    it('should not hide page 1 when active page is 0', () => {
+      render(<PaginationNav totalItems={4} page={0} />);
+
+      expect(screen.getByText('1')).toBeInTheDocument();
+    });
   });
 });
diff --git a/packages/react/src/components/PaginationNav/PaginationNav.tsx b/packages/react/src/components/PaginationNav/PaginationNav.tsx
@@ -383,7 +383,8 @@ const PaginationNav = React.forwardRef<HTMLElement, PaginationNavProps>(
     function pageWouldBeHidden(page: number) {
       const startOffset = itemsDisplayedOnPage <= 4 && page > 1 ? 0 : 1;
 
-      const wouldBeHiddenInFront = page >= startOffset && page <= cuts.front;
+      const wouldBeHiddenInFront =
+        (page >= startOffset && page <= cuts.front) || page === 0;
       const wouldBeHiddenInBack =
         page >= totalItems - cuts.back - 1 && page <= totalItems - 2;