diff --git a/.changeset/stale-frogs-compare.md b/.changeset/stale-frogs-compare.md new file mode 100644 index 00000000000..44cb3b2ef9d --- /dev/null +++ b/.changeset/stale-frogs-compare.md @@ -0,0 +1,5 @@ +--- +"@primer/react": major +--- + +Remove sxProp from Pagination diff --git a/packages/react/src/Pagination/Pagination.module.css b/packages/react/src/Pagination/Pagination.module.css index 1f16c3281df..919889dd445 100644 --- a/packages/react/src/Pagination/Pagination.module.css +++ b/packages/react/src/Pagination/Pagination.module.css @@ -128,6 +128,10 @@ text-align: center; } +.TablePaginationSteps { + display: inline-block; +} + @media screen and (--viewportRange-narrow) { .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:not(:first-child):not(:last-child) { display: none; diff --git a/packages/react/src/Pagination/Pagination.tsx b/packages/react/src/Pagination/Pagination.tsx index f28d9f05310..83f84913444 100644 --- a/packages/react/src/Pagination/Pagination.tsx +++ b/packages/react/src/Pagination/Pagination.tsx @@ -1,9 +1,6 @@ import React from 'react' import styled from 'styled-components' -import Box from '../Box' import {get} from '../constants' -import type {SxProp} from '../sx' -import sx from '../sx' import {buildComponentData, buildPaginationModel} from './model' import type {ResponsiveValue} from '../hooks/useResponsiveValue' import {viewportRanges} from '../hooks/useResponsiveValue' @@ -201,7 +198,7 @@ function usePaginationPages({ const PaginationContainer = toggleStyledComponent( CSS_MODULES_FEATURE_FLAG, 'nav', - styled.nav` + styled.nav` margin-top: 20px; margin-bottom: 15px; text-align: center; @@ -228,8 +225,6 @@ const PaginationContainer = toggleStyledComponent( }) .join('') } - - ${sx}; `, ) @@ -275,14 +270,12 @@ function Pagination({ {...rest} theme={theme} > - {pageElements} - + ) } diff --git a/packages/react/src/__tests__/Pagination/Pagination.test.tsx b/packages/react/src/__tests__/Pagination/Pagination.test.tsx index 8511cf6e29e..76414da4cbb 100644 --- a/packages/react/src/__tests__/Pagination/Pagination.test.tsx +++ b/packages/react/src/__tests__/Pagination/Pagination.test.tsx @@ -8,7 +8,7 @@ const reqProps = {pageCount: 10, currentPage: 1} const comp = describe('Pagination', () => { - behavesAsComponent({Component: Pagination, toRender: () => comp}) + behavesAsComponent({Component: Pagination, toRender: () => comp, options: {skipSx: true}}) it('should have no axe violations', async () => { const {container} = HTMLRender(comp)