Merge pull request #953 from primer/issue-label

Add IssueLabel component
primer · Oct 23, 2019 · 435abad · 435abad
2 parents 7df15de + 9a9483b
commit 435abad
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 0 deletions.
diff --git a/docs/content/components/labels.md b/docs/content/components/labels.md
@@ -62,6 +62,25 @@ Use `Label--outline-green` in combination with `Label--outline` to communicate a
 <span title="Label: green outline label" class="Label Label--outline Label--outline-green">green outlined label</span>
 ```
 
+## Issue Labels
+
+Issue Labels are used for adding labels to issues and pull requests. They also come with emoji support.
+
+```html live
+<span class="IssueLabel bg-blue text-white mr-1" title="Label: good first issue">good first issue</span>
+<span class="IssueLabel bg-red text-white mr-1" title="Label: bug">bug 🐛</span>
+<span class="IssueLabel bg-green text-white" title="Label: bug">help wanted</span>
+```
+
+If an Issue Label needs to be bigger, add the `.IssueLabel--big` modifier.
+
+```html live
+<span class="IssueLabel IssueLabel--big bg-blue text-white mr-1" title="Label: good first issue">good first issue</span>
+<span class="IssueLabel IssueLabel--big bg-red text-white mr-1" title="Label: bug">bug 🐛</span>
+<span class="IssueLabel IssueLabel--big bg-green text-white" title="Label: bug">help wanted</span>
+```
+
+
 ## States
 
 Use state labels to inform users of an items status. States are large labels with bolded text. The default state has a gray background.

diff --git a/src/labels/index.scss b/src/labels/index.scss
@@ -1,4 +1,5 @@
 @import "../support/index.scss";
+@import "./issue-labels.scss";
 @import "./labels.scss";
 @import "./states.scss";
 @import "./counters.scss";
diff --git a/src/labels/issue-labels.scss b/src/labels/issue-labels.scss
@@ -0,0 +1,40 @@
+// Issue Labels
+
+.IssueLabel {
+  height: 20px;
+  padding: 0.15em $spacer-1;
+  font-size: $h6-size;
+  font-weight: $font-weight-bold;
+  line-height: 15px;
+  border-radius: 2px;
+  box-shadow: inset 0 -1px 0 rgba($black, 0.12);
+
+  .g-emoji {
+    position: relative;
+    top: -0.05em;
+    display: inline-block;
+    font-size: 1em;
+    line-height: $lh-condensed-ultra;
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.IssueLabel--big {
+  padding: $spacer-1 $spacer-2;
+  font-size: $h5-size;
+  font-weight: $font-weight-bold;
+  border-radius: $border-radius;
+  transition: opacity 0.2s linear;
+
+  .g-emoji {
+    display: inline-block;
+    margin-top: -1px;
+  }
+
+  &:hover {
+    opacity: 0.85;
+  }
+}