StateLabel: Add open and closed states for no icon cases

.changeset/nine-apes-change.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+StateLabel: Add open and closed states for no icon cases

e2e/components/StateLabel.test.ts

@@ -182,4 +182,40 @@ test.describe('StateLabel', () => {
       })
     }
   })
+
+  test.describe('Open', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-statelabel-features--open',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`StateLabel.Open.${theme}.png`)
+        })
+      })
+    }
+  })
+
+  test.describe('Closed', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-statelabel-features--closed',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`StateLabel.Closed.${theme}.png`)
+        })
+      })
+    }
+  })
 })

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

@@ -39,6 +39,12 @@
     },
     {
       "id": "components-statelabel-features--small"
+    },
+    {
+      "id": "components-statelabel-features--open"
+    },
+    {
+      "id": "components-statelabel-features--closed"
     }
   ],
   "importPath": "@primer/react",
@@ -50,7 +56,7 @@
     },
     {
       "name": "status",
-      "type": "'issueOpened' | 'issueClosed' | 'issueClosedNotPlanned' | 'pullOpened' | 'pullClosed' | 'pullMerged' | 'draft' | 'issueDraft' | 'unavailable'",
+      "type": "'issueOpened' | 'issueClosed' | 'issueClosedNotPlanned' | 'pullOpened' | 'pullClosed' | 'pullMerged' | 'draft' | 'issueDraft' | 'unavailable' | 'open' | 'closed'",
       "required": true
     },
     {

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

@@ -2,6 +2,7 @@ import React from 'react'
 import type {Meta} from '@storybook/react'
 import type {ComponentProps} from '../utils/types'
 import StateLabel from './StateLabel'
+import VisuallyHidden from '../_VisuallyHidden'
 
 export default {
   title: 'Components/StateLabel/Features',
@@ -19,6 +20,14 @@ export const PullMerged = () => <StateLabel status="pullMerged">Merged</StateLab
 export const Queued = () => <StateLabel status="pullQueued">Queued</StateLabel>
 export const Draft = () => <StateLabel status="draft">Draft</StateLabel>
 export const Unavailable = () => <StateLabel status="unavailable">Unavailable</StateLabel>
+export const Open = () => (
+  <StateLabel status="open">
+    {/* Because open is a generic status, a visually hidden text could be added to specify the type of the artifact */}
+    <VisuallyHidden>Milestone</VisuallyHidden>
+    Open
+  </StateLabel>
+)
+export const Closed = () => <StateLabel status="closed">Closed</StateLabel>
 
 export const Small = () => (
   <StateLabel status="issueOpened" variant="small">

packages/react/src/StateLabel/StateLabel.tsx

@@ -31,6 +31,8 @@ const octiconMap = {
   issueDraft: IssueDraftIcon,
   pullQueued: GitMergeQueueIcon,
   unavailable: AlertIcon,
+  open: null,
+  closed: null,
 }
 
 const labelMap: Record<keyof typeof octiconMap, 'Issue' | 'Issue, not planned' | 'Pull request' | ''> = {
@@ -44,6 +46,8 @@ const labelMap: Record<keyof typeof octiconMap, 'Issue' | 'Issue, not planned' |
   issueDraft: 'Issue',
   pullQueued: 'Pull request',
   unavailable: '',
+  open: '',
+  closed: '',
 }
 
 const colorVariants = variant({
@@ -99,6 +103,16 @@ const colorVariants = variant({
       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)',
+    },
   },
 })
 
@@ -140,10 +154,12 @@ export type StateLabelProps = ComponentProps<typeof StateLabelBase>
 
 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 && (
+      {status && !noIconStatus && (
         <Octicon
           {...octiconProps}
           // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition

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

@@ -53,4 +53,14 @@ describe('StateLabel', () => {
     expect(screen2.getByLabelText('Pull request')).toBeInTheDocument() // svg
     expect(screen2.getByText('Merged')).toBeInTheDocument() // text
   })
+  it('renders open status without an icon', () => {
+    const screen = HTMLRender(<StateLabel status="open">Open</StateLabel>)
+    expect(screen.queryByRole('img')).not.toBeInTheDocument() // svg
+    expect(screen.getByText('Open')).toBeInTheDocument() // text
+  })
+  it('renders closed status without an icon', () => {
+    const screen = HTMLRender(<StateLabel status="closed">Closed</StateLabel>)
+    expect(screen.queryByRole('img')).not.toBeInTheDocument() // svg
+    expect(screen.getByText('Closed')).toBeInTheDocument() // text
+  })
 })

script/generate-e2e-tests.js

@@ -1200,6 +1200,14 @@ const components = new Map([
           id: 'components-statelabel-features--small',
           name: 'Small',
         },
+        {
+          id: 'components-statelabel-features--open',
+          name: 'Open',
+        },
+        {
+          id: 'components-statelabel-features--closed',
+          name: 'Closed',
+        },
       ],
     },
   ],