Dialog2 no longer accepts styled system props

Author: jfuchs

.changeset/old-taxis-argue.md

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

@@ -87,6 +87,7 @@ By default, the Dialog component implements the design and interactions defined
 | role          | `"dialog" │ "alertdialog"`                     | `"dialog"` | The ARIA role given to the dialog element. More info: [dialog](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal), [alertdialog](https://www.w3.org/TR/wai-aria-practices-1.1/#alertdialog)                                                                    |
 | width         | `"small" │ "medium" │ "large" │ "xlarge"`      | `"xlarge"` | The fixed width of the dialog.                                                                                                                                                                                                                                          |
 | height        | `"small" │ "large" │ "auto"`                   | `"auto"`   | The fixed height of the dialog, or, auto to adjust the height based on its contents.                                                                                                                                                                                    |
+| sx            | SystemStyleObject                              | {}         | Style to be applied to the component                                                                                                                                                                                                                                    |
 
 ### DialogHeaderProps
 

src/Dialog/Dialog.tsx

@@ -2,7 +2,7 @@ import React, {useCallback, useEffect, useRef, useState} from 'react'
 import styled from 'styled-components'
 import Button, {ButtonPrimary, ButtonDanger, ButtonProps} from '../Button'
 import Box from '../Box'
-import {get, SystemCommonProps, SystemPositionProps, COMMON, POSITION} from '../constants'
+import {get} from '../constants'
 import {useOnEscapePress, useProvidedRefOrCreate} from '../hooks'
 import {useFocusTrap} from '../hooks/useFocusTrap'
 import sx, {SxProp} from '../sx'
@@ -185,7 +185,7 @@ interface StyledDialogProps {
   height?: DialogHeight
 }
 
-const StyledDialog = styled.div<StyledDialogProps & SystemCommonProps & SystemPositionProps & SxProp>`
+const StyledDialog = styled.div<StyledDialogProps & SxProp>`
   display: flex;
   flex-direction: column;
   background-color: ${get('colors.canvas.overlay')};
@@ -210,8 +210,6 @@ const StyledDialog = styled.div<StyledDialogProps & SystemCommonProps & SystemPo
     }
   }
 
-  ${COMMON};
-  ${POSITION};
   ${sx};
 `
 
@@ -309,27 +307,27 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
 })
 _Dialog.displayName = 'Dialog'
 
-const Header = styled(Box).attrs({as: 'header'})`
+const Header = styled.div.attrs({as: 'header'})`
   box-shadow: 0 1px 0 ${get('colors.border.default')};
   padding: ${get('space.2')};
   z-index: 1;
   flex-shrink: 0;
 `
-const Title = styled(Box)`
+const Title = styled.div`
   font-size: ${get('fontSizes.1')};
   font-weight: ${get('fontWeights.bold')};
 `
-const Subtitle = styled(Box)`
+const Subtitle = styled.div`
   font-size: ${get('fontSizes.0')};
   margin-top: ${get('space.1')};
   color: ${get('colors.fg.muted')};
 `
-const Body = styled(Box)`
+const Body = styled.div`
   flex-grow: 1;
   overflow: auto;
   padding: ${get('space.3')};
 `
-const Footer = styled(Box).attrs({as: 'footer'})`
+const Footer = styled.div.attrs({as: 'footer'})`
   box-shadow: 0 -1px 0 ${get('colors.border.default')};
   padding: ${get('space.3')};
   display: flex;

src/__tests__/Dialog2.types.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import {Dialog} from '../Dialog/Dialog'
+
+export function shouldAcceptCallWithNoProps() {
+  return <Dialog onClose={() => null} />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <Dialog onClose={() => null} backgroundColor="tomato" />
+}