Remove support for sx from CircleBadge component (#6673)

Co-authored-by: Marie Lucca <francinelucca@github.com>
Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com>

Author: llastflowers

.changeset/cool-apricots-sneeze.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Update CircleBadge component to no longer support sx

.changeset/lazy-elephants-shave.md

@@ -0,0 +1,6 @@
+---
+"@primer/react": patch
+"@primer/styled-react": patch
+---
+
+Remove support for `sx` from `CircleBadge` component

packages/react/src/CircleBadge/CircleBadge.docs.json

@@ -32,11 +32,6 @@
       "name": "as",
       "type": "React.ElementType",
       "defaultValue": "\"div\""
-    },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
     }
   ],
   "subcomponents": [

packages/react/src/CircleBadge/CircleBadge.module.css

@@ -0,0 +1,18 @@
+.CircleBadge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--bgColor-default);
+  border-radius: 50%;
+  box-shadow: var(--shadow-resting-medium);
+
+  &:where([data-inline]) {
+    display: inline-flex;
+  }
+}
+
+.CircleBadgeIcon {
+  height: auto;
+  max-height: 55%;
+  max-width: 60%;
+}

packages/react/src/CircleBadge/CircleBadge.stories.tsx

@@ -14,18 +14,17 @@ export const Default = () => (
   </CircleBadge>
 )
 
-export const Playground: StoryFn<typeof CircleBadge> = ({'CircleBadge.Icon aria-label': iconAriaLabel, args}) => (
+export const Playground: StoryFn<typeof CircleBadge> = args => (
   <CircleBadge {...args}>
-    <CircleBadge.Icon icon={ZapIcon} aria-label={iconAriaLabel} />
+    <CircleBadge.Icon icon={ZapIcon} aria-label="Zap" />
   </CircleBadge>
 )
 
 Playground.args = {
   variant: 'medium',
-  size: null,
+  size: undefined,
   inline: false,
   as: 'div',
-  'CircleBadge.Icon aria-label': undefined,
 }
 
 Playground.argTypes = {
@@ -45,7 +44,4 @@ Playground.argTypes = {
       type: 'boolean',
     },
   },
-  'CircleBadge.Icon aria-label': {
-    type: 'string',
-  },
 }

packages/react/src/CircleBadge/CircleBadge.tsx

@@ -1,50 +1,45 @@
-import styled from 'styled-components'
-import {get} from '../constants'
 import Octicon from '../Octicon'
-import type {SxProp} from '../sx'
-import sx from '../sx'
 import isNumeric from '../utils/isNumeric'
 import type {ComponentProps} from '../utils/types'
 
+import styles from './CircleBadge.module.css'
+import type {OcticonProps} from '../Octicon'
+import {clsx} from 'clsx'
+
 const variantSizes = {
   small: 56,
   medium: 96,
   large: 128,
 }
 
-type StyledCircleBadgeProps = {
+export type CircleBadgeProps<As extends React.ElementType> = {
   inline?: boolean
   variant?: keyof typeof variantSizes
   size?: number
-} & SxProp
+  as?: As
+  className?: string
+} & React.ComponentPropsWithRef<React.ElementType extends As ? 'a' : As>
 
-const sizeStyles = ({size, variant = 'medium'}: StyledCircleBadgeProps) => {
+const sizeStyles = ({size, variant = 'medium'}: CircleBadgeProps<React.ElementType>) => {
   const calc = isNumeric(size) ? size : variantSizes[variant]
   return {
     width: calc,
     height: calc,
   }
 }
 
-const CircleBadge = styled.div<StyledCircleBadgeProps>`
-  display: ${({inline = false}) => (inline ? 'inline-flex' : 'flex')};
-  align-items: center;
-  justify-content: center;
-  background-color: ${get('colors.canvas.default')};
-  border-radius: 50%;
-  box-shadow: ${get('shadows.shadow.medium')};
-  ${sizeStyles};
-  ${sx};
-`
-const CircleBadgeIcon = styled(Octicon)`
-  height: auto;
-  max-width: 60%;
-  max-height: 55%;
-`
+const CircleBadge = <As extends React.ElementType>({as: Component = 'div', ...props}: CircleBadgeProps<As>) => (
+  <Component
+    {...props}
+    className={clsx(styles.CircleBadge, props.className)}
+    data-inline={props.inline ? '' : undefined}
+    style={sizeStyles(props)}
+  />
+)
 
-CircleBadgeIcon.displayName = 'CircleBadge.Icon'
+const CircleBadgeIcon = (props: OcticonProps) => <Octicon className={styles.CircleBadgeIcon} {...props} />
 
-export type CircleBadgeProps = ComponentProps<typeof CircleBadge>
+CircleBadgeIcon.displayName = 'CircleBadge.Icon'
 
 export type CircleBadgeIconProps = ComponentProps<typeof CircleBadgeIcon>
 

packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap

@@ -2,19 +2,25 @@
 
 exports[`CircleBadge > respects the inline prop 1`] = `
 <div
-  class="sc-gEvEer lNPvJ"
+  class="prc-CircleBadge-CircleBadge-LZ7wp"
+  data-inline=""
+  style="width: 96px; height: 96px;"
 />
 `;
 
 exports[`CircleBadge > respects the variant prop 1`] = `
 <div
-  class="sc-gEvEer irZoQl"
+  class="prc-CircleBadge-CircleBadge-LZ7wp"
+  style="width: 128px; height: 128px;"
+  variant="large"
 />
 `;
 
 exports[`CircleBadge > uses the size prop to override the variant prop 1`] = `
 <div
-  class="sc-gEvEer ceBMXF"
+  class="prc-CircleBadge-CircleBadge-LZ7wp"
   size="20"
+  style="width: 20px; height: 20px;"
+  variant="large"
 />
 `;

packages/styled-react/src/components/CircleBadge.tsx

@@ -0,0 +1,21 @@
+import {
+  CircleBadge as PrimerCircleBadge,
+  type CircleBadgeProps as PrimerCircleBadgeProps,
+  sx,
+  type SxProp,
+} from '@primer/react'
+import styled from 'styled-components'
+import {type ForwardRefComponent} from '../polymorphic'
+
+type CircleBadgeProps<As extends React.ElementType> = PrimerCircleBadgeProps<As> & SxProp
+
+const CircleBadge: ForwardRefComponent<React.ElementType, CircleBadgeProps<React.ElementType>> = styled(
+  PrimerCircleBadge,
+).withConfig({
+  shouldForwardProp: prop => (prop as keyof CircleBadgeProps<React.ElementType>) !== 'sx',
+})<CircleBadgeProps<React.ElementType>>`
+  ${sx}
+`
+
+export {CircleBadge}
+export type {CircleBadgeProps}

packages/styled-react/src/index.tsx

@@ -6,7 +6,6 @@ export {Breadcrumbs} from '@primer/react'
 export {Box, type BoxProps} from './components/Box'
 export {Button} from '@primer/react'
 export {CheckboxGroup} from '@primer/react'
-export {CircleBadge} from '@primer/react'
 export {Details} from '@primer/react'
 export {FormControl} from '@primer/react'
 export {Heading} from '@primer/react'
@@ -32,6 +31,7 @@ export {useColorSchemeVar} from '@primer/react'
 export {useTheme} from '@primer/react'
 
 export {Checkbox, type CheckboxProps} from './components/Checkbox'
+export {CircleBadge} from './components/CircleBadge'
 export {CounterLabel, type CounterLabelProps} from './components/CounterLabel'
 export {Dialog, type DialogProps} from './components/Dialog'
 export {Flash} from './components/Flash'