From c7774345857f45fd3531e88e49ddeea8f73a8a58 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Tue, 2 Feb 2021 12:25:35 -0800
Subject: [PATCH 1/2] =?UTF-8?q?FilteredSearch.js=20=E2=86=92=20FilteredSea?=
 =?UTF-8?q?rch.tsx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/{FilteredSearch.js => FilteredSearch.tsx} | 14 +++++---
 src/__tests__/FilteredSearch.tsx              | 27 ++++++++++++++++
 .../__snapshots__/FilteredSearch.tsx.snap     | 32 +++++++++++++++++++
 3 files changed, 69 insertions(+), 4 deletions(-)
 rename src/{FilteredSearch.js => FilteredSearch.tsx} (67%)
 create mode 100644 src/__tests__/FilteredSearch.tsx
 create mode 100644 src/__tests__/__snapshots__/FilteredSearch.tsx.snap

diff --git a/src/FilteredSearch.js b/src/FilteredSearch.tsx
similarity index 67%
rename from src/FilteredSearch.js
rename to src/FilteredSearch.tsx
index 47c59555e37..a8b568767a2 100644
--- a/src/FilteredSearch.js
+++ b/src/FilteredSearch.tsx
@@ -1,9 +1,11 @@
-import styled from 'styled-components'
 import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import {COMMON, get, SystemCommonProps} from './constants'
 import theme from './theme'
-import {COMMON, get} from './constants'
+import {ComponentProps} from './utils/types'
+import sx, {SxProp} from './sx'
 
-const FilteredSearch = styled.div`
+const FilteredSearch = styled.div<SystemCommonProps & SxProp>`
   ${COMMON};
   display: flex;
   align-items: stretch;
@@ -20,6 +22,8 @@ const FilteredSearch = styled.div`
     border-bottom-right-radius: ${get('radii.2')};
     z-index: 1; // Allows the focus outline to show on top of the dropdown.
   }
+
+  ${sx}
 `
 
 FilteredSearch.defaultProps = {
@@ -28,7 +32,9 @@ FilteredSearch.defaultProps = {
 
 FilteredSearch.propTypes = {
   ...COMMON.propTypes,
-  theme: PropTypes.object
+  theme: PropTypes.object,
+  ...sx.propTypes
 }
 
+export type FilteredSearchProps = ComponentProps<typeof FilteredSearch>
 export default FilteredSearch
diff --git a/src/__tests__/FilteredSearch.tsx b/src/__tests__/FilteredSearch.tsx
new file mode 100644
index 00000000000..3cf691e9c20
--- /dev/null
+++ b/src/__tests__/FilteredSearch.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import {FilteredSearch} from '..'
+import {render, behavesAsComponent, checkExports} from '../utils/testing'
+import {COMMON} from '../constants'
+import {render as HTMLRender, cleanup} from '@testing-library/react'
+import {axe, toHaveNoViolations} from 'jest-axe'
+import 'babel-polyfill'
+expect.extend(toHaveNoViolations)
+
+describe('FilteredSearch', () => {
+  behavesAsComponent(FilteredSearch, [COMMON])
+
+  checkExports('FilteredSearch', {
+    default: FilteredSearch
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<FilteredSearch>Hello</FilteredSearch>)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('renders a <div>', () => {
+    expect(render(<FilteredSearch />).type).toEqual('div')
+  })
+})
diff --git a/src/__tests__/__snapshots__/FilteredSearch.tsx.snap b/src/__tests__/__snapshots__/FilteredSearch.tsx.snap
new file mode 100644
index 00000000000..c1e3a865678
--- /dev/null
+++ b/src/__tests__/__snapshots__/FilteredSearch.tsx.snap
@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FilteredSearch renders consistently 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.c0 summary {
+  border-radius: 0;
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+  border-right: 0;
+}
+
+.c0 .TextInput-wrapper {
+  border-radius: 0;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+  z-index: 1;
+}
+
+<div
+  className="c0"
+/>
+`;

From b947aff26f26d46ebe8f7bb4b930863ba1b05eaa Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Tue, 2 Feb 2021 12:26:20 -0800
Subject: [PATCH 2/2] Add changeset

---
 .changeset/wet-mayflies-talk.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/wet-mayflies-talk.md

diff --git a/.changeset/wet-mayflies-talk.md b/.changeset/wet-mayflies-talk.md
new file mode 100644
index 00000000000..d5e98c0e862
--- /dev/null
+++ b/.changeset/wet-mayflies-talk.md
@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Migrate `FilteredSearch` to TypeScript