Pagination no longer accepts styled system props

Author: jfuchs

.changeset/spicy-olives-lick.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+Pagination no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.

docs/content/Pagination.md

@@ -127,27 +127,18 @@ To hide all the page numbers and create a simple pagination container with just
 </State>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-Pagination components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
-| Name                 | Type     |  Default   | Description                                                            |
-| :------------------- | :------- | :--------: | :--------------------------------------------------------------------- |
-| currentPage          | Number   |            | **Required.** The currently selected page.                             |
-| hrefBuilder          | Function | `#${page}` | A function to generate links based on page number.                     |
-| marginPageCount      | Number   |     1      | How many pages to always show at the left and right of the component.  |
-| onPageChange         | Function |   no-op    | Called with event and page number when a page is clicked.              |
-| pageCount            | Number   |            | **Required.** The total number of pages.                               |
-| showPages            | Boolean  |   `true`   | Whether or not to show the individual page links.                      |
-| surroundingPageCount | Number   |     2      | How many pages to display on each side of the currently selected page. |
+| Name                 | Type              |  Default   | Description                                                            |
+| :------------------- | :---------------- | :--------: | :--------------------------------------------------------------------- |
+| currentPage          | Number            |            | **Required.** The currently selected page.                             |
+| hrefBuilder          | Function          | `#${page}` | A function to generate links based on page number.                     |
+| marginPageCount      | Number            |     1      | How many pages to always show at the left and right of the component.  |
+| onPageChange         | Function          |   no-op    | Called with event and page number when a page is clicked.              |
+| pageCount            | Number            |            | **Required.** The total number of pages.                               |
+| showPages            | Boolean           |   `true`   | Whether or not to show the individual page links.                      |
+| surroundingPageCount | Number            |     2      | How many pages to display on each side of the currently selected page. |
+| sx                   | SystemStyleObject |     {}     | Style to be applied to the component                                   |
 
 ## Theming
 

src/Pagination/Pagination.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import styled from 'styled-components'
 import Box from '../Box'
-import {COMMON, get} from '../constants'
-import sx from '../sx'
+import {get} from '../constants'
+import sx, {SxProp} from '../sx'
 import {buildComponentData, buildPaginationModel} from './model'
 
 const Page = styled.a`
@@ -103,8 +103,6 @@ const Page = styled.a`
       );
     }
   }
-
-  ${COMMON};
 `
 
 type UsePaginationPagesParameters = {
@@ -148,7 +146,7 @@ function usePaginationPages({
   return children
 }
 
-const PaginationContainer = styled.nav`
+const PaginationContainer = styled.nav<SxProp>`
   margin-top: 20px;
   margin-bottom: 15px;
   text-align: center;

src/__tests__/Pagination.types.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import Pagination from '../Pagination'
+
+export function shouldAcceptCallWithNoProps() {
+  return <Pagination currentPage={1} pageCount={2} />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <Pagination currentPage={1} pageCount={2} backgroundColor="palegoldenrod" />
+}