diff --git a/.changeset/twenty-coins-marry.md b/.changeset/twenty-coins-marry.md
new file mode 100644
index 00000000000..265167410f0
--- /dev/null
+++ b/.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.
diff --git a/docs/content/FilterList.md b/docs/content/FilterList.md
index cdd77dfc68d..696f0eb3c60 100644
--- a/docs/content/FilterList.md
+++ b/docs/content/FilterList.md
@@ -18,27 +18,20 @@ The FilterList component is a menu with filter options that filter the main cont
```
-## System props
-
-
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-
-
-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 |
diff --git a/src/FilterList.tsx b/src/FilterList.tsx
index 463f0fabddc..99979f92e1d 100644
--- a/src/FilterList.tsx
+++ b/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`
+const FilterListBase = styled.ul`
list-style-type: none;
- ${COMMON};
+ margin: 0;
+ padding: 0;
${sx};
`
@@ -23,8 +24,7 @@ const FilterList = ({children, ...rest}: React.PropsWithChildren`
position: relative;
@@ -52,7 +52,6 @@ const FilterListItemBase = styled.a`
float: right;
font-weight: ${get('fontWeights.bold')};
}
- ${COMMON};
${sx};
`
@@ -71,11 +70,6 @@ function FilterListItem({children, count, ...rest}: React.PropsWithChildren
+}
+
+export function shouldNotAcceptSystemProps() {
+ return (
+ <>
+ {/* @ts-expect-error system props should not be accepted */}
+
+ {/* @ts-expect-error system props should not be accepted */}
+
+ >
+ )
+}