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;