1
1
mirror of https://github.com/primer/css.git synced 2024-11-26 12:14:22 +03:00

Merge pull request #953 from primer/issue-label

Add IssueLabel component
This commit is contained in:
Shawn Allen 2019-10-23 09:34:06 -07:00 committed by GitHub
commit 435abad2ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 60 additions and 0 deletions

View File

@ -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.

View File

@ -1,4 +1,5 @@
@import "../support/index.scss";
@import "./issue-labels.scss";
@import "./labels.scss";
@import "./states.scss";
@import "./counters.scss";

View File

@ -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;
}
}