chore(Octicon): remove sx

.changeset/tame-eggs-taste.md

@@ -0,0 +1,6 @@
+---
+"@primer/react": major
+"@primer/styled-react": patch
+---
+
+chore(Octicon): remove sx

packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.module.css

@@ -58,3 +58,7 @@
   color: var(--fgColor-muted);
   margin-left: var(--base-size-4);
 }
+
+.Icon {
+  color: var(--fgColor-muted);
+}

packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx

@@ -35,11 +35,11 @@ const hoverCard = (
       Former beach cat and champion swimmer. Now your friendly octopus with a normal face.
     </span>
     <Stack direction="horizontal" gap="none">
-      <Octicon color={'var(--fgColor-muted)'} icon={LocationIcon} />
+      <Octicon className={classes.Icon} icon={LocationIcon} />
       <span className={classes.MetaMuted}>Interwebs</span>
     </Stack>
     <Stack direction="horizontal" gap="none">
-      <Octicon color={'var(--fgColor-muted)'} icon={RepoIcon} />
+      <Octicon className={classes.Icon} icon={RepoIcon} />
       <span className={classes.MetaMuted}>Owns this repository</span>
     </Stack>
   </Stack>

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

@@ -8,3 +8,7 @@
   color: var(--fgColor-muted);
   margin-left: var(--base-size-4);
 }
+
+.Icon {
+  color: var(--fgColor-muted);
+}

packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx

@@ -31,11 +31,11 @@ const hoverCard = (
     </Stack>
     <Text size="medium">Former beach cat and champion swimmer. Now your friendly octapus with a normal face.</Text>
     <Stack direction="horizontal" gap="none">
-      <Octicon color={'var(--fgColor-muted)'} icon={LocationIcon} />
+      <Octicon className={classes.Icon} icon={LocationIcon} />
       <Text className={classes.TextSmallMutedWithMargin}>Interwebs</Text>
     </Stack>
     <Stack direction="horizontal" gap="none">
-      <Octicon color={'var(--fgColor-muted)'} icon={RepoIcon} />
+      <Octicon className={classes.Icon} icon={RepoIcon} />
       <Text className={classes.TextSmallMutedWithMargin}>Owns this repository</Text>
     </Stack>
   </Stack>

packages/react/src/Octicon/Octicon.docs.json

@@ -35,11 +35,6 @@
       "type": "string",
       "defaultValue": "text-bottom",
       "description": "Sets the `vertical-align` CSS property"
-    },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
     }
   ],
   "subcomponents": []

packages/react/src/Octicon/Octicon.stories.tsx

@@ -10,9 +10,9 @@ export default meta
 
 export const Default = () => <Octicon icon={HeartFillIcon} aria-label="Like" size={32} />
 
-export const Playground: StoryFn<typeof Octicon> = ({'aria-label': ariaLabel, ...args}) => (
-  <Octicon icon={HeartFillIcon} aria-label={ariaLabel ? ariaLabel : undefined} {...args} />
-)
+export const Playground: StoryFn<typeof Octicon> = ({'aria-label': ariaLabel, icon: _icon, ...args}) => {
+  return <Octicon icon={HeartFillIcon} aria-label={ariaLabel ? ariaLabel : undefined} {...args} />
+}
 
 Playground.args = {
   'aria-label': 'Heart',
@@ -36,28 +36,10 @@ Playground.argTypes = {
       disable: true,
     },
   },
-  sx: {
-    controls: false,
-    table: {
-      disable: true,
-    },
-  },
   as: {
     controls: false,
     table: {
       disable: true,
     },
   },
-  forwardedAs: {
-    controls: false,
-    table: {
-      disable: true,
-    },
-  },
-  theme: {
-    controls: false,
-    table: {
-      disable: true,
-    },
-  },
 }

packages/react/src/Octicon/Octicon.test.tsx

@@ -9,11 +9,6 @@ describe('Octicon', () => {
     expect(container.firstChild).toHaveClass('test-class')
   })
 
-  it('should support `sx`', () => {
-    const {container} = render(<Octicon icon={XIcon} sx={{color: 'red'}} />)
-    expect(container.firstChild).toHaveStyle('color: rgb(255, 0, 0)')
-  })
-
   it('should pass along props to the outermost element', () => {
     const {container} = render(<Octicon icon={XIcon} data-testid="test-id" />)
     expect(container.firstChild).toHaveAttribute('data-testid', 'test-id')

packages/react/src/Octicon/Octicon.tsx

@@ -1,30 +1,17 @@
 import type {IconProps} from '@primer/octicons-react'
 import React from 'react'
-import styled from 'styled-components'
-import type {SxProp} from '../sx'
-import sx from '../sx'
-import type {ComponentProps} from '../utils/types'
-
-type StyledOcticonProps = {icon: React.ElementType; color?: string} & IconProps & SxProp
-
-const Icon = React.forwardRef((props: StyledOcticonProps, ref: React.Ref<SVGSVGElement>) => {
-  const {icon: IconComponent, ...rest} = props
-  return <IconComponent {...rest} ref={ref} />
-})
 
 /**
  * @deprecated Use the icon component directly from `@primer/octicons-react` instead
  */
-const Octicon = styled(Icon).withConfig({
-  shouldForwardProp(prop) {
-    return prop !== 'sx'
-  },
-})<SxProp>`
-  ${({color, sx: sxProp}) => sx({sx: {color, ...sxProp}})}
-`
+export type OcticonProps = {icon: React.ElementType; as?: React.ElementType} & IconProps
 
 /**
  * @deprecated Use the icon component directly from `@primer/octicons-react` instead
  */
-export type OcticonProps = ComponentProps<typeof Octicon>
+const Octicon = React.forwardRef((props: OcticonProps, ref: React.Ref<SVGSVGElement>) => {
+  const {icon: IconComponent, ...rest} = props
+  return <IconComponent {...rest} ref={ref} />
+})
+
 export default Octicon

packages/react/src/StateLabel/StateLabel.module.css

@@ -100,3 +100,7 @@
 .Icon {
   margin-right: var(--base-size-4);
 }
+
+.Icon:where([data-variant-small]) {
+  width: 1em;
+}

packages/react/src/StateLabel/StateLabel.tsx

@@ -53,7 +53,6 @@ export type StateLabelProps = React.HTMLAttributes<HTMLSpanElement> & {
 
 const StateLabel = forwardRef<HTMLSpanElement, StateLabelProps>(
   ({children, status, variant: variantProp = 'normal', className, ...rest}, ref) => {
-    const octiconProps = variantProp === 'small' ? {width: '1em'} : {}
     // Open and closed statuses, we don't want to show an icon
     const noIconStatus = status === 'open' || status === 'closed'
 
@@ -66,7 +65,12 @@ const StateLabel = forwardRef<HTMLSpanElement, StateLabelProps>(
         data-status={status}
       >
         {!noIconStatus && (
-          <Octicon {...octiconProps} icon={octiconMap[status]} aria-label={labelMap[status]} className={classes.Icon} />
+          <Octicon
+            data-variant-small={variantProp === 'small' ? '' : undefined}
+            icon={octiconMap[status]}
+            aria-label={labelMap[status]}
+            className={classes.Icon}
+          />
         )}
         {children}
       </span>

packages/react/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`StateLabel > renders children 1`] = `
   >
     <svg
       aria-label="Issue"
-      class="octicon octicon-issue-opened sc-aXZVg fRzBGV prc-StateLabel-Icon-UdR1Y"
+      class="octicon octicon-issue-opened prc-StateLabel-Icon-UdR1Y"
       display="inline-block"
       fill="currentColor"
       focusable="false"
@@ -41,7 +41,7 @@ exports[`StateLabel > respects the status prop 1`] = `
   >
     <svg
       aria-label="Issue"
-      class="octicon octicon-issue-opened sc-aXZVg fRzBGV prc-StateLabel-Icon-UdR1Y"
+      class="octicon octicon-issue-opened prc-StateLabel-Icon-UdR1Y"
       display="inline-block"
       fill="currentColor"
       focusable="false"
@@ -72,7 +72,7 @@ exports[`StateLabel > respects the status prop 2`] = `
   >
     <svg
       aria-label="Issue"
-      class="octicon octicon-issue-closed sc-aXZVg fRzBGV prc-StateLabel-Icon-UdR1Y"
+      class="octicon octicon-issue-closed prc-StateLabel-Icon-UdR1Y"
       display="inline-block"
       fill="currentColor"
       focusable="false"
@@ -103,7 +103,7 @@ exports[`StateLabel > respects the status prop 3`] = `
   >
     <svg
       aria-label="Issue, not planned"
-      class="octicon octicon-skip sc-aXZVg fRzBGV prc-StateLabel-Icon-UdR1Y"
+      class="octicon octicon-skip prc-StateLabel-Icon-UdR1Y"
       display="inline-block"
       fill="currentColor"
       focusable="false"
@@ -131,7 +131,7 @@ exports[`StateLabel > respects the status prop 4`] = `
   >
     <svg
       aria-label="Pull request"
-      class="octicon octicon-git-merge sc-aXZVg fRzBGV prc-StateLabel-Icon-UdR1Y"
+      class="octicon octicon-git-merge prc-StateLabel-Icon-UdR1Y"
       display="inline-block"
       fill="currentColor"
       focusable="false"
@@ -159,7 +159,7 @@ exports[`StateLabel > respects the status prop 5`] = `
   >
     <svg
       aria-label="Pull request"
-      class="octicon octicon-git-merge-queue sc-aXZVg fRzBGV prc-StateLabel-Icon-UdR1Y"
+      class="octicon octicon-git-merge-queue prc-StateLabel-Icon-UdR1Y"
       display="inline-block"
       fill="currentColor"
       focusable="false"
@@ -187,7 +187,8 @@ exports[`StateLabel > respects the variant prop 1`] = `
   >
     <svg
       aria-label="Issue"
-      class="octicon octicon-issue-opened sc-aXZVg fRzBGV prc-StateLabel-Icon-UdR1Y"
+      class="octicon octicon-issue-opened prc-StateLabel-Icon-UdR1Y"
+      data-variant-small=""
       display="inline-block"
       fill="currentColor"
       focusable="false"
@@ -218,7 +219,7 @@ exports[`StateLabel > respects the variant prop 2`] = `
   >
     <svg
       aria-label="Issue"
-      class="octicon octicon-issue-opened sc-aXZVg fRzBGV prc-StateLabel-Icon-UdR1Y"
+      class="octicon octicon-issue-opened prc-StateLabel-Icon-UdR1Y"
       display="inline-block"
       fill="currentColor"
       focusable="false"

packages/react/src/Timeline/Timeline.features.stories.module.css

@@ -11,3 +11,7 @@
 .LinkWithBoldStyle:hover {
   color: var(--fgColor-accent);
 }
+
+.GitMergeIcon {
+  color: var(--fgColor-onEmphasis);
+}

packages/react/src/Timeline/Timeline.features.stories.tsx

@@ -55,7 +55,7 @@ export const TimelineBreak = () => (
   <Timeline>
     <Timeline.Item>
       <Timeline.Badge className={classes.BadgeWithDoneBackground}>
-        <Octicon icon={GitMergeIcon} color="fg.onEmphasis" aria-label="Merged" />
+        <Octicon icon={GitMergeIcon} className={classes.GitMergeIcon} aria-label="Merged" />
       </Timeline.Badge>
       <Timeline.Body>This is a message</Timeline.Body>
     </Timeline.Item>

packages/react/src/TreeView/TreeView.features.stories.module.css

@@ -16,3 +16,15 @@
   max-height: 50vh;
   overflow: auto;
 }
+
+.SuccessIcon {
+  color: var(--fgColor-success);
+}
+
+.AttentionIcon {
+  color: var(--fgColor-attention);
+}
+
+.DangerIcon {
+  color: var(--fgColor-danger);
+}