From ce1da4b3237de8207a6be5c0849b59c3f514c247 Mon Sep 17 00:00:00 2001 From: Stephanie Hong <41085564+JelloBagel@users.noreply.github.com> Date: Thu, 19 Mar 2026 21:05:36 +0000 Subject: [PATCH 1/4] feat(StateLabel): add 'archived' status with corresponding styles and stories --- .../react/src/StateLabel/StateLabel.docs.json | 5 +++- .../StateLabel.features.stories.tsx | 1 + .../react/src/StateLabel/StateLabel.figma.tsx | 1 + .../src/StateLabel/StateLabel.module.css | 6 ++++ packages/react/src/StateLabel/StateLabel.tsx | 8 +++++- .../StateLabel/__tests__/StateLabel.test.tsx | 6 ++++ .../__snapshots__/StateLabel.test.tsx.snap | 28 +++++++++++++++++++ 7 files changed, 53 insertions(+), 2 deletions(-) diff --git a/packages/react/src/StateLabel/StateLabel.docs.json b/packages/react/src/StateLabel/StateLabel.docs.json index be10ae3025b..49d61f1b4ae 100644 --- a/packages/react/src/StateLabel/StateLabel.docs.json +++ b/packages/react/src/StateLabel/StateLabel.docs.json @@ -57,6 +57,9 @@ }, { "id": "components-statelabel-features--closed" + }, + { + "id": "components-statelabel-features--archived" } ], "importPath": "@primer/react", @@ -68,7 +71,7 @@ }, { "name": "status", - "type": "'issueOpened' | 'issueClosed' | 'issueClosedNotPlanned' | 'pullOpened' | 'pullClosed' | 'pullMerged' | 'draft' | 'issueDraft' | 'pullQueued' | 'unavailable' | 'alertOpened' | 'alertFixed' | 'alertDismissed' | 'alertClosed' | 'open' | 'closed'", + "type": "'issueOpened' | 'issueClosed' | 'issueClosedNotPlanned' | 'pullOpened' | 'pullClosed' | 'pullMerged' | 'draft' | 'issueDraft' | 'pullQueued' | 'unavailable' | 'alertOpened' | 'alertFixed' | 'alertDismissed' | 'alertClosed' | 'open' | 'closed' | 'archived'", "required": true } ], diff --git a/packages/react/src/StateLabel/StateLabel.features.stories.tsx b/packages/react/src/StateLabel/StateLabel.features.stories.tsx index 36ff1e7ea8c..c79992a9c71 100644 --- a/packages/react/src/StateLabel/StateLabel.features.stories.tsx +++ b/packages/react/src/StateLabel/StateLabel.features.stories.tsx @@ -24,6 +24,7 @@ export const AlertOpened = () => Open Fixed export const AlertDismissed = () => Dismissed export const AlertClosed = () => Closed +export const Archived = () => Archived export const Open = () => ( diff --git a/packages/react/src/StateLabel/StateLabel.figma.tsx b/packages/react/src/StateLabel/StateLabel.figma.tsx index bb9b349203e..6885e09d4ad 100644 --- a/packages/react/src/StateLabel/StateLabel.figma.tsx +++ b/packages/react/src/StateLabel/StateLabel.figma.tsx @@ -43,6 +43,7 @@ figma.connect( merged: 'pullMerged', queued: 'pullQueued', unavailable: 'unavailable', + archived: 'archived', }), text: figma.textContent('Label'), }, diff --git a/packages/react/src/StateLabel/StateLabel.module.css b/packages/react/src/StateLabel/StateLabel.module.css index 21374618e04..1b20c2cfbd4 100644 --- a/packages/react/src/StateLabel/StateLabel.module.css +++ b/packages/react/src/StateLabel/StateLabel.module.css @@ -120,6 +120,12 @@ box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-closed-emphasis, transparent); } +.StateLabel:where([data-status='archived']) { + background-color: var(--bgColor-neutral-emphasis); + color: var(--fgColor-onEmphasis); + box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent); +} + .Icon { margin-right: var(--base-size-4); } diff --git a/packages/react/src/StateLabel/StateLabel.tsx b/packages/react/src/StateLabel/StateLabel.tsx index 8b19ebfdf87..57d6b6047fb 100644 --- a/packages/react/src/StateLabel/StateLabel.tsx +++ b/packages/react/src/StateLabel/StateLabel.tsx @@ -1,4 +1,5 @@ import { + ArchiveIcon, GitMergeIcon, GitPullRequestIcon, GitPullRequestClosedIcon, @@ -37,9 +38,13 @@ const octiconMap = { alertClosed: ShieldXIcon, open: null, closed: null, + archived: ArchiveIcon, } -const labelMap: Record = { +const labelMap: Record< + keyof typeof octiconMap, + 'Issue' | 'Issue, not planned' | 'Pull request' | 'Alert' | 'Archived' | '' +> = { issueOpened: 'Issue', pullOpened: 'Pull request', issueClosed: 'Issue', @@ -54,6 +59,7 @@ const labelMap: Record { expect(HTMLRender().container).toMatchSnapshot() expect(HTMLRender().container).toMatchSnapshot() expect(HTMLRender().container).toMatchSnapshot() + expect(HTMLRender().container).toMatchSnapshot() }) it('respects the deprecated variant prop', () => { @@ -56,6 +57,11 @@ describe('StateLabel', () => { const screen4 = HTMLRender(Closed) expect(screen4.getByLabelText('Alert')).toBeInTheDocument() // svg expect(screen4.getByText('Closed')).toBeInTheDocument() // text + + const screenArchived = HTMLRender(Archived) + expect(screenArchived.getByLabelText('Archived')).toBeInTheDocument() // svg + expect(screenArchived.getByText('Archived')).toBeInTheDocument() // text + screenArchived.unmount() }) it('renders open status without an icon', () => { const screen = HTMLRender(Open) diff --git a/packages/react/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap b/packages/react/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap index 65d4b99f073..51901219268 100644 --- a/packages/react/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap +++ b/packages/react/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap @@ -447,3 +447,31 @@ exports[`StateLabel > respects the status prop 9`] = ` `; + +exports[`StateLabel > respects the status prop 10`] = ` +
+ + + + + +
+`; From 3740b64afb1f7adba74083b2a38bed43a8ce8c7a Mon Sep 17 00:00:00 2001 From: Stephanie Hong <41085564+JelloBagel@users.noreply.github.com> Date: Thu, 19 Mar 2026 21:09:01 +0000 Subject: [PATCH 2/4] Add changeset --- .changeset/ready-pears-call.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/ready-pears-call.md diff --git a/.changeset/ready-pears-call.md b/.changeset/ready-pears-call.md new file mode 100644 index 00000000000..e1fe9b38544 --- /dev/null +++ b/.changeset/ready-pears-call.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Add 'archived' status to StateLabel From 1b56d4d0540298879f2a494a106dc4bdb01527e6 Mon Sep 17 00:00:00 2001 From: Stephanie Hong <41085564+JelloBagel@users.noreply.github.com> Date: Thu, 19 Mar 2026 21:11:55 +0000 Subject: [PATCH 3/4] Add unmount to test --- packages/react/src/StateLabel/__tests__/StateLabel.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/StateLabel/__tests__/StateLabel.test.tsx b/packages/react/src/StateLabel/__tests__/StateLabel.test.tsx index 6022c362145..4cf3f76893b 100644 --- a/packages/react/src/StateLabel/__tests__/StateLabel.test.tsx +++ b/packages/react/src/StateLabel/__tests__/StateLabel.test.tsx @@ -57,6 +57,7 @@ describe('StateLabel', () => { const screen4 = HTMLRender(Closed) expect(screen4.getByLabelText('Alert')).toBeInTheDocument() // svg expect(screen4.getByText('Closed')).toBeInTheDocument() // text + screen4.unmount() const screenArchived = HTMLRender(Archived) expect(screenArchived.getByLabelText('Archived')).toBeInTheDocument() // svg From d95cfdf7068b090594f70296ac8adc62c713738f Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Fri, 20 Mar 2026 10:17:07 +0100 Subject: [PATCH 4/4] Apply suggestion from @siddharthkp --- .changeset/ready-pears-call.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/ready-pears-call.md b/.changeset/ready-pears-call.md index e1fe9b38544..4f20f9509b2 100644 --- a/.changeset/ready-pears-call.md +++ b/.changeset/ready-pears-call.md @@ -2,4 +2,4 @@ '@primer/react': minor --- -Add 'archived' status to StateLabel +StateLabel: Add new type: `archived`