diff --git a/.changeset/swift-days-hammer.md b/.changeset/swift-days-hammer.md new file mode 100644 index 00000000000..0bbc54a0f48 --- /dev/null +++ b/.changeset/swift-days-hammer.md @@ -0,0 +1,5 @@ +--- +'@primer/components': major +--- + +FilteredSearch 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/FilteredSearch.md b/docs/content/FilteredSearch.md index b7d88646abf..2f77a25f9bc 100644 --- a/docs/content/FilteredSearch.md +++ b/docs/content/FilteredSearch.md @@ -22,18 +22,11 @@ The FilteredSearch component helps style a Dropdown and a TextInput side-by-side ``` -## System props - - - -System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. - - - -FilteredSearch gets `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. - ## Component props #### FilteredSearch.Children -FilteredSearch is expected to contain a [`Dropdown`](/Dropdown) followed by a [`TextInput`](/TextInput). +| Name | Type | Default | Description | +| :------- | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------- | +| children | | | FilteredSearch is expected to contain a [`Dropdown`](/Dropdown) followed by a [`TextInput`](/TextInput). | +| sx | SystemStyleObject | {} | Style to be applied to the component | diff --git a/src/FilteredSearch.tsx b/src/FilteredSearch.tsx index b750a9527dd..2e7bf8de368 100644 --- a/src/FilteredSearch.tsx +++ b/src/FilteredSearch.tsx @@ -1,10 +1,9 @@ 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 FilteredSearch = styled.div` - ${COMMON}; +const FilteredSearch = styled.div` display: flex; align-items: stretch; diff --git a/src/__tests__/FilteredSearch.types.test.tsx b/src/__tests__/FilteredSearch.types.test.tsx new file mode 100644 index 00000000000..43057cab3af --- /dev/null +++ b/src/__tests__/FilteredSearch.types.test.tsx @@ -0,0 +1,11 @@ +import React from 'react' +import FilteredSearch from '../FilteredSearch' + +export function shouldAcceptCallWithNoProps() { + return +} + +export function shouldNotAcceptSystemProps() { + // @ts-expect-error system props should not be accepted + return +}