diff --git a/.changeset/chilly-frogs-act.md b/.changeset/chilly-frogs-act.md
new file mode 100644
index 00000000000..95686eb4fab
--- /dev/null
+++ b/.changeset/chilly-frogs-act.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Support issues closed as not planned, and correct the standard issue closed backgroud colour
diff --git a/docs/content/StateLabel.md b/docs/content/StateLabel.md
index 292c431fbcb..2396b018c33 100644
--- a/docs/content/StateLabel.md
+++ b/docs/content/StateLabel.md
@@ -12,6 +12,7 @@ Use StateLabel components to show the status of an issue or pull request.
<>
Open
Closed
+ Closed
Open
Closed
Merged
@@ -22,8 +23,8 @@ Use StateLabel components to show the status of an issue or pull request.
## Component props
-| Name | Type | Default | Description |
-| :------ | :---------------- | :------: | :------------------------------------------------------------------------------------------------------------- |
-| variant | String | 'normal' | a value of `small` or `normal` results in a smaller or larger version of the StateLabel. |
-| status | String | | Can be one of `issueOpened`, `issueClosed`, `pullOpened`, `pullClosed`, `pullMerged`, `draft` or `issueDraft`. |
-| sx | SystemStyleObject | {} | Style to be applied to the component |
+| Name | Type | Default | Description |
+| :------ | :---------------- | :------: | :-------------------------------------------------------------------------------------------------------------------------------------- |
+| variant | String | 'normal' | a value of `small` or `normal` results in a smaller or larger version of the StateLabel. |
+| status | String | | Can be one of `issueOpened`, `issueClosed`, `issueClosedNotPlanned`, `pullOpened`, `pullClosed`, `pullMerged`, `draft` or `issueDraft`. |
+| sx | SystemStyleObject | {} | Style to be applied to the component |
diff --git a/src/StateLabel.tsx b/src/StateLabel.tsx
index ef172f7ba73..690e2ed4488 100644
--- a/src/StateLabel.tsx
+++ b/src/StateLabel.tsx
@@ -2,6 +2,7 @@ import {
GitMergeIcon,
GitPullRequestIcon,
IssueClosedIcon,
+ SkipIcon,
IssueDraftIcon,
IssueOpenedIcon,
QuestionIcon
@@ -18,6 +19,7 @@ const octiconMap = {
issueOpened: IssueOpenedIcon,
pullOpened: GitPullRequestIcon,
issueClosed: IssueClosedIcon,
+ issueClosedNotPlanned: SkipIcon,
pullClosed: GitPullRequestIcon,
pullMerged: GitMergeIcon,
draft: GitPullRequestIcon,
@@ -28,7 +30,11 @@ const colorVariants = variant({
prop: 'status',
variants: {
issueClosed: {
- backgroundColor: 'danger.emphasis',
+ backgroundColor: 'done.emphasis',
+ color: 'fg.onEmphasis'
+ },
+ issueClosedNotPlanned: {
+ backgroundColor: 'neutral.emphasis',
color: 'fg.onEmphasis'
},
pullClosed: {
diff --git a/src/__tests__/StateLabel.test.tsx b/src/__tests__/StateLabel.test.tsx
index 1f6ea61790b..cae82050b09 100644
--- a/src/__tests__/StateLabel.test.tsx
+++ b/src/__tests__/StateLabel.test.tsx
@@ -34,6 +34,7 @@ describe('StateLabel', () => {
it('respects the status prop', () => {
expect(render()).toMatchSnapshot()
expect(render()).toMatchSnapshot()
+ expect(render()).toMatchSnapshot()
expect(render()).toMatchSnapshot()
})
diff --git a/src/__tests__/__snapshots__/StateLabel.test.tsx.snap b/src/__tests__/__snapshots__/StateLabel.test.tsx.snap
index 06001921e64..2b0a3a8bef5 100644
--- a/src/__tests__/__snapshots__/StateLabel.test.tsx.snap
+++ b/src/__tests__/__snapshots__/StateLabel.test.tsx.snap
@@ -189,7 +189,7 @@ exports[`StateLabel respects the status prop 2`] = `
color: #ffffff;
text-align: center;
border-radius: 100px;
- background-color: #cf222e;
+ background-color: #8250df;
color: #ffffff;
padding-left: 12px;
padding-right: 12px;
@@ -231,6 +231,62 @@ exports[`StateLabel respects the status prop 3`] = `
margin-right: 4px;
}
+.c0 {
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ font-weight: 600;
+ line-height: 16px;
+ color: #ffffff;
+ text-align: center;
+ border-radius: 100px;
+ background-color: #6e7781;
+ color: #ffffff;
+ padding-left: 12px;
+ padding-right: 12px;
+ padding-top: 8px;
+ padding-bottom: 8px;
+ font-size: 14px;
+}
+
+
+
+`;
+
+exports[`StateLabel respects the status prop 4`] = `
+.c1 {
+ margin-right: 4px;
+}
+
.c0 {
display: -webkit-inline-box;
display: -webkit-inline-flex;