Add support for draft issues to the StateLabel component (#1604)

japf · web-flow · commit d2090b5b0321 · 2021-11-15T15:59:11.000Z
* add support for draft issues to the StateLabel component
diff --git a/.changeset/state-label-draft-issue.md b/.changeset/state-label-draft-issue.md
@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Add support for draft issues to the StateLabel component
diff --git a/docs/content/StateLabel.md b/docs/content/StateLabel.md
@@ -14,6 +14,7 @@ Use StateLabel components to show the status of an issue or pull request.
   <StateLabel status="pullClosed">Closed</StateLabel>
   <StateLabel status="pullMerged">Merged</StateLabel>
   <StateLabel status="draft">Draft</StateLabel>
+  <StateLabel status="issueDraft">Draft</StateLabel>
 </>
 ```
 
@@ -29,7 +30,7 @@ StateLabel components get `COMMON` system props. Read our [System Props](/system
 
 ## 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`, or `draft`. |
+| 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`. |
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -43,7 +43,7 @@
   "author": "GitHub, Inc.",
   "license": "MIT",
   "dependencies": {
-    "@primer/octicons-react": "^13.0.0",
+    "@primer/octicons-react": "^16.1.0",
     "@primer/primitives": "6.1.0",
     "@radix-ui/react-polymorphic": "0.0.14",
     "@react-aria/ssr": "3.1.0",
diff --git a/src/StateLabel.tsx b/src/StateLabel.tsx
@@ -1,4 +1,11 @@
-import {GitMergeIcon, GitPullRequestIcon, IssueClosedIcon, IssueOpenedIcon, QuestionIcon} from '@primer/octicons-react'
+import {
+  GitMergeIcon,
+  GitPullRequestIcon,
+  IssueClosedIcon,
+  IssueDraftIcon,
+  IssueOpenedIcon,
+  QuestionIcon
+} from '@primer/octicons-react'
 import React from 'react'
 import styled from 'styled-components'
 import {variant} from 'styled-system'
@@ -13,7 +20,8 @@ const octiconMap = {
   issueClosed: IssueClosedIcon,
   pullClosed: GitPullRequestIcon,
   pullMerged: GitMergeIcon,
-  draft: GitPullRequestIcon
+  draft: GitPullRequestIcon,
+  issueDraft: IssueDraftIcon
 }
 
 const colorVariants = variant({
@@ -42,6 +50,10 @@ const colorVariants = variant({
     draft: {
       backgroundColor: 'neutral.emphasis',
       color: 'fg.onEmphasis'
+    },
+    issueDraft: {
+      backgroundColor: 'neutral.emphasis',
+      color: 'fg.onEmphasis'
     }
   }
 })
diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -972,6 +972,7 @@ Array [
                 style={
                   Object {
                     "display": "inline-block",
+                    "overflow": "visible",
                     "userSelect": "none",
                     "verticalAlign": "text-bottom",
                   }
diff --git a/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap b/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap
@@ -21,6 +21,7 @@ exports[`CircleBadge CircleBadge.Icon renders consistently 1`] = `
   style={
     Object {
       "display": "inline-block",
+      "overflow": "visible",
       "userSelect": "none",
       "verticalAlign": "text-bottom",
     }
diff --git a/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap b/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap
@@ -52,6 +52,7 @@ exports[`CircleOcticon renders consistently 1`] = `
       style={
         Object {
           "display": "inline-block",
+          "overflow": "visible",
           "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
diff --git a/src/__tests__/__snapshots__/Dialog.test.tsx.snap b/src/__tests__/__snapshots__/Dialog.test.tsx.snap
@@ -163,6 +163,7 @@ Array [
         style={
           Object {
             "display": "inline-block",
+            "overflow": "visible",
             "userSelect": "none",
             "verticalAlign": "text-bottom",
           }
diff --git a/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap b/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap
@@ -95,6 +95,7 @@ exports[`DropdownMenu renders consistently 1`] = `
     style={
       Object {
         "display": "inline-block",
+        "overflow": "visible",
         "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
diff --git a/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap b/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap
@@ -352,6 +352,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
             style={
               Object {
                 "display": "inline-block",
+                "overflow": "visible",
                 "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
@@ -383,6 +384,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
             style={
               Object {
                 "display": "inline-block",
+                "overflow": "visible",
                 "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
@@ -418,6 +420,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
             style={
               Object {
                 "display": "inline-block",
+                "overflow": "visible",
                 "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
@@ -448,6 +451,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
             style={
               Object {
                 "display": "inline-block",
+                "overflow": "visible",
                 "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
diff --git a/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap b/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap
@@ -108,6 +108,7 @@ exports[`SelectPanel renders consistently 1`] = `
       style={
         Object {
           "display": "inline-block",
+          "overflow": "visible",
           "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
diff --git a/src/__tests__/__snapshots__/StateLabel.test.tsx.snap b/src/__tests__/__snapshots__/StateLabel.test.tsx.snap
@@ -36,7 +36,7 @@ exports[`StateLabel renders children 1`] = `
     className="c1"
     dangerouslySetInnerHTML={
       Object {
-        "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z\\"></path>",
+        "__html": "<path d=\\"M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z\\"></path>",
       }
     }
     fill="currentColor"
@@ -45,6 +45,7 @@ exports[`StateLabel renders children 1`] = `
     style={
       Object {
         "display": "inline-block",
+        "overflow": "visible",
         "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
@@ -92,7 +93,7 @@ exports[`StateLabel renders consistently 1`] = `
     className="c1"
     dangerouslySetInnerHTML={
       Object {
-        "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z\\"></path>",
+        "__html": "<path d=\\"M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z\\"></path>",
       }
     }
     fill="currentColor"
@@ -101,6 +102,7 @@ exports[`StateLabel renders consistently 1`] = `
     style={
       Object {
         "display": "inline-block",
+        "overflow": "visible",
         "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
@@ -148,7 +150,7 @@ exports[`StateLabel respects the status prop 1`] = `
     className="c1"
     dangerouslySetInnerHTML={
       Object {
-        "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z\\"></path>",
+        "__html": "<path d=\\"M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z\\"></path>",
       }
     }
     fill="currentColor"
@@ -157,6 +159,7 @@ exports[`StateLabel respects the status prop 1`] = `
     style={
       Object {
         "display": "inline-block",
+        "overflow": "visible",
         "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
@@ -203,7 +206,7 @@ exports[`StateLabel respects the status prop 2`] = `
     className="c1"
     dangerouslySetInnerHTML={
       Object {
-        "__html": "<path fill-rule=\\"evenodd\\" d=\\"M1.5 8a6.5 6.5 0 0110.65-5.003.75.75 0 00.959-1.153 8 8 0 102.592 8.33.75.75 0 10-1.444-.407A6.5 6.5 0 011.5 8zM8 12a1 1 0 100-2 1 1 0 000 2zm0-8a.75.75 0 01.75.75v3.5a.75.75 0 11-1.5 0v-3.5A.75.75 0 018 4zm4.78 4.28l3-3a.75.75 0 00-1.06-1.06l-2.47 2.47-.97-.97a.749.749 0 10-1.06 1.06l1.5 1.5a.75.75 0 001.06 0z\\"></path>",
+        "__html": "<path d=\\"M11.28 6.78a.75.75 0 00-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 00-1.06 1.06l2 2a.75.75 0 001.06 0l3.5-3.5z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M16 8A8 8 0 110 8a8 8 0 0116 0zm-1.5 0a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z\\"></path>",
       }
     }
     fill="currentColor"
@@ -212,6 +215,7 @@ exports[`StateLabel respects the status prop 2`] = `
     style={
       Object {
         "display": "inline-block",
+        "overflow": "visible",
         "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
@@ -267,6 +271,7 @@ exports[`StateLabel respects the status prop 3`] = `
     style={
       Object {
         "display": "inline-block",
+        "overflow": "visible",
         "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
@@ -313,7 +318,7 @@ exports[`StateLabel respects the variant prop 1`] = `
     className="c1"
     dangerouslySetInnerHTML={
       Object {
-        "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z\\"></path>",
+        "__html": "<path d=\\"M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z\\"></path>",
       }
     }
     fill="currentColor"
@@ -322,6 +327,7 @@ exports[`StateLabel respects the variant prop 1`] = `
     style={
       Object {
         "display": "inline-block",
+        "overflow": "visible",
         "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
@@ -368,7 +374,7 @@ exports[`StateLabel respects the variant prop 2`] = `
     className="c1"
     dangerouslySetInnerHTML={
       Object {
-        "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z\\"></path>",
+        "__html": "<path d=\\"M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z\\"></path>",
       }
     }
     fill="currentColor"
@@ -377,6 +383,7 @@ exports[`StateLabel respects the variant prop 2`] = `
     style={
       Object {
         "display": "inline-block",
+        "overflow": "visible",
         "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
diff --git a/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap b/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap
@@ -15,6 +15,7 @@ exports[`StyledOcticon renders consistently 1`] = `
   style={
     Object {
       "display": "inline-block",
+      "overflow": "visible",
       "userSelect": "none",
       "verticalAlign": "text-bottom",
     }
diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
diff --git a/src/__tests__/__snapshots__/Token.test.tsx.snap b/src/__tests__/__snapshots__/Token.test.tsx.snap

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@primer/components": patch
 +---
++
 +Add support for draft issues to the StateLabel component
Original file line number	Diff line number	Diff line change
`@@ -972,6 +972,7 @@ Array [`
`972`	`972`	`style={`
`973`	`973`	`Object {`
`974`	`974`	`"display": "inline-block",`
	`975`	`+ "overflow": "visible",`
`975`	`976`	`"userSelect": "none",`
`976`	`977`	`"verticalAlign": "text-bottom",`
`977`	`978`	`}`
Original file line number	Diff line number	Diff line change
@@ -21,6 +21,7 @@ exports[`CircleBadge CircleBadge.Icon renders consistently 1`] = `
`21`	`21`	`style={`
`22`	`22`	`Object {`
`23`	`23`	`"display": "inline-block",`
	`24`	`+ "overflow": "visible",`
`24`	`25`	`"userSelect": "none",`
`25`	`26`	`"verticalAlign": "text-bottom",`
`26`	`27`	`}`
Original file line number	Diff line number	Diff line change
@@ -52,6 +52,7 @@ exports[`CircleOcticon renders consistently 1`] = `
`52`	`52`	`style={`
`53`	`53`	`Object {`
`54`	`54`	`"display": "inline-block",`
	`55`	`+ "overflow": "visible",`
`55`	`56`	`"userSelect": "none",`
`56`	`57`	`"verticalAlign": "text-bottom",`
`57`	`58`	`}`
Original file line number	Diff line number	Diff line change
`@@ -163,6 +163,7 @@ Array [`
`163`	`163`	`style={`
`164`	`164`	`Object {`
`165`	`165`	`"display": "inline-block",`
	`166`	`+ "overflow": "visible",`
`166`	`167`	`"userSelect": "none",`
`167`	`168`	`"verticalAlign": "text-bottom",`
`168`	`169`	`}`
Original file line number	Diff line number	Diff line change
@@ -95,6 +95,7 @@ exports[`DropdownMenu renders consistently 1`] = `
`95`	`95`	`style={`
`96`	`96`	`Object {`
`97`	`97`	`"display": "inline-block",`
	`98`	`+ "overflow": "visible",`
`98`	`99`	`"userSelect": "none",`
`99`	`100`	`"verticalAlign": "text-bottom",`
`100`	`101`	`}`