Dropdown no longer accepts styled system props (#1558)

Author: jfuchs

.changeset/bright-baboons-peel.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+Dropdown 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/Dropdown.md

@@ -37,36 +37,29 @@ Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to thi
 </Dropdown>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-Dropdown, Dropdown.Menu, Dropdown.Button, Dropdown.Caret, and Dropdown.Item all get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
 The Dropdown component is extended from the [`Details`](/Details) component and gets all props that the [`Details`](/Details) component gets.
 
 #### Dropdown.Menu
 
-| Name      | Type   | Default | Description                                                                           |
-| :-------- | :----- | :-----: | :------------------------------------------------------------------------------------ |
-| direction | String |  'sw'   | Sets the direction of the dropdown menu. Pick from 'ne', 'e', 'se', 's', 'sw', or 'w' |
+| Name      | Type              | Default | Description                                                                           |
+| :-------- | :---------------- | :-----: | :------------------------------------------------------------------------------------ |
+| direction | String            |  'sw'   | Sets the direction of the dropdown menu. Pick from 'ne', 'e', 'se', 's', 'sw', or 'w' |
+| sx        | SystemStyleObject |   {}    | Style to be applied to the component                                                  |
 
 #### Dropdown.Button
 
-| Name    | Type     | Default | Description                                                                                                  |
-| :------ | :------- | :-----: | :----------------------------------------------------------------------------------------------------------- |
-| onClick | Function |  none   | Use the `onClick` handler to add additional functionality when the button is clicked, such as fetching data. |
+See https://primer.style/react/Buttons#component-props
 
 #### Dropdown.Caret
 
-No additional props.
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |
 
 #### Dropdown.Item
 
-No additional props.
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |

src/Dropdown.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import Button, {ButtonProps} from './Button'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import Details, {DetailsProps} from './Details'
 import getDirectionStyles from './DropdownStyles'
 import useDetails from './hooks/useDetails'
@@ -35,7 +35,7 @@ const DropdownButton = ({children, ...rest}: DropdownButtonProps) => {
   )
 }
 
-const DropdownCaret = styled.div<SystemCommonProps & SxProp>`
+const DropdownCaret = styled.div<SxProp>`
   border: 4px solid transparent;
   margin-left: 12px;
   border-top-color: currentcolor;
@@ -45,14 +45,12 @@ const DropdownCaret = styled.div<SystemCommonProps & SxProp>`
   height: 0;
   vertical-align: middle;
   width: 0;
-  ${COMMON};
   ${sx};
 `
 
 type StyledDropdownMenuProps = {
   direction?: 'ne' | 'e' | 'se' | 's' | 'sw' | 'w'
-} & SystemCommonProps &
-  SxProp
+} & SxProp
 
 const DropdownMenu = styled.ul<StyledDropdownMenuProps>`
   background-clip: padding-box;
@@ -96,7 +94,6 @@ const DropdownMenu = styled.ul<StyledDropdownMenuProps>`
     list-style: none;
   }
   ${props => (props.direction ? getDirectionStyles(props.theme, props.direction) : '')};
-  ${COMMON};
   ${sx};
 `
 
@@ -131,7 +128,6 @@ const DropdownItem = styled.li`
     background-color: ${get('colors.accent.emphasis')};
     outline: none;
   }
-  ${COMMON};
   ${sx};
 `
 

src/__tests__/Dropdown.types.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import Dropdown from '../Dropdown'
+
+export function shouldAcceptCallWithNoProps() {
+  return <Dropdown />
+}
+
+export function shouldNotAcceptSystemProps() {
+  return (
+    <>
+      {/* @ts-expect-error system props should not be accepted */}
+      <Dropdown.Caret backgroundColor="thistle" />,{/* @ts-expect-error system props should not be accepted */}
+      <Dropdown.Menu backgroundColor="thistle" />,{/* @ts-expect-error system props should not be accepted */}
+      <Dropdown.Item backgroundColor="thistle" />,
+      {/* this will not error for now, but once Button removes styled system props, this line should
+        be updated with a @ts-expect-error */}
+      <Dropdown.Button backgroundColor="thistle" />
+    </>
+  )
+}