diff --git a/.changeset/happy-rings-arrive.md b/.changeset/happy-rings-arrive.md
new file mode 100644
index 00000000000..a422519951e
--- /dev/null
+++ b/.changeset/happy-rings-arrive.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add pullQueued state to StateLabel
diff --git a/docs/content/StateLabel.mdx b/docs/content/StateLabel.mdx
index 694a1837ed6..dc2b16c8e7b 100644
--- a/docs/content/StateLabel.mdx
+++ b/docs/content/StateLabel.mdx
@@ -18,6 +18,7 @@ import data from '../../src/StateLabel/StateLabel.docs.json'
Open
Closed
Merged
+ Queued
Draft
Draft
>
diff --git a/src/StateLabel/StateLabel.features.stories.tsx b/src/StateLabel/StateLabel.features.stories.tsx
index 9caef7480fd..473e117e22b 100644
--- a/src/StateLabel/StateLabel.features.stories.tsx
+++ b/src/StateLabel/StateLabel.features.stories.tsx
@@ -16,6 +16,7 @@ export const IssueDraft = () => Draft Open
export const PullClosed = () => Closed
export const PullMerged = () => Merged
+export const Queued = () => Queued
export const Draft = () => Draft
export const Small = () => (
diff --git a/src/StateLabel/StateLabel.tsx b/src/StateLabel/StateLabel.tsx
index 31940eaaf3e..58401a618bc 100644
--- a/src/StateLabel/StateLabel.tsx
+++ b/src/StateLabel/StateLabel.tsx
@@ -6,6 +6,7 @@ import {
IssueDraftIcon,
IssueOpenedIcon,
QuestionIcon,
+ GitMergeQueueIcon,
} from '@primer/octicons-react'
import React from 'react'
import styled from 'styled-components'
@@ -24,6 +25,7 @@ const octiconMap = {
pullMerged: GitMergeIcon,
draft: GitPullRequestIcon,
issueDraft: IssueDraftIcon,
+ pullQueued: GitMergeQueueIcon,
}
const colorVariants = variant({
@@ -45,6 +47,10 @@ const colorVariants = variant({
backgroundColor: 'done.emphasis',
color: 'fg.onEmphasis',
},
+ pullQueued: {
+ backgroundColor: 'attention.emphasis',
+ color: 'fg.onEmphasis',
+ },
issueOpened: {
backgroundColor: 'open.emphasis',
color: 'fg.onEmphasis',
diff --git a/src/StateLabel/__tests__/StateLabel.test.tsx b/src/StateLabel/__tests__/StateLabel.test.tsx
index 537bd291b80..f4d1ccd8d14 100644
--- a/src/StateLabel/__tests__/StateLabel.test.tsx
+++ b/src/StateLabel/__tests__/StateLabel.test.tsx
@@ -32,6 +32,7 @@ describe('StateLabel', () => {
expect(render()).toMatchSnapshot()
expect(render()).toMatchSnapshot()
expect(render()).toMatchSnapshot()
+ expect(render()).toMatchSnapshot()
})
it('respects the variant prop', () => {
diff --git a/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap b/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap
index ba583e95a8c..3cfa27adfe5 100644
--- a/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap
+++ b/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap
@@ -350,6 +350,62 @@ exports[`StateLabel respects the status prop 4`] = `
`;
+exports[`StateLabel respects the status prop 5`] = `
+.c1 {
+ 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: #9a6700;
+ color: #ffffff;
+ padding-left: 12px;
+ padding-right: 12px;
+ padding-top: 8px;
+ padding-bottom: 8px;
+ font-size: 14px;
+}
+
+
+
+
+`;
+
exports[`StateLabel respects the variant prop 1`] = `
.c1 {
margin-right: 4px;