Skip to content

SelectMenu no longer accepts styled system props #1571

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 16, 2021
Merged

SelectMenu no longer accepts styled system props #1571

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/large-chefs-fix.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/components': major
---

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.
164 changes: 50 additions & 114 deletions docs/content/SelectMenu.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,11 @@ Main wrapper component for select menu.

### Component Props

| Name | Type | Default | Description |
| :--------- | :-------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------- |
| 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. |
| ref | React ref | | ref to pass down to SelectMenu component |
| Name | Type | Default | Description |
| :--------- | :---------------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------- |
| 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. |
| ref | React ref | | ref to pass down to SelectMenu component |
| sx | SystemStyleObject | {} | Style to be applied to the component |

## SelectMenu.MenuContext

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

```jsx
<SelectMenu.Modal>
{/* all menu content is wrapped in the modal*/}
</SelectMenu.Modal>
<SelectMenu.Modal>{/* all menu content is wrapped in the modal*/}</SelectMenu.Modal>
```

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

### Component Props

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

## SelectMenu.List

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

### Component Props

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

## SelectMenu.Item

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

### System props

<Note variant="warning">

System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.

</Note>

SelectMenu components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.

### Component Props

| Name | Type | Default | Description |
| :------- | :------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| selected | boolean | | Used to apply styles to the selected items in the list. |
| 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. |
| Name | Type | Default | Description |
| :------- | :---------------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| selected | boolean | | Used to apply styles to the selected items in the list. |
| 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. |
| sx | SystemStyleObject | {} | Style to be applied to the component |

## SelectMenu.Filter

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

### System Props

<Note variant="warning">

System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.

</Note>

SelectMenu.Filter components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.

### Component Props

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

| Name | Type | Default | Description |
| :---- | :----- | :-----: | :------------------------------------------------------------------------------------------------------------- |
| value | String | | Users of this component must provide a value for the filter input that is managed in the consuming application |
| Name | Type | Default | Description |
| :---- | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------------- |
| value | String | | Users of this component must provide a value for the filter input that is managed in the consuming application |
| sx | SystemStyleObject | {} | Style to be applied to the component |

## SelectMenu.Tabs

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

### Component Props

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

## SelectMenu.Tab

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

```jsx
<>
<SelectMenu.Tab index={0} tabName="Repository"/>
<SelectMenu.Tab index={1} tabName="Organization"/>
<SelectMenu.Tab index={0} tabName="Repository" />
<SelectMenu.Tab index={1} tabName="Organization" />
</>
```

### System Props

<Note variant="warning">

System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.

</Note>

SelectMenu.Tab components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.

### Component Props

| Name | Type | Default | Description |
| :------ | :------- | :-----: | :------------------------------------------------------------------------------------------------------------------------- |
| tabName | String | | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component. |
| index | Number | | The index at which the tab is in the list of tabs |
| onClick | Function | | Function to be called when the tab is clicked. Optional. |
| Name | Type | Default | Description |
| :------ | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------------------------- |
| tabName | String | | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component. |
| index | Number | | The index at which the tab is in the list of tabs |
| onClick | Function | | Function to be called when the tab is clicked. Optional. |
| sx | SystemStyleObject | {} | Style to be applied to the component |

## SelectMenu.TabPanel

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

### System Props

<Note variant="warning">

System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.

</Note>

SelectMenu.TabPanel components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.

### Component Props

| Name | Type | Default | Description |
| :------ | :----- | :-----: | :------------------------------------------------------------------------------------------------------------------------- |
| tabName | String | | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component. |
| Name | Type | Default | Description |
| :------ | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------------------------- |
| tabName | String | | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component. |
| sx | SystemStyleObject | {} | Style to be applied to the component |

## SelectMenu.Divider

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

### System Props

<Note variant="warning">

System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.

</Note>

SelectMenu.Divder components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.

### Component Props

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

## SelectMenu.Footer

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

### System Props

<Note variant="warning">

System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.

</Note>

SelectMenu.Footer components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.

### Component Props

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

## SelectMenu.Header

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

### System Props

<Note variant="warning">

System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.

</Note>

SelectMenu.Header components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.

### Component Props

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

## SelectMenu.LoadingAnimation

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

### System Props

<Note variant="warning">

System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.

</Note>

SelectMenu.LoadingAnimation components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.

### Component Props

SelectMenu.LoadingAnimation components do not get any additional props besides system props.
| Name | Type | Default | Description |
| :--- | :---------------- | :-----: | :----------------------------------- |
| sx | SystemStyleObject | {} | Style to be applied to the component |
4 changes: 1 addition & 3 deletions src/SelectMenu/SelectMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, {useCallback, useEffect, useRef, useState} from 'react'
import styled from 'styled-components'
import {COMMON, SystemCommonProps} from '../constants'
import sx, {SxProp} from '../sx'
import {ComponentProps} from '../utils/types'
import useKeyboardNav from './hooks/useKeyboardNav'
Expand Down Expand Up @@ -32,9 +31,8 @@ const wrapperStyles = `
}
`

const StyledSelectMenu = styled.details<SystemCommonProps & SxProp>`
const StyledSelectMenu = styled.details<SxProp>`
${wrapperStyles}
${COMMON}
${sx};
`

Expand Down
5 changes: 2 additions & 3 deletions src/SelectMenu/SelectMenuDivider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import styled, {css} from 'styled-components'
import {COMMON, get, SystemCommonProps} from '../constants'
import {get} from '../constants'
import sx, {SxProp} from '../sx'
import {ComponentProps} from '../utils/types'

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

const SelectMenuDivider = styled.div<SystemCommonProps & SxProp>`
const SelectMenuDivider = styled.div<SxProp>`
${dividerStyles}
${COMMON}
${sx};
`

Expand Down
5 changes: 2 additions & 3 deletions src/SelectMenu/SelectMenuFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
import React, {forwardRef, useContext, useEffect, useRef} from 'react'
import styled from 'styled-components'
import {COMMON, get, SystemCommonProps} from '../constants'
import {get} from '../constants'
import sx, {SxProp} from '../sx'
import TextInput, {TextInputProps} from '../TextInput'
import {ComponentProps} from '../utils/types'
import {MenuContext} from './SelectMenuContext'

const StyledForm = styled.form<SystemCommonProps & SxProp>`
const StyledForm = styled.form<SxProp>`
padding: ${get('space.3')};
margin: 0;
border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
background-color: ${get('colors.canvas.overlay')};
${COMMON};

@media (min-width: ${get('breakpoints.0')}) {
padding: ${get('space.2')};
Expand Down
5 changes: 2 additions & 3 deletions src/SelectMenu/SelectMenuFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import styled, {css} from 'styled-components'
import {COMMON, get, SystemCommonProps} from '../constants'
import {get} from '../constants'
import sx, {SxProp} from '../sx'
import {ComponentProps} from '../utils/types'

Expand All @@ -16,9 +16,8 @@ const footerStyles = css`
}
`

const SelectMenuFooter = styled.footer<SystemCommonProps & SxProp>`
const SelectMenuFooter = styled.footer<SxProp>`
${footerStyles}
${COMMON}
${sx};
`

Expand Down
6 changes: 2 additions & 4 deletions src/SelectMenu/SelectMenuHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react'
import styled from 'styled-components'
import {COMMON, get, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from '../constants'
import {get} from '../constants'
import sx, {SxProp} from '../sx'
import {ComponentProps} from '../utils/types'

Expand All @@ -19,13 +19,11 @@ const SelectMenuTitle = styled.h3`
}
`

const StyledHeader = styled.header<SystemTypographyProps & SystemCommonProps & SxProp>`
const StyledHeader = styled.header<SxProp>`
display: flex;
flex: none; // fixes header from getting squeezed in Safari iOS
padding: ${get('space.3')};
border-bottom: ${get('borderWidths')} solid ${get('colors.border.muted')};
${COMMON}
${TYPOGRAPHY}

@media (min-width: ${get('breakpoints.0')}) {
padding-top: ${get('space.2')};
Expand Down
5 changes: 2 additions & 3 deletions src/SelectMenu/SelectMenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {CheckIcon} from '@primer/octicons-react'
import React, {forwardRef, useContext, useRef} from 'react'
import styled, {css} from 'styled-components'
import {COMMON, get, SystemCommonProps} from '../constants'
import {get} from '../constants'
import StyledOcticon from '../StyledOcticon'
import sx, {SxProp} from '../sx'
import {ComponentProps} from '../utils/types'
Expand Down Expand Up @@ -92,9 +92,8 @@ export const listItemStyles = css`

const StyledItem = styled.a.attrs(() => ({
role: 'menuitemcheckbox'
}))<SystemCommonProps & SxProp>`
}))<SxProp>`
${listItemStyles}
${COMMON}
${sx};
`

Expand Down
Loading