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 */} + + + ) +}