diff --git a/.changeset/ready-pears-call.md b/.changeset/ready-pears-call.md new file mode 100644 index 00000000000..4f20f9509b2 --- /dev/null +++ b/.changeset/ready-pears-call.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +StateLabel: Add new type: `archived` 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,12 @@ 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 + 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`] = ` +
+ + + + + +
+`;