Remove styled-system usage - misc components

packages/react/src/ProgressBar/ProgressBar.module.css

@@ -49,4 +49,13 @@
   &:where([data-progress-bar-size='large']) {
     height: 10px;
   }
+
+  /* Width support for containers */
+  &:where([data-width='auto']) {
+    width: auto;
+  }
+
+  &:where([data-width='full']) {
+    width: 100%;
+  }
 }

packages/react/src/ProgressBar/ProgressBar.tsx

@@ -1,6 +1,4 @@
 import React, {forwardRef} from 'react'
-import type {WidthProps} from 'styled-system'
-import type {SxProp} from '../sx'
 import {clsx} from 'clsx'
 import classes from './ProgressBar.module.css'
 import {BoxWithFallback} from '../internal/components/BoxWithFallback'
@@ -15,14 +13,12 @@ type StyledProgressContainerProps = {
   inline?: boolean
   barSize?: 'small' | 'default' | 'large'
   animated?: boolean
-} & WidthProps &
-  SxProp
+}
 
 export type ProgressBarItems = React.HTMLAttributes<HTMLSpanElement> & {
   'aria-label'?: string
   className?: string
-} & ProgressProp &
-  SxProp
+} & ProgressProp
 
 export const Item = forwardRef<HTMLSpanElement, ProgressBarItems>(
   (

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

@@ -1,3 +1,98 @@
+.StateLabel {
+  display: inline-flex;
+  align-items: center;
+  font-weight: var(--base-text-weight-semibold);
+  /* stylelint-disable-next-line primer/typography */
+  line-height: 16px;
+  color: var(--fgColor-onEmphasis);
+  text-align: center;
+  border-radius: var(--borderRadius-full);
+}
+
+/* Size variants */
+.StateLabel:where([data-variant='small']) {
+  padding: var(--base-size-4) var(--base-size-8);
+  font-size: var(--text-body-size-small);
+}
+
+.StateLabel:where([data-variant='normal']) {
+  padding: var(--base-size-8) var(--base-size-12);
+  font-size: var(--text-body-size-medium);
+}
+
+/* Status color variants */
+.StateLabel:where([data-status='issueClosed']) {
+  background-color: var(--bgColor-done-emphasis);
+  color: var(--fgColor-onEmphasis);
+  box-shadow: var(--shadow-inset) var(--borderColor-done-emphasis, transparent);
+}
+
+.StateLabel:where([data-status='issueClosedNotPlanned']) {
+  background-color: var(--bgColor-neutral-emphasis);
+  color: var(--fgColor-onEmphasis);
+  box-shadow: var(--shadow-inset) var(--borderColor-neutral-emphasis, transparent);
+}
+
+.StateLabel:where([data-status='pullClosed']) {
+  background-color: var(--bgColor-closed-emphasis);
+  color: var(--fgColor-onEmphasis);
+  box-shadow: var(--shadow-inset) var(--borderColor-closed-emphasis, transparent);
+}
+
+.StateLabel:where([data-status='pullMerged']) {
+  background-color: var(--bgColor-done-emphasis);
+  color: var(--fgColor-onEmphasis);
+  box-shadow: var(--shadow-inset) var(--borderColor-done-emphasis, transparent);
+}
+
+.StateLabel:where([data-status='pullQueued']) {
+  background-color: var(--bgColor-attention-emphasis);
+  color: var(--fgColor-onEmphasis);
+  box-shadow: var(--shadow-inset) var(--borderColor-attention-emphasis, transparent);
+}
+
+.StateLabel:where([data-status='issueOpened']) {
+  background-color: var(--bgColor-open-emphasis);
+  color: var(--fgColor-onEmphasis);
+  box-shadow: var(--shadow-inset) var(--borderColor-open-emphasis, transparent);
+}
+
+.StateLabel:where([data-status='pullOpened']) {
+  background-color: var(--bgColor-open-emphasis);
+  color: var(--fgColor-onEmphasis);
+  box-shadow: var(--shadow-inset) var(--borderColor-open-emphasis, transparent);
+}
+
+.StateLabel:where([data-status='draft']) {
+  background-color: var(--bgColor-neutral-emphasis);
+  color: var(--fgColor-onEmphasis);
+  box-shadow: var(--shadow-inset) var(--borderColor-neutral-emphasis, transparent);
+}
+
+.StateLabel:where([data-status='issueDraft']) {
+  background-color: var(--bgColor-neutral-emphasis);
+  color: var(--fgColor-onEmphasis);
+  box-shadow: var(--shadow-inset) var(--borderColor-neutral-emphasis, transparent);
+}
+
+.StateLabel:where([data-status='unavailable']) {
+  background-color: var(--bgColor-neutral-emphasis);
+  color: var(--fgColor-onEmphasis);
+  box-shadow: var(--shadow-inset) var(--borderColor-neutral-emphasis, transparent);
+}
+
+.StateLabel:where([data-status='open']) {
+  background-color: var(--bgColor-open-emphasis);
+  color: var(--fgColor-onEmphasis);
+  box-shadow: var(--shadow-inset) var(--borderColor-open-emphasis, transparent);
+}
+
+.StateLabel:where([data-status='closed']) {
+  background-color: var(--bgColor-done-emphasis);
+  color: var(--fgColor-onEmphasis);
+  box-shadow: var(--shadow-inset) var(--borderColor-done-emphasis, transparent);
+}
+
 .Icon {
   margin-right: var(--base-size-4);
 }

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

@@ -22,10 +22,4 @@ Playground.argTypes = {
       disable: true,
     },
   },
-  theme: {
-    controls: false,
-    table: {
-      disable: true,
-    },
-  },
 }

packages/react/src/StateLabel/StateLabel.tsx

@@ -7,15 +7,13 @@ import {
   SkipIcon,
   IssueDraftIcon,
   IssueOpenedIcon,
-  QuestionIcon,
   GitMergeQueueIcon,
   AlertIcon,
 } from '@primer/octicons-react'
-import styled from 'styled-components'
-import {variant} from 'styled-system'
-import {get} from '../constants'
+import type React from 'react'
+import {forwardRef} from 'react'
+import {clsx} from 'clsx'
 import Octicon from '../Octicon'
-import type {ComponentProps} from '../utils/types'
 import classes from './StateLabel.module.css'
 
 const octiconMap = {
@@ -48,126 +46,34 @@ const labelMap: Record<keyof typeof octiconMap, 'Issue' | 'Issue, not planned' |
   closed: '',
 }
 
-const colorVariants = variant({
-  prop: 'status',
-  variants: {
-    issueClosed: {
-      backgroundColor: 'done.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent)',
-    },
-    issueClosedNotPlanned: {
-      backgroundColor: 'neutral.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent)',
-    },
-    pullClosed: {
-      backgroundColor: 'closed.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-closed-emphasis, transparent)',
-    },
-    pullMerged: {
-      backgroundColor: 'done.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent)',
-    },
-    pullQueued: {
-      backgroundColor: 'attention.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-attention-emphasis, transparent)',
-    },
-    issueOpened: {
-      backgroundColor: 'open.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent)',
-    },
-    pullOpened: {
-      backgroundColor: 'open.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent)',
-    },
-    draft: {
-      backgroundColor: 'neutral.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent)',
-    },
-    issueDraft: {
-      backgroundColor: 'neutral.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent)',
-    },
-    unavailable: {
-      backgroundColor: 'neutral.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent)',
-    },
-    open: {
-      backgroundColor: 'open.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent)',
-    },
-    closed: {
-      backgroundColor: 'done.emphasis',
-      color: 'fg.onEmphasis',
-      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent)',
-    },
-  },
-})
-
-const sizeVariants = variant({
-  prop: 'variant',
-  variants: {
-    small: {
-      paddingX: 2,
-      paddingY: 1,
-      fontSize: 0,
-    },
-    normal: {
-      paddingX: '12px',
-      paddingY: 2,
-      fontSize: 1,
-    },
-  },
-})
-
-type StyledStateLabelBaseProps = {
+export type StateLabelProps = React.HTMLAttributes<HTMLSpanElement> & {
   variant?: 'small' | 'normal'
   status: keyof typeof octiconMap
 }
 
-const StateLabelBase = styled.span<StyledStateLabelBaseProps>`
-  display: inline-flex;
-  align-items: center;
-  font-weight: ${get('fontWeights.bold')};
-  line-height: 16px;
-  color: ${get('colors.canvas.default')};
-  text-align: center;
-  border-radius: ${get('radii.3')};
-  ${colorVariants};
-  ${sizeVariants};
-`
+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'
 
-export type StateLabelProps = ComponentProps<typeof StateLabelBase>
+    return (
+      <span
+        {...rest}
+        ref={ref}
+        className={clsx(classes.StateLabel, className)}
+        data-variant={variantProp}
+        data-status={status}
+      >
+        {!noIconStatus && (
+          <Octicon {...octiconProps} icon={octiconMap[status]} aria-label={labelMap[status]} className={classes.Icon} />
+        )}
+        {children}
+      </span>
+    )
+  },
+)
 
-function StateLabel({children, status, variant: variantProp = 'normal', ...rest}: StateLabelProps) {
-  const octiconProps = variantProp === 'small' ? {width: '1em'} : {}
-  // Open and closed statuses, we don't want to show an icon
-  const noIconStatus = status === 'open' || status === 'closed'
-  return (
-    <StateLabelBase {...rest} variant={variantProp} status={status}>
-      {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
-      {status && !noIconStatus && (
-        <Octicon
-          {...octiconProps}
-          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-          icon={octiconMap[status] || QuestionIcon}
-          aria-label={labelMap[status]}
-          className={classes.Icon}
-        />
-      )}
-      {children}
-    </StateLabelBase>
-  )
-}
+StateLabel.displayName = 'StateLabel'
 
 export default StateLabel