FilterList no longer accepts styled system props

.changeset/twenty-coins-marry.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+FilterList 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/FilterList.md

@@ -18,27 +18,20 @@ The FilterList component is a menu with filter options that filter the main cont
 </FilterList>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-FilterList components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
 #### FilterList
 
-`FilterList` does not get any additional props other than the system props mentioned above.
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |
 
 #### FilterList.Item
 
-| Name     | Type    | Default | Description                                                      |
-| :------- | :------ | :-----: | :--------------------------------------------------------------- |
-| count    | Number  |         | Number to be displayed in the list item                          |
-| as       | String  |   `a`   | sets the HTML tag for the component                              |
-| selected | Boolean |         | Used to set selected style                                       |
-| small    | Boolean |  false  | Used to create a smaller version of the standard FilterList.Item |
+| Name     | Type              | Default | Description                                                      |
+| :------- | :---------------- | :-----: | :--------------------------------------------------------------- |
+| count    | Number            |         | Number to be displayed in the list item                          |
+| as       | String            |   `a`   | sets the HTML tag for the component                              |
+| selected | Boolean           |         | Used to set selected style                                       |
+| small    | Boolean           |  false  | Used to create a smaller version of the standard FilterList.Item |
+| sx       | SystemStyleObject |   {}    | Style to be applied to the component                             |

src/FilterList.tsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
-const FilterListBase = styled.ul<SystemCommonProps & SxProp>`
+const FilterListBase = styled.ul<SxProp>`
   list-style-type: none;
-  ${COMMON};
+  margin: 0;
+  padding: 0;
   ${sx};
 `
 
@@ -23,8 +24,7 @@ const FilterList = ({children, ...rest}: React.PropsWithChildren<FilterListProps
 type StyledFilterListItemBaseProps = {
   small?: boolean
   selected?: boolean
-} & SystemCommonProps &
-  SxProp
+} & SxProp
 
 const FilterListItemBase = styled.a<StyledFilterListItemBaseProps>`
   position: relative;
@@ -52,7 +52,6 @@ const FilterListItemBase = styled.a<StyledFilterListItemBaseProps>`
     float: right;
     font-weight: ${get('fontWeights.bold')};
   }
-  ${COMMON};
   ${sx};
 `
 
@@ -71,11 +70,6 @@ function FilterListItem({children, count, ...rest}: React.PropsWithChildren<Filt
   )
 }
 
-FilterList.defaultProps = {
-  m: 0,
-  p: 0
-}
-
 FilterListItem.displayName = 'FilterList.Item'
 
 export default Object.assign(FilterList, {Item: FilterListItem})

src/__tests__/FilterList.types.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import FilterList from '../FilterList'
+
+export function shouldAcceptCallWithNoProps() {
+  return <FilterList />
+}
+
+export function shouldNotAcceptSystemProps() {
+  return (
+    <>
+      {/* @ts-expect-error system props should not be accepted */}
+      <FilterList backgroundColor="thistle" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <FilterList.Item backgroundColor="thistle" />
+    </>
+  )
+}