diff --git a/.changeset/large-chefs-fix.md b/.changeset/large-chefs-fix.md new file mode 100644 index 00000000000..607998160f3 --- /dev/null +++ b/.changeset/large-chefs-fix.md @@ -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. diff --git a/docs/content/SelectMenu.md b/docs/content/SelectMenu.md index c4ebbc993a2..fde4064b03c 100644 --- a/docs/content/SelectMenu.md +++ b/docs/content/SelectMenu.md @@ -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 @@ -82,9 +83,7 @@ const MyButton = () => { Used to wrap the content in a `SelectMenu`. ```jsx - - {/* all menu content is wrapped in the modal*/} - +{/* all menu content is wrapped in the modal*/} ``` ### Right-aligned modal @@ -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 @@ -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 @@ -139,22 +141,13 @@ You can use a `button` tag instead by utilizing the [`as` prop](/core-concepts#t ``` -### System props - - - -System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. - - - -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 @@ -177,23 +170,14 @@ Use a `SelectMenu.Filter` to add a filter UI to your select menu. Users are expe ``` -### System Props - - - -System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. - - - -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 @@ -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 @@ -242,28 +228,19 @@ The `onClick` prop is optional and can be used for any events or data fetching y ```jsx <> - - + + ``` -### System Props - - - -System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. - - - -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 @@ -275,21 +252,12 @@ Wraps the content for each tab. Make sure to use the `tabName` prop to identify {/* Wraps content for each tab */} ``` -### System Props - - - -System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. - - - -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 @@ -311,19 +279,11 @@ Use a `SelectMenu.Divider` to add information between items in a `SelectMenu.Lis ``` -### System Props - - - -System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. - - - -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 @@ -345,19 +305,11 @@ Use a `SelectMenu.Footer` to add content to the bottom of the select menu. ``` -### System Props - - - -System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. - - - -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 @@ -379,19 +331,11 @@ Use a `SelectMenu.Header` to add a header to the top of the select menu content. ``` -### System Props - - - -System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. - - - -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 @@ -420,16 +364,8 @@ Use a `SelectMenu.LoadingAnimation` to add a loading animation inside of the Sel ``` -### System Props - - - -System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. - - - -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 | diff --git a/src/SelectMenu/SelectMenu.tsx b/src/SelectMenu/SelectMenu.tsx index 0b652f865cf..5a6d3ff356c 100644 --- a/src/SelectMenu/SelectMenu.tsx +++ b/src/SelectMenu/SelectMenu.tsx @@ -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' @@ -32,9 +31,8 @@ const wrapperStyles = ` } ` -const StyledSelectMenu = styled.details` +const StyledSelectMenu = styled.details` ${wrapperStyles} - ${COMMON} ${sx}; ` diff --git a/src/SelectMenu/SelectMenuDivider.tsx b/src/SelectMenu/SelectMenuDivider.tsx index 069134b7de9..e437ed1ea89 100644 --- a/src/SelectMenu/SelectMenuDivider.tsx +++ b/src/SelectMenu/SelectMenuDivider.tsx @@ -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' @@ -13,9 +13,8 @@ const dividerStyles = css` border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.muted')}; ` -const SelectMenuDivider = styled.div` +const SelectMenuDivider = styled.div` ${dividerStyles} - ${COMMON} ${sx}; ` diff --git a/src/SelectMenu/SelectMenuFilter.tsx b/src/SelectMenu/SelectMenuFilter.tsx index cb30163776f..5e96a9edc27 100644 --- a/src/SelectMenu/SelectMenuFilter.tsx +++ b/src/SelectMenu/SelectMenuFilter.tsx @@ -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` +const StyledForm = styled.form` 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')}; diff --git a/src/SelectMenu/SelectMenuFooter.tsx b/src/SelectMenu/SelectMenuFooter.tsx index 3aa5b1dd350..0765979fbf9 100644 --- a/src/SelectMenu/SelectMenuFooter.tsx +++ b/src/SelectMenu/SelectMenuFooter.tsx @@ -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' @@ -16,9 +16,8 @@ const footerStyles = css` } ` -const SelectMenuFooter = styled.footer` +const SelectMenuFooter = styled.footer` ${footerStyles} - ${COMMON} ${sx}; ` diff --git a/src/SelectMenu/SelectMenuHeader.tsx b/src/SelectMenu/SelectMenuHeader.tsx index b6a8174d937..ab255e5ffb4 100644 --- a/src/SelectMenu/SelectMenuHeader.tsx +++ b/src/SelectMenu/SelectMenuHeader.tsx @@ -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' @@ -19,13 +19,11 @@ const SelectMenuTitle = styled.h3` } ` -const StyledHeader = styled.header` +const StyledHeader = styled.header` 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')}; diff --git a/src/SelectMenu/SelectMenuItem.tsx b/src/SelectMenu/SelectMenuItem.tsx index bd192cded43..d706157054e 100644 --- a/src/SelectMenu/SelectMenuItem.tsx +++ b/src/SelectMenu/SelectMenuItem.tsx @@ -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' @@ -92,9 +92,8 @@ export const listItemStyles = css` const StyledItem = styled.a.attrs(() => ({ role: 'menuitemcheckbox' -}))` +}))` ${listItemStyles} - ${COMMON} ${sx}; ` diff --git a/src/SelectMenu/SelectMenuList.tsx b/src/SelectMenu/SelectMenuList.tsx index 4d80e4726d2..587409b13ed 100644 --- a/src/SelectMenu/SelectMenuList.tsx +++ b/src/SelectMenu/SelectMenuList.tsx @@ -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' @@ -30,9 +30,8 @@ const listStyles = css` } ` -const SelectMenuList = styled.div` +const SelectMenuList = styled.div` ${listStyles} - ${COMMON} ${sx}; ` diff --git a/src/SelectMenu/SelectMenuLoadingAnimation.tsx b/src/SelectMenu/SelectMenuLoadingAnimation.tsx index 93403ae9e24..a719e0d3716 100644 --- a/src/SelectMenu/SelectMenuLoadingAnimation.tsx +++ b/src/SelectMenu/SelectMenuLoadingAnimation.tsx @@ -1,14 +1,15 @@ import React from 'react' import styled from 'styled-components' -import {COMMON, get, SystemCommonProps} from '../constants' +import {get} from '../constants' import Spinner from '../Spinner' +import sx, {SxProp} from '../sx' import {ComponentProps} from '../utils/types' -const Animation = styled.div` +const Animation = styled.div` padding: ${get('space.6')} ${get('space.4')}; text-align: center; background-color: ${get('colors.canvas.overlay')}; - ${COMMON} + ${sx} ` export type SelectMenuLoadingAnimationProps = ComponentProps diff --git a/src/SelectMenu/SelectMenuModal.tsx b/src/SelectMenu/SelectMenuModal.tsx index 59feaf3e8b4..d845620f3ad 100644 --- a/src/SelectMenu/SelectMenuModal.tsx +++ b/src/SelectMenu/SelectMenuModal.tsx @@ -1,7 +1,7 @@ import React from 'react' import styled, {css, keyframes} from 'styled-components' import {width, WidthProps} from 'styled-system' -import {COMMON, get, SystemCommonProps} from '../constants' +import {get} from '../constants' import sx, {SxProp} from '../sx' import {ComponentProps} from '../utils/types' @@ -11,8 +11,7 @@ type StyledModalProps = { type StyledModalWrapperProps = { align?: 'left' | 'right' -} & SystemCommonProps & - SxProp +} & SxProp const animateModal = keyframes` 0% { @@ -92,7 +91,6 @@ const Modal = styled.div` const ModalWrapper = styled.div` ${modalWrapperStyles} - ${COMMON} ${sx}; ` diff --git a/src/SelectMenu/SelectMenuTab.tsx b/src/SelectMenu/SelectMenuTab.tsx index f986d234eaf..177a3a0a859 100644 --- a/src/SelectMenu/SelectMenuTab.tsx +++ b/src/SelectMenu/SelectMenuTab.tsx @@ -1,7 +1,7 @@ import classnames from 'classnames' import React, {useContext, useEffect} from 'react' 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' import {MenuContext} from './SelectMenuContext' @@ -43,9 +43,8 @@ const tabStyles = css` } ` -const StyledTab = styled.button` +const StyledTab = styled.button` ${tabStyles} - ${COMMON} ${sx}; ` diff --git a/src/SelectMenu/SelectMenuTabPanel.tsx b/src/SelectMenu/SelectMenuTabPanel.tsx index 1d30ae55915..593c3c1d7ae 100644 --- a/src/SelectMenu/SelectMenuTabPanel.tsx +++ b/src/SelectMenu/SelectMenuTabPanel.tsx @@ -1,14 +1,13 @@ import React, {useContext} from 'react' 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' import {MenuContext} from './SelectMenuContext' import SelectMenuList from './SelectMenuList' -const TabPanelBase = styled.div` +const TabPanelBase = styled.div` border-top: ${get('borderWidths.1')} solid ${get('colors.border.muted')}; - ${COMMON} ${sx}; ` diff --git a/src/SelectMenu/SelectMenuTabs.tsx b/src/SelectMenu/SelectMenuTabs.tsx index dc2d9d7d142..06e978b32e3 100644 --- a/src/SelectMenu/SelectMenuTabs.tsx +++ b/src/SelectMenu/SelectMenuTabs.tsx @@ -1,6 +1,6 @@ import React from 'react' 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' @@ -23,9 +23,8 @@ const tabWrapperStyles = css` } ` -const SelectMenuTabsBase = styled.div` +const SelectMenuTabsBase = styled.div` ${tabWrapperStyles} - ${COMMON} ${sx}; ` diff --git a/src/__tests__/SelectMenu.types.test.tsx b/src/__tests__/SelectMenu.types.test.tsx new file mode 100644 index 00000000000..8f9acfeed6a --- /dev/null +++ b/src/__tests__/SelectMenu.types.test.tsx @@ -0,0 +1,37 @@ +import React from 'react' +import SelectMenu from '../SelectMenu' + +export function shouldAcceptCallWithNoProps() { + return +} + +export function shouldNotAcceptSystemProps() { + return ( + <> + {/* @ts-expect-error system props should not be accepted */} + + {/* @ts-expect-error system props should not be accepted */} + + {/* @ts-expect-error system props should not be accepted */} + + {/* This will not error for now, but once TextInputProps is fixed, a ts-expect-error can be added */} + + {/* @ts-expect-error system props should not be accepted */} + + {/* @ts-expect-error system props should not be accepted */} + + {/* @ts-expect-error system props should not be accepted */} + + {/* @ts-expect-error system props should not be accepted */} + + {/* @ts-expect-error system props should not be accepted */} + + {/* @ts-expect-error system props should not be accepted */} + + {/* @ts-expect-error system props should not be accepted */} + + {/* @ts-expect-error system props should not be accepted */} + + + ) +}