Remove sxProp support from StateLabel component (#6656)

Author: liuliu-dev

.changeset/tricky-eggs-cross.md

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

packages/react/src/StateLabel/StateLabel.docs.json

@@ -58,12 +58,7 @@
       "name": "status",
       "type": "'issueOpened' | 'issueClosed' | 'issueClosedNotPlanned' | 'pullOpened' | 'pullClosed' | 'pullMerged' | 'draft' | 'issueDraft' | 'unavailable' | 'open' | 'closed'",
       "required": true
-    },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
     }
   ],
   "subcomponents": []
-}
+}

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

@@ -0,0 +1,3 @@
+.Icon {
+  margin-right: var(--base-size-4);
+}

packages/react/src/StateLabel/StateLabel.stories.tsx

@@ -22,12 +22,6 @@ Playground.argTypes = {
       disable: true,
     },
   },
-  sx: {
-    controls: false,
-    table: {
-      disable: true,
-    },
-  },
   theme: {
     controls: false,
     table: {

packages/react/src/StateLabel/StateLabel.tsx

@@ -15,9 +15,8 @@ import styled from 'styled-components'
 import {variant} from 'styled-system'
 import {get} from '../constants'
 import Octicon from '../Octicon'
-import type {SxProp} from '../sx'
-import sx from '../sx'
 import type {ComponentProps} from '../utils/types'
+import classes from './StateLabel.module.css'
 
 const octiconMap = {
   issueOpened: IssueOpenedIcon,
@@ -134,7 +133,7 @@ const sizeVariants = variant({
 type StyledStateLabelBaseProps = {
   variant?: 'small' | 'normal'
   status: keyof typeof octiconMap
-} & SxProp
+}
 
 const StateLabelBase = styled.span<StyledStateLabelBaseProps>`
   display: inline-flex;
@@ -146,7 +145,6 @@ const StateLabelBase = styled.span<StyledStateLabelBaseProps>`
   border-radius: ${get('radii.3')};
   ${colorVariants};
   ${sizeVariants};
-  ${sx};
 `
 
 export type StateLabelProps = ComponentProps<typeof StateLabelBase>
@@ -164,7 +162,7 @@ function StateLabel({children, status, variant: variantProp = 'normal', ...rest}
           // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
           icon={octiconMap[status] || QuestionIcon}
           aria-label={labelMap[status]}
-          sx={{mr: 1}}
+          className={classes.Icon}
         />
       )}
       {children}

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

@@ -3,11 +3,11 @@
 exports[`StateLabel > renders children 1`] = `
 <div>
   <span
-    class="sc-gEvEer kMFJqD"
+    class="sc-gEvEer kZGRsh"
   >
     <svg
       aria-label="Issue"
-      class="octicon octicon-issue-opened sc-aXZVg iIIuCH"
+      class="octicon octicon-issue-opened sc-aXZVg fRzBGV prc-StateLabel-Icon-UdR1Y"
       display="inline-block"
       fill="currentColor"
       focusable="false"
@@ -33,11 +33,11 @@ exports[`StateLabel > renders children 1`] = `
 exports[`StateLabel > respects the status prop 1`] = `
 <div>
   <span
-    class="sc-gEvEer kMFJqD"
+    class="sc-gEvEer kZGRsh"
   >
     <svg
       aria-label="Issue"
-      class="octicon octicon-issue-opened sc-aXZVg iIIuCH"
+      class="octicon octicon-issue-opened sc-aXZVg fRzBGV prc-StateLabel-Icon-UdR1Y"
       display="inline-block"
       fill="currentColor"
       focusable="false"
@@ -62,11 +62,11 @@ exports[`StateLabel > respects the status prop 1`] = `
 exports[`StateLabel > respects the status prop 2`] = `
 <div>
   <span
-    class="sc-gEvEer bsjviD"
+    class="sc-gEvEer ccfZZ"
   >
     <svg
       aria-label="Issue"
-      class="octicon octicon-issue-closed sc-aXZVg iIIuCH"
+      class="octicon octicon-issue-closed sc-aXZVg fRzBGV prc-StateLabel-Icon-UdR1Y"
       display="inline-block"
       fill="currentColor"
       focusable="false"
@@ -91,11 +91,11 @@ exports[`StateLabel > respects the status prop 2`] = `
 exports[`StateLabel > respects the status prop 3`] = `
 <div>
   <span
-    class="sc-gEvEer fTounP"
+    class="sc-gEvEer cIcgsx"
   >
     <svg
       aria-label="Issue, not planned"
-      class="octicon octicon-skip sc-aXZVg iIIuCH"
+      class="octicon octicon-skip sc-aXZVg fRzBGV prc-StateLabel-Icon-UdR1Y"
       display="inline-block"
       fill="currentColor"
       focusable="false"
@@ -117,11 +117,11 @@ exports[`StateLabel > respects the status prop 3`] = `
 exports[`StateLabel > respects the status prop 4`] = `
 <div>
   <span
-    class="sc-gEvEer bsjviD"
+    class="sc-gEvEer ccfZZ"
   >
     <svg
       aria-label="Pull request"
-      class="octicon octicon-git-merge sc-aXZVg iIIuCH"
+      class="octicon octicon-git-merge sc-aXZVg fRzBGV prc-StateLabel-Icon-UdR1Y"
       display="inline-block"
       fill="currentColor"
       focusable="false"
@@ -143,11 +143,11 @@ exports[`StateLabel > respects the status prop 4`] = `
 exports[`StateLabel > respects the status prop 5`] = `
 <div>
   <span
-    class="sc-gEvEer kAzWGT"
+    class="sc-gEvEer dDPQZd"
   >
     <svg
       aria-label="Pull request"
-      class="octicon octicon-git-merge-queue sc-aXZVg iIIuCH"
+      class="octicon octicon-git-merge-queue sc-aXZVg fRzBGV prc-StateLabel-Icon-UdR1Y"
       display="inline-block"
       fill="currentColor"
       focusable="false"
@@ -169,11 +169,11 @@ exports[`StateLabel > respects the status prop 5`] = `
 exports[`StateLabel > respects the variant prop 1`] = `
 <div>
   <span
-    class="sc-gEvEer bDjmot"
+    class="sc-gEvEer lpakhT"
   >
     <svg
       aria-label="Issue"
-      class="octicon octicon-issue-opened sc-aXZVg iIIuCH"
+      class="octicon octicon-issue-opened sc-aXZVg fRzBGV prc-StateLabel-Icon-UdR1Y"
       display="inline-block"
       fill="currentColor"
       focusable="false"
@@ -198,11 +198,11 @@ exports[`StateLabel > respects the variant prop 1`] = `
 exports[`StateLabel > respects the variant prop 2`] = `
 <div>
   <span
-    class="sc-gEvEer kMFJqD"
+    class="sc-gEvEer kZGRsh"
   >
     <svg
       aria-label="Issue"
-      class="octicon octicon-issue-opened sc-aXZVg iIIuCH"
+      class="octicon octicon-issue-opened sc-aXZVg fRzBGV prc-StateLabel-Icon-UdR1Y"
       display="inline-block"
       fill="currentColor"
       focusable="false"