Skip to content

Commit 4eef1cd

Browse files
committed
FilteredSearch no longer accepts styled system props (#1559)
1 parent 7d92633 commit 4eef1cd

File tree

4 files changed

+22
-14
lines changed

4 files changed

+22
-14
lines changed

.changeset/swift-days-hammer.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/components': major
3+
---
4+
5+
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.

docs/content/FilteredSearch.md

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,11 @@ The FilteredSearch component helps style a Dropdown and a TextInput side-by-side
2222
</FilteredSearch>
2323
```
2424

25-
## System props
26-
27-
<Note variant="warning">
28-
29-
System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
30-
31-
</Note>
32-
33-
FilteredSearch gets `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
34-
3525
## Component props
3626

3727
#### FilteredSearch.Children
3828

39-
FilteredSearch is expected to contain a [`Dropdown`](/Dropdown) followed by a [`TextInput`](/TextInput).
29+
| Name | Type | Default | Description |
30+
| :------- | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------- |
31+
| children | | | FilteredSearch is expected to contain a [`Dropdown`](/Dropdown) followed by a [`TextInput`](/TextInput). |
32+
| sx | SystemStyleObject | {} | Style to be applied to the component |

src/FilteredSearch.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import styled from 'styled-components'
2-
import {COMMON, get, SystemCommonProps} from './constants'
2+
import {get} from './constants'
33
import sx, {SxProp} from './sx'
44
import {ComponentProps} from './utils/types'
55

6-
const FilteredSearch = styled.div<SystemCommonProps & SxProp>`
7-
${COMMON};
6+
const FilteredSearch = styled.div<SxProp>`
87
display: flex;
98
align-items: stretch;
109
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react'
2+
import FilteredSearch from '../FilteredSearch'
3+
4+
export function shouldAcceptCallWithNoProps() {
5+
return <FilteredSearch />
6+
}
7+
8+
export function shouldNotAcceptSystemProps() {
9+
// @ts-expect-error system props should not be accepted
10+
return <FilteredSearch backgroundColor="rosybrown" />
11+
}

0 commit comments

Comments
 (0)