StateLabel: Add size prop and deprecate variant prop

.changeset/thin-planets-taste.md

@@ -0,0 +1,10 @@
+---
+'@primer/react': major
+---
+
+Replaced StateLabel variant prop with size prop.
+- removed: variant property
+- added size property
+- changed property value normal to medium
+
+This is so that the component is inline with how other component apis work.

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

@@ -29,7 +29,7 @@ export const Open = () => (
 export const Closed = () => <StateLabel status="closed">Closed</StateLabel>
 
 export const Small = () => (
-  <StateLabel status="issueOpened" variant="small">
+  <StateLabel status="issueOpened" size="small">
     Open
   </StateLabel>
 )

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

@@ -10,12 +10,12 @@
 }
 
 /* Size variants */
-.StateLabel:where([data-variant='small']) {
+.StateLabel:where([data-size='small']) {
   padding: var(--base-size-4) var(--base-size-8);
   font-size: var(--text-body-size-small);
 }
 
-.StateLabel:where([data-variant='normal']) {
+.StateLabel:where([data-size='medium']) {
   padding: var(--base-size-8) var(--base-size-12);
   font-size: var(--text-body-size-medium);
 }

packages/react/src/StateLabel/StateLabel.tsx

@@ -47,12 +47,12 @@ const labelMap: Record<keyof typeof octiconMap, 'Issue' | 'Issue, not planned' |
 }
 
 export type StateLabelProps = React.HTMLAttributes<HTMLSpanElement> & {
-  variant?: 'small' | 'normal'
+  size?: 'small' | 'medium'
   status: keyof typeof octiconMap
 }
 
 const StateLabel = forwardRef<HTMLSpanElement, StateLabelProps>(
-  ({children, status, variant: variantProp = 'normal', className, ...rest}, ref) => {
+  ({children, status, size: sizeProp = 'medium', className, ...rest}, ref) => {
     // Open and closed statuses, we don't want to show an icon
     const noIconStatus = status === 'open' || status === 'closed'
 
@@ -61,12 +61,12 @@ const StateLabel = forwardRef<HTMLSpanElement, StateLabelProps>(
         {...rest}
         ref={ref}
         className={clsx(classes.StateLabel, className)}
-        data-variant={variantProp}
+        data-size={sizeProp}
         data-status={status}
       >
         {!noIconStatus && (
           <Octicon
-            data-variant-small={variantProp === 'small' ? '' : undefined}
+            data-size-small={sizeProp === 'small' ? '' : undefined}
             icon={octiconMap[status]}
             aria-label={labelMap[status]}
             className={classes.Icon}