Skip to content

Commit 24a796c

Browse files
jfuchsjfuchs
committed
SelectMenu no longer accepts styled system props (#1571)
1 parent 6870530 commit 24a796c

15 files changed

+117
-152
lines changed

‎.changeset/large-chefs-fix.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+
SelectMenu 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/SelectMenu.md‎

Lines changed: 50 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,11 @@ Main wrapper component for select menu.
3333

3434
### Component Props
3535

36-
| Name | Type | Default | Description |
37-
| :--------- | :-------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------- |
38-
| initialTab | String | | If using the `SelectMenu.Tabs` component, you can use this prop to change the tab shown on open. By default, the first tab will be used. |
39-
| ref | React ref | | ref to pass down to SelectMenu component |
36+
| Name | Type | Default | Description |
37+
| :--------- | :---------------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------- |
38+
| initialTab | String | | If using the `SelectMenu.Tabs` component, you can use this prop to change the tab shown on open. By default, the first tab will be used. |
39+
| ref | React ref | | ref to pass down to SelectMenu component |
40+
| sx | SystemStyleObject | {} | Style to be applied to the component |
4041

4142
## SelectMenu.MenuContext
4243

@@ -82,9 +83,7 @@ const MyButton = () => {
8283
Used to wrap the content in a `SelectMenu`.
8384

8485
```jsx
85-
<SelectMenu.Modal>
86-
{/* all menu content is wrapped in the modal*/}
87-
</SelectMenu.Modal>
86+
<SelectMenu.Modal>{/* all menu content is wrapped in the modal*/}</SelectMenu.Modal>
8887
```
8988

9089
### Right-aligned modal
@@ -110,10 +109,11 @@ Use the `align='right'` prop to align the modal to the right. Note that this onl
110109

111110
### Component Props
112111

113-
| Prop name | Type | Default | Description |
114-
| :-------- | :--------------- | :------ | ------------------------------------------------- |
115-
| align | String | 'left' | Use `right` to align the select menu to the right |
116-
| width | String or Number | 300px | Sets the modal width |
112+
| Prop name | Type | Default | Description |
113+
| :-------- | :---------------- | :------ | ------------------------------------------------- |
114+
| align | String | 'left' | Use `right` to align the select menu to the right |
115+
| width | String or Number | 300px | Sets the modal width |
116+
| sx | SystemStyleObject | {} | Style to be applied to the component |
117117

118118
## SelectMenu.List
119119

@@ -125,7 +125,9 @@ Used to wrap the select menu list content. All menu items **must** be wrapped in
125125

126126
### Component Props
127127

128-
SelectMenu.List components do not get any additional props besides system props.
128+
| Name | Type | Default | Description |
129+
| :--- | :---------------- | :-----: | :----------------------------------- |
130+
| sx | SystemStyleObject | {} | Style to be applied to the component |
129131

130132
## SelectMenu.Item
131133

@@ -139,22 +141,13 @@ You can use a `button` tag instead by utilizing the [`as` prop](/core-concepts#t
139141
</SelectMenu.Item>
140142
```
141143

142-
### System props
143-
144-
<Note variant="warning">
145-
146-
System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
147-
148-
</Note>
149-
150-
SelectMenu components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
151-
152144
### Component Props
153145

154-
| Name | Type | Default | Description |
155-
| :------- | :------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
156-
| selected | boolean | | Used to apply styles to the selected items in the list. |
157-
| onClick | function | | Function called when item is clicked. By default we also close the menu when items are clicked. If you would like the menu to stay open, pass an `e.preventDefault()` to your onClick handler. |
146+
| Name | Type | Default | Description |
147+
| :------- | :---------------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
148+
| selected | boolean | | Used to apply styles to the selected items in the list. |
149+
| onClick | function | | Function called when item is clicked. By default we also close the menu when items are clicked. If you would like the menu to stay open, pass an `e.preventDefault()` to your onClick handler. |
150+
| sx | SystemStyleObject | {} | Style to be applied to the component |
158151

159152
## SelectMenu.Filter
160153

@@ -177,23 +170,14 @@ Use a `SelectMenu.Filter` to add a filter UI to your select menu. Users are expe
177170
</SelectMenu>
178171
```
179172

180-
### System Props
181-
182-
<Note variant="warning">
183-
184-
System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
185-
186-
</Note>
187-
188-
SelectMenu.Filter components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
189-
190173
### Component Props
191174

192175
SelectMenu.Filter components receive all the props that the [TextInput](/TextInput) component gets.
193176

194-
| Name | Type | Default | Description |
195-
| :---- | :----- | :-----: | :------------------------------------------------------------------------------------------------------------- |
196-
| value | String | | Users of this component must provide a value for the filter input that is managed in the consuming application |
177+
| Name | Type | Default | Description |
178+
| :---- | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------------- |
179+
| value | String | | Users of this component must provide a value for the filter input that is managed in the consuming application |
180+
| sx | SystemStyleObject | {} | Style to be applied to the component |
197181

198182
## SelectMenu.Tabs
199183

@@ -232,7 +216,9 @@ If you need access to the selected tab state, you can find it in the MenuContext
232216

233217
### Component Props
234218

235-
SelectMenu.Tabs components do not get any additional props besides system props.
219+
| Name | Type | Default | Description |
220+
| :--- | :---------------- | :-----: | :----------------------------------- |
221+
| sx | SystemStyleObject | {} | Style to be applied to the component |
236222

237223
## SelectMenu.Tab
238224

@@ -242,28 +228,19 @@ The `onClick` prop is optional and can be used for any events or data fetching y
242228

243229
```jsx
244230
<>
245-
<SelectMenu.Tab index={0} tabName="Repository"/>
246-
<SelectMenu.Tab index={1} tabName="Organization"/>
231+
<SelectMenu.Tab index={0} tabName="Repository" />
232+
<SelectMenu.Tab index={1} tabName="Organization" />
247233
</>
248234
```
249235

250-
### System Props
251-
252-
<Note variant="warning">
253-
254-
System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
255-
256-
</Note>
257-
258-
SelectMenu.Tab components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
259-
260236
### Component Props
261237

262-
| Name | Type | Default | Description |
263-
| :------ | :------- | :-----: | :------------------------------------------------------------------------------------------------------------------------- |
264-
| tabName | String | | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component. |
265-
| index | Number | | The index at which the tab is in the list of tabs |
266-
| onClick | Function | | Function to be called when the tab is clicked. Optional. |
238+
| Name | Type | Default | Description |
239+
| :------ | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------------------------- |
240+
| tabName | String | | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component. |
241+
| index | Number | | The index at which the tab is in the list of tabs |
242+
| onClick | Function | | Function to be called when the tab is clicked. Optional. |
243+
| sx | SystemStyleObject | {} | Style to be applied to the component |
267244

268245
## SelectMenu.TabPanel
269246

@@ -275,21 +252,12 @@ Wraps the content for each tab. Make sure to use the `tabName` prop to identify
275252
<SelectMenu.TabPanel tabName="Repository">{/* Wraps content for each tab */}</SelectMenu.TabPanel>
276253
```
277254

278-
### System Props
279-
280-
<Note variant="warning">
281-
282-
System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
283-
284-
</Note>
285-
286-
SelectMenu.TabPanel components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
287-
288255
### Component Props
289256

290-
| Name | Type | Default | Description |
291-
| :------ | :----- | :-----: | :------------------------------------------------------------------------------------------------------------------------- |
292-
| tabName | String | | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component. |
257+
| Name | Type | Default | Description |
258+
| :------ | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------------------------- |
259+
| tabName | String | | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component. |
260+
| sx | SystemStyleObject | {} | Style to be applied to the component |
293261

294262
## SelectMenu.Divider
295263

@@ -311,19 +279,11 @@ Use a `SelectMenu.Divider` to add information between items in a `SelectMenu.Lis
311279
</SelectMenu>
312280
```
313281

314-
### System Props
315-
316-
<Note variant="warning">
317-
318-
System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
319-
320-
</Note>
321-
322-
SelectMenu.Divder components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
323-
324282
### Component Props
325283

326-
SelectMenu.Divider components do not get any additional props besides system props.
284+
| Name | Type | Default | Description |
285+
| :--- | :---------------- | :-----: | :----------------------------------- |
286+
| sx | SystemStyleObject | {} | Style to be applied to the component |
327287

328288
## SelectMenu.Footer
329289

@@ -345,19 +305,11 @@ Use a `SelectMenu.Footer` to add content to the bottom of the select menu.
345305
</SelectMenu>
346306
```
347307

348-
### System Props
349-
350-
<Note variant="warning">
351-
352-
System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
353-
354-
</Note>
355-
356-
SelectMenu.Footer components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
357-
358308
### Component Props
359309

360-
SelectMenu.Footer components do not get any additional props besides system props.
310+
| Name | Type | Default | Description |
311+
| :--- | :---------------- | :-----: | :----------------------------------- |
312+
| sx | SystemStyleObject | {} | Style to be applied to the component |
361313

362314
## SelectMenu.Header
363315

@@ -379,19 +331,11 @@ Use a `SelectMenu.Header` to add a header to the top of the select menu content.
379331
</SelectMenu>
380332
```
381333

382-
### System Props
383-
384-
<Note variant="warning">
385-
386-
System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
387-
388-
</Note>
389-
390-
SelectMenu.Header components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
391-
392334
### Component Props
393335

394-
SelectMenu.Header components do not get any additional props besides system props.
336+
| Name | Type | Default | Description |
337+
| :--- | :---------------- | :-----: | :----------------------------------- |
338+
| sx | SystemStyleObject | {} | Style to be applied to the component |
395339

396340
## SelectMenu.LoadingAnimation
397341

@@ -420,16 +364,8 @@ Use a `SelectMenu.LoadingAnimation` to add a loading animation inside of the Sel
420364
</SelectMenu>
421365
```
422366

423-
### System Props
424-
425-
<Note variant="warning">
426-
427-
System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
428-
429-
</Note>
430-
431-
SelectMenu.LoadingAnimation components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
432-
433367
### Component Props
434368

435-
SelectMenu.LoadingAnimation components do not get any additional props besides system props.
369+
| Name | Type | Default | Description |
370+
| :--- | :---------------- | :-----: | :----------------------------------- |
371+
| sx | SystemStyleObject | {} | Style to be applied to the component |

‎src/SelectMenu/SelectMenu.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, {useCallback, useEffect, useRef, useState} from 'react'
22
import styled from 'styled-components'
3-
import {COMMON, SystemCommonProps} from '../constants'
43
import sx, {SxProp} from '../sx'
54
import {ComponentProps} from '../utils/types'
65
import useKeyboardNav from './hooks/useKeyboardNav'
@@ -32,9 +31,8 @@ const wrapperStyles = `
3231
}
3332
`
3433

35-
const StyledSelectMenu = styled.details<SystemCommonProps & SxProp>`
34+
const StyledSelectMenu = styled.details<SxProp>`
3635
${wrapperStyles}
37-
${COMMON}
3836
${sx};
3937
`
4038

‎src/SelectMenu/SelectMenuDivider.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styled, {css} 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

@@ -13,9 +13,8 @@ const dividerStyles = css`
1313
border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
1414
`
1515

16-
const SelectMenuDivider = styled.div<SystemCommonProps & SxProp>`
16+
const SelectMenuDivider = styled.div<SxProp>`
1717
${dividerStyles}
18-
${COMMON}
1918
${sx};
2019
`
2120

‎src/SelectMenu/SelectMenuFilter.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
import React, {forwardRef, useContext, useEffect, useRef} from 'react'
22
import styled from 'styled-components'
3-
import {COMMON, get, SystemCommonProps} from '../constants'
3+
import {get} from '../constants'
44
import sx, {SxProp} from '../sx'
55
import TextInput, {TextInputProps} from '../TextInput'
66
import {ComponentProps} from '../utils/types'
77
import {MenuContext} from './SelectMenuContext'
88

9-
const StyledForm = styled.form<SystemCommonProps & SxProp>`
9+
const StyledForm = styled.form<SxProp>`
1010
padding: ${get('space.3')};
1111
margin: 0;
1212
border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
1313
background-color: ${get('colors.canvas.overlay')};
14-
${COMMON};
1514
1615
@media (min-width: ${get('breakpoints.0')}) {
1716
padding: ${get('space.2')};

‎src/SelectMenu/SelectMenuFooter.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styled, {css} 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

@@ -16,9 +16,8 @@ const footerStyles = css`
1616
}
1717
`
1818

19-
const SelectMenuFooter = styled.footer<SystemCommonProps & SxProp>`
19+
const SelectMenuFooter = styled.footer<SxProp>`
2020
${footerStyles}
21-
${COMMON}
2221
${sx};
2322
`
2423

‎src/SelectMenu/SelectMenuHeader.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22
import styled from 'styled-components'
3-
import {COMMON, get, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from '../constants'
3+
import {get} from '../constants'
44
import sx, {SxProp} from '../sx'
55
import {ComponentProps} from '../utils/types'
66

@@ -19,13 +19,11 @@ const SelectMenuTitle = styled.h3`
1919
}
2020
`
2121

22-
const StyledHeader = styled.header<SystemTypographyProps & SystemCommonProps & SxProp>`
22+
const StyledHeader = styled.header<SxProp>`
2323
display: flex;
2424
flex: none; // fixes header from getting squeezed in Safari iOS
2525
padding: ${get('space.3')};
2626
border-bottom: ${get('borderWidths')} solid ${get('colors.border.muted')};
27-
${COMMON}
28-
${TYPOGRAPHY}
2927
3028
@media (min-width: ${get('breakpoints.0')}) {
3129
padding-top: ${get('space.2')};

‎src/SelectMenu/SelectMenuItem.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {CheckIcon} from '@primer/octicons-react'
22
import React, {forwardRef, useContext, useRef} from 'react'
33
import styled, {css} from 'styled-components'
4-
import {COMMON, get, SystemCommonProps} from '../constants'
4+
import {get} from '../constants'
55
import StyledOcticon from '../StyledOcticon'
66
import sx, {SxProp} from '../sx'
77
import {ComponentProps} from '../utils/types'
@@ -92,9 +92,8 @@ export const listItemStyles = css`
9292

9393
const StyledItem = styled.a.attrs(() => ({
9494
role: 'menuitemcheckbox'
95-
}))<SystemCommonProps & SxProp>`
95+
}))<SxProp>`
9696
${listItemStyles}
97-
${COMMON}
9897
${sx};
9998
`
10099

0 commit comments

Comments
 (0)