diff --git a/packages/react/src/Pagination/Pagination.test.tsx b/packages/react/src/Pagination/Pagination.test.tsx
index b710ab138..3668f3181 100644
--- a/packages/react/src/Pagination/Pagination.test.tsx
+++ b/packages/react/src/Pagination/Pagination.test.tsx
@@ -3,12 +3,19 @@ import '@testing-library/jest-dom'
import {axe, toHaveNoViolations} from 'jest-axe'
import {Pagination} from './Pagination'
-import '../test-utils/mocks/match-media-mock'
+import {useWindowSize} from '../hooks/useWindowSize'
+
+jest.mock('../hooks/useWindowSize')
+const mockUseWindowSize = useWindowSize as jest.Mock
+mockUseWindowSize.mockImplementation(() => ({isMedium: true}))
expect.extend(toHaveNoViolations)
describe('Pagination', () => {
- afterEach(cleanup)
+ afterEach(() => {
+ cleanup()
+ jest.clearAllMocks()
+ })
it('renders the root element correctly into the document', () => {
const {getByRole} = render(
)
@@ -49,7 +56,6 @@ describe('Pagination', () => {
it('can optionally remove paged items', () => {
const {getByRole} = render(
)
const rootEl = getByRole('navigation')
-
const linksAsVerbatimText = Array.from(rootEl.querySelectorAll('a')).map(link => link.textContent)
expect(linksAsVerbatimText).toEqual(['Previous', 'Next'])
})
@@ -124,4 +130,12 @@ describe('Pagination', () => {
}
}
})
+
+ it('does not show paged items by default on narrow viewports', () => {
+ mockUseWindowSize.mockImplementation(() => ({isMedium: false}))
+ const {getByRole} = render(
)
+ const rootEl = getByRole('navigation')
+ const linksAsVerbatimText = Array.from(rootEl.querySelectorAll('a')).map(link => link.textContent)
+ expect(linksAsVerbatimText).toEqual(['Previous', 'Next'])
+ })
})
diff --git a/packages/react/src/Pagination/Pagination.tsx b/packages/react/src/Pagination/Pagination.tsx
index 375e3c632..c7e9aa4ad 100644
--- a/packages/react/src/Pagination/Pagination.tsx
+++ b/packages/react/src/Pagination/Pagination.tsx
@@ -1,5 +1,5 @@
import React, {memo, PropsWithChildren, useCallback} from 'react'
-import {Link} from '..'
+import {Link, useWindowSize} from '..'
import {default as clsx} from 'clsx'
@@ -56,12 +56,14 @@ export const Pagination = memo(
hrefBuilder = defaultHrefBuilder,
pageAttributesBuilder,
marginPageCount = 1,
- showPages = true,
+ showPages,
surroundingPageCount = 2,
'aria-label': ariaLabel,
'data-testid': testId,
...rest
}: PaginationProps) => {
+ const {isMedium} = useWindowSize()
+
const navRef = React.useRef
(null)
const pageElements = usePaginationPages({
pageCount,
@@ -70,7 +72,7 @@ export const Pagination = memo(
hrefBuilder,
pageAttributesBuilder,
marginPageCount,
- showPages,
+ showPages: showPages !== undefined ? showPages : isMedium ? true : false,
surroundingPageCount,
})
diff --git a/packages/react/src/Pagination/Pagination.visual.spec.ts b/packages/react/src/Pagination/Pagination.visual.spec.ts
index 8649e5301..2a927eac2 100644
--- a/packages/react/src/Pagination/Pagination.visual.spec.ts
+++ b/packages/react/src/Pagination/Pagination.visual.spec.ts
@@ -39,6 +39,18 @@ test.describe('Visual Comparison: Pagination', () => {
expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
})
+ // eslint-disable-next-line i18n-text/no-en
+ test.describe('Mobile viewport test for Narrow Page Numbers Hidden By Default', () => {
+ test.use({viewport: {width: 360, height: 800}})
+ test('Pagination / Narrow Page Numbers Hidden By Default', async ({page}) => {
+ await page.goto(
+ 'http://localhost:6006/iframe.html?args=&id=components-pagination-features--narrow-page-numbers-hidden-by-default&viewMode=story',
+ )
+
+ await page.waitForTimeout(500)
+ expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
+ })
+ })
test('Pagination / Hide Page Numbers By Viewport', async ({page}) => {
await page.goto(
'http://localhost:6006/iframe.html?args=&id=components-pagination-features--hide-page-numbers-by-viewport&viewMode=story',
diff --git a/packages/react/src/Pagination/Pagination.visual.spec.ts-snapshots/Visual-Comparison-Pagination-Mobile-viewport--b3b55-ation-Narrow-Page-Numbers-Hidden-By-Default-1-linux.png b/packages/react/src/Pagination/Pagination.visual.spec.ts-snapshots/Visual-Comparison-Pagination-Mobile-viewport--b3b55-ation-Narrow-Page-Numbers-Hidden-By-Default-1-linux.png
new file mode 100644
index 000000000..2613149fc
Binary files /dev/null and b/packages/react/src/Pagination/Pagination.visual.spec.ts-snapshots/Visual-Comparison-Pagination-Mobile-viewport--b3b55-ation-Narrow-Page-Numbers-Hidden-By-Default-1-linux.png differ
diff --git a/packages/react/src/Pillar/Pillar.features.stories.tsx b/packages/react/src/Pillar/Pillar.features.stories.tsx
index 7012a7a30..f3b08376f 100644
--- a/packages/react/src/Pillar/Pillar.features.stories.tsx
+++ b/packages/react/src/Pillar/Pillar.features.stories.tsx
@@ -45,7 +45,13 @@ export const WithIconSVG = () => (
+