CircleBadge no longer accepts styled system props (#1555)

Author: jfuchs

.changeset/gold-countries-kneel.md

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

@@ -12,16 +12,6 @@ Use CircleBadge to visually connect logos of third party services like in market
 </CircleBadge>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-CircleBadge and CircleBadge.Icon components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
 ### CircleBadge

src/CircleBadge.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import StyledOcticon from './StyledOcticon'
 import sx, {SxProp} from './sx'
 import isNumeric from './utils/isNumeric'
@@ -15,8 +15,7 @@ type StyledCircleBadgeProps = {
   inline?: boolean
   variant?: keyof typeof variantSizes
   size?: number
-} & SystemCommonProps &
-  SxProp
+} & SxProp
 
 const sizeStyles = ({size, variant = 'medium'}: StyledCircleBadgeProps) => {
   const calc = isNumeric(size) ? size : variantSizes[variant]
@@ -33,7 +32,6 @@ const CircleBadge = styled.div<StyledCircleBadgeProps>`
   background-color: ${get('colors.canvas.default')};
   border-radius: 50%;
   box-shadow: ${get('shadows.shadow.medium')};
-  ${COMMON};
   ${sizeStyles};
   ${sx};
 `

src/__tests__/CircleBadge.types.test.tsx

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