From 4eef1cdaae43670fb78b2783221b94a4ab72ce72 Mon Sep 17 00:00:00 2001
From: Jonathan Fuchs <jfuchs@github.com>
Date: Tue, 16 Nov 2021 12:05:35 -0800
Subject: [PATCH] FilteredSearch no longer accepts styled system props (#1559)

---
 .changeset/swift-days-hammer.md             |  5 +++++
 docs/content/FilteredSearch.md              | 15 ++++-----------
 src/FilteredSearch.tsx                      |  5 ++---
 src/__tests__/FilteredSearch.types.test.tsx | 11 +++++++++++
 4 files changed, 22 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/swift-days-hammer.md
 create mode 100644 src/__tests__/FilteredSearch.types.test.tsx

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
 </FilteredSearch>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-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<SystemCommonProps & SxProp>`
-  ${COMMON};
+const FilteredSearch = styled.div<SxProp>`
   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 <FilteredSearch />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <FilteredSearch backgroundColor="rosybrown" />
+}