Remove support for sx from CircleOcticon component

.changeset/serious-grapes-buy.md

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

packages/react/src/CircleOcticon/CircleOcticon.docs.json

@@ -15,11 +15,6 @@
       "defaultValue": "32",
       "type": "number",
       "description": "Set the width and height of the icon in pixels."
-    },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
     }
   ],
   "subcomponents": []

packages/react/src/CircleOcticon/CircleOcticon.module.css

@@ -0,0 +1,8 @@
+.CircleOcticon {
+  overflow: hidden;
+  border-radius: 50%;
+  border: solid 0 var(--borderColor-default);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

packages/react/src/CircleOcticon/CircleOcticon.stories.module.css

@@ -0,0 +1,4 @@
+.CircleOcticon {
+  background-color: var(--bgColor-success-emphasis);
+  color: var(--fgColor-onEmphasis);
+}

packages/react/src/CircleOcticon/CircleOcticon.stories.tsx

@@ -4,6 +4,7 @@ import type {CircleOcticonProps} from './CircleOcticon'
 import {CheckIcon} from '@primer/octicons-react'
 // eslint-disable-next-line import/no-namespace
 import * as Icons from '@primer/octicons-react'
+import classes from './CircleOcticon.stories.module.css'
 
 const meta: Meta<typeof CircleOcticon> = {
   title: 'Deprecated/Components/CircleOcticon',
@@ -12,26 +13,27 @@ const meta: Meta<typeof CircleOcticon> = {
 export default meta
 
 export const Default = () => (
-  <CircleOcticon
-    icon={CheckIcon}
-    size={32}
-    sx={{backgroundColor: 'success.emphasis', color: 'fg.onEmphasis'}}
-    aria-label="Changes approved"
-  />
+  <CircleOcticon icon={CheckIcon} size={32} className={classes.CircleOcticon} aria-label="Changes approved" />
 )
 
 type PlaygroundTypes = Omit<CircleOcticonProps, 'icon'> & {icon: keyof typeof Icons}
 export const Playground: StoryFn<PlaygroundTypes> = ({
   icon: iconName,
   'aria-label': ariaLabel = 'Changes approved',
   ...args
-}) => <CircleOcticon icon={Icons[iconName]} aria-label={ariaLabel ? ariaLabel : undefined} {...args} />
+}) => (
+  <CircleOcticon
+    icon={Icons[iconName]}
+    aria-label={ariaLabel ? ariaLabel : undefined}
+    className={classes.CircleOcticon}
+    {...args}
+  />
+)
 
 Playground.args = {
   size: 32,
   icon: 'CheckIcon',
   'aria-label': undefined,
-  sx: {backgroundColor: 'success.emphasis', color: 'fg.onEmphasis'},
 }
 
 Playground.argTypes = {
@@ -49,7 +51,4 @@ Playground.argTypes = {
   'aria-label': {
     type: 'string',
   },
-  sx: {
-    controls: false,
-  },
 }

packages/react/src/CircleOcticon/CircleOcticon.tsx

@@ -1,34 +1,42 @@
 import type {IconProps} from '@primer/octicons-react'
 import type React from 'react'
-import type {BoxProps} from '../Box'
-import Box from '../Box'
+import styles from './CircleOcticon.module.css'
 
 export type CircleOcticonProps = {
   as?: React.ElementType
   size?: number
   icon: React.ComponentType<React.PropsWithChildren<{size?: IconProps['size']}>>
-} & BoxProps
+  bg?: string
+  'aria-label'?: string
+  className?: string
+} & React.HTMLAttributes<HTMLElement>
 
 /**
  * @deprecated This component is deprecated. Replace component with specific icon imports from `@primer/octicons-react` and customized styling.)
  */
 function CircleOcticon(props: CircleOcticonProps) {
-  const {size = 32, as, icon: IconComponent, bg, 'aria-label': ariaLabel, ...rest} = props
+  const {
+    size = 32,
+    as: Component = 'div',
+    icon: IconComponent,
+    bg,
+    'aria-label': ariaLabel,
+    className,
+    style,
+    ...rest
+  } = props
+
+  const wrapperStyle: React.CSSProperties = {
+    backgroundColor: bg,
+    width: size,
+    height: size,
+    ...style,
+  }
+
   return (
-    <Box
-      as={as}
-      bg={bg}
-      overflow="hidden"
-      borderWidth={0}
-      size={size}
-      borderRadius="50%"
-      borderStyle="solid"
-      borderColor="border.default"
-    >
-      <Box display="flex" as={as} size={size} {...rest} alignItems="center" justifyContent="center">
-        <IconComponent size={size} aria-label={ariaLabel} />
-      </Box>
-    </Box>
+    <Component className={`${styles.CircleOcticon}${className ? ` ${className}` : ''}`} style={wrapperStyle} {...rest}>
+      <IconComponent size={size} aria-label={ariaLabel} />
+    </Component>
   )
 }