primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-28 22:01:43 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1200 from primer/remove-title-attribute-reccomendation

Browse Source 
Remove all reccomendation to use `title` from documentation
This commit is contained in:
simurai 2020-12-10 17:52:27 +09:00 committed by GitHub
commit 4d128a7941
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 46 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/content/components/avatars.md
View File

@ -207,10 +207,10 @@ Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the
### Small ### Small
```html live ```html live
<a class="CircleBadge CircleBadge--small float-left mr-2" href="#small" title="Travis CI"> <a class="CircleBadge CircleBadge--small float-left mr-2" href="#small">
<img src="https://github.com/travis-ci.png" class="CircleBadge-icon" alt=""> <img src="https://github.com/travis-ci.png" class="CircleBadge-icon" alt="">
</a> </a>
<a class="CircleBadge CircleBadge--small bg-yellow" title="Zap this!" href="#small"> <a class="CircleBadge CircleBadge--small bg-yellow" href="#small">
<!-- <%= octicon "zap", class: "CircleBadge-icon text-white" %> --> <!-- <%= octicon "zap", class: "CircleBadge-icon text-white" %> -->
<svg class="CircleBadge-icon text-white octicon octicon-zap" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 7H6l3-7-9 9h4l-3 7 9-9z"></path></svg> <svg class="CircleBadge-icon text-white octicon octicon-zap" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 7H6l3-7-9 9h4l-3 7 9-9z"></path></svg>
</a> </a>

69
docs/content/components/labels.md
View File

@ -18,14 +18,7 @@ GitHub also programmatically generates and applies a background color for labels
The base `Label` style does not apply a background color and only uses the default border: The base `Label` style does not apply a background color and only uses the default border:
```html live ```html live
<span class="Label" title="Label: design">design</span> <span class="Label">design</span>
```
**Note:** Be sure to include a title attribute on labels, as it's helpful for people using screen-readers to differentiate a label from other text. For example, without the title attribute, the following case would read as _"New select component design"_, rather than identifying `design` as a label.
```html live
<!-- Don't do this -->
<a href="#url">New select component</a> <span class="Label">design</span>
``` ```
### Label contrast ### Label contrast
@ -35,9 +28,9 @@ Use `Label--gray` to create a label with a lighter text color. This label is neu
Use `Label--gray-darker` to create a label with a dark-gray color and border. This label is also neutral in color, however, since its color is darker it can stand out more compared to `Label--gray`. Use `Label--gray-darker` to create a label with a dark-gray color and border. This label is also neutral in color, however, since its color is darker it can stand out more compared to `Label--gray`.
```html live ```html live
<span class="Label" title="Label: Default">Default</span> <span class="Label">Default</span>
<span class="Label Label--gray ml-1" title="Label: Gray">Gray</span> <span class="Label Label--gray ml-1">Gray</span>
<span class="Label Label--gray-darker ml-1" title="Label: Dark gray">Dark gray</span> <span class="Label Label--gray-darker ml-1">Dark gray</span>
``` ```
### Colored labels ### Colored labels
@ -51,13 +44,13 @@ Labels come in a few different themes. Use a theme that helps communicate the co
- `Label--blue` -> Info - `Label--blue` -> Info
```html live ```html live
<span class="Label mr-1 Label--yellow" title="Label: Pending">Pending</span> <span class="Label mr-1 Label--yellow">Pending</span>
<span class="Label mr-1 Label--orange" title="Label: Warning">Warning</span> <span class="Label mr-1 Label--orange">Warning</span>
<span class="Label mr-1 Label--red" title="Label: Error">Error</span> <span class="Label mr-1 Label--red">Error</span>
<span class="Label mr-1 Label--green" title="Label: Success">Success</span> <span class="Label mr-1 Label--green">Success</span>
<span class="Label mr-1 Label--blue" title="Label: Info">Info</span> <span class="Label mr-1 Label--blue">Info</span>
<span class="Label mr-1 Label--purple" title="Label: PRO">PRO</span> <span class="Label mr-1 Label--purple">PRO</span>
<span class="Label mr-1 Label--pink" title="Label: Sponsor">Sponsor</span> <span class="Label mr-1 Label--pink">Sponsor</span>
``` ```
Note: Avoid using `Label--orange` next to `Label--red` since most people will find it hard to tell the difference. Note: Avoid using `Label--orange` next to `Label--red` since most people will find it hard to tell the difference.
@ -67,8 +60,8 @@ Note: Avoid using `Label--orange` next to `Label--red` since most people will fi
If space allows, add the `Label--large` modidfier to add a bit more padding to lables. If space allows, add the `Label--large` modidfier to add a bit more padding to lables.
```html live ```html live
<span class="Label Label--gray-darker mr-1" title="Label: Default">Default</span> <span class="Label Label--gray-darker mr-1">Default</span>
<span class="Label Label--large Label--gray-darker mr-1" title="Label: Large">Large</span> <span class="Label Label--large Label--gray-darker mr-1">Large</span>
``` ```
### Inline labels ### Inline labels
@ -77,33 +70,31 @@ Sometimes when adding a label the line-height can be incrased. Or the parent ele
```html live ```html live
<p class="col-4"> <p class="col-4">
Lorem Ipsum is simply <span class="Label Label--inline" title="Label: dummy">dummy text</span> Lorem Ipsum is simply <span class="Label Label--inline">dummy text</span> of the printing and typesetting industry.
<span>of </span> the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text. Lorem Ipsum has been the industry's standard dummy text.
</p> </p>
``` ```
## Issue labels ## Issue labels
Issue labels are used for adding labels to issues and pull requests. They also come with emoji support. Issue labels are used for adding labels to issues and pull requests. They also come with emoji support.
```html live ```html live
<span class="IssueLabel bg-blue text-white mr-1" title="Label: Primer">Primer</span> <span class="IssueLabel bg-blue text-white mr-1">Primer</span>
<span class="IssueLabel bg-red text-white mr-1" title="Label: bug">bug 🐛</span> <span class="IssueLabel bg-red text-white mr-1">bug 🐛</span>
<span class="IssueLabel bg-pink text-white mr-1" title="Label: help wanted">help wanted</span> <span class="IssueLabel bg-pink text-white mr-1">help wanted</span>
<span class="IssueLabel bg-yellow text-gray-dark mr-1" title="Label: deploy: train">🚂 deploy: train</span> <span class="IssueLabel bg-yellow text-gray-dark mr-1">🚂 deploy: train</span>
``` ```
If an issue label needs to be bigger, add the `.IssueLabel--big` modifier. If an issue label needs to be bigger, add the `.IssueLabel--big` modifier.
```html live ```html live
<span class="IssueLabel IssueLabel--big bg-blue text-white mr-1" title="Label: Primer">Primer</span> <span class="IssueLabel IssueLabel--big bg-blue text-white mr-1">Primer</span>
<span class="IssueLabel IssueLabel--big bg-red text-white mr-1" title="Label: bug">bug 🐛</span> <span class="IssueLabel IssueLabel--big bg-red text-white mr-1">bug 🐛</span>
<span class="IssueLabel IssueLabel--big bg-pink text-white mr-1" title="Label: help wanted">help wanted</span> <span class="IssueLabel IssueLabel--big bg-pink text-white mr-1">help wanted</span>
<span class="IssueLabel IssueLabel--big bg-yellow text-gray-dark mr-1" title="Label: deploy: train">🚂 deploy: train</span> <span class="IssueLabel IssueLabel--big bg-yellow text-gray-dark mr-1">🚂 deploy: train</span>
``` ```
## States ## 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. Use state labels to inform users of an items status. States are large labels with bolded text. The default state has a gray background.
@ -117,37 +108,35 @@ Use state labels to inform users of an items status. States are large labels wit
States come in a few variations that apply different colors. Use the state that best communicates the status or function. States come in a few variations that apply different colors. Use the state that best communicates the status or function.
```html live ```html live
<span class="State State--green mr-2" title="Status: open"> <span class="State State--green mr-2">
<!-- <%= octicon "git-pull-request" %> --> <!-- <%= octicon "git-pull-request" %> -->
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg> <svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
Open Open
</span> </span>
<span class="State State--red mr-2" title="Status: closed"> <span class="State State--red mr-2">
<!-- <%= octicon "git-pull-request" %> --> <!-- <%= octicon "git-pull-request" %> -->
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg> <svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
Closed Closed
</span> </span>
<span class="State State--purple mr-2" title="Status: merged"> <span class="State State--purple mr-2">
<!-- <%= octicon "git-merge" %> --> <!-- <%= octicon "git-merge" %> -->
<svg class="octicon octicon-git-merge" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5 3.254V3.25V3.255C4.99934 3.45369 4.91985 3.64401 4.779 3.78415C4.63815 3.9243 4.44745 4.00283 4.24875 4.0025C4.05006 4.00217 3.85961 3.923 3.71923 3.78239C3.57885 3.64177 3.5 3.45119 3.5 3.2525C3.5 3.0538 3.57885 2.86323 3.71923 2.72261C3.85961 2.58199 4.05006 2.50283 4.24875 2.5025C4.44745 2.50217 4.63815 2.5807 4.779 2.72084C4.91985 2.86099 4.99934 3.0513 5 3.25V3.254ZM5.45 5.154C5.88079 4.8824 6.2067 4.47269 6.37445 3.99186C6.54221 3.51102 6.54188 2.9875 6.37353 2.50687C6.20517 2.02624 5.87875 1.61694 5.44762 1.34588C5.01649 1.07483 4.50616 0.95804 4.00005 1.01462C3.49394 1.0712 3.022 1.2978 2.66137 1.65737C2.30074 2.01695 2.07276 2.48822 2.0147 2.99416C1.95664 3.5001 2.07193 4.01077 2.34173 4.4427C2.61152 4.87462 3.01987 5.20224 3.5 5.372V10.628C2.99931 10.8049 2.57729 11.1532 2.30855 11.6112C2.0398 12.0692 1.94163 12.6075 2.03139 13.1309C2.12114 13.6542 2.39305 14.1291 2.79904 14.4713C3.20503 14.8136 3.71897 15.0014 4.25 15.0014C4.78103 15.0014 5.29496 14.8136 5.70095 14.4713C6.10695 14.1291 6.37885 13.6542 6.46861 13.1309C6.55837 12.6075 6.4602 12.0692 6.19145 11.6112C5.9227 11.1532 5.50069 10.8049 5 10.628V7.123C5.53827 7.71503 6.19447 8.18788 6.92641 8.51114C7.65836 8.8344 8.44985 9.00093 9.25 9H10.628C10.8049 9.50069 11.1532 9.9227 11.6112 10.1915C12.0692 10.4602 12.6075 10.5584 13.1309 10.4686C13.6542 10.3789 14.1291 10.1069 14.4713 9.70096C14.8136 9.29496 15.0014 8.78103 15.0014 8.25C15.0014 7.71897 14.8136 7.20503 14.4713 6.79904C14.1291 6.39305 13.6542 6.12114 13.1309 6.03139C12.6075 5.94163 12.0692 6.0398 11.6112 6.30855C11.1532 6.57729 10.8049 6.99931 10.628 7.5H9.25C8.4613 7.50006 7.68813 7.28066 7.01702 6.86634C6.34592 6.45202 5.80334 5.85912 5.45 5.154ZM12.75 9C12.9489 9 13.1397 8.92098 13.2803 8.78033C13.421 8.63968 13.5 8.44891 13.5 8.25C13.5 8.05109 13.421 7.86032 13.2803 7.71967C13.1397 7.57902 12.9489 7.5 12.75 7.5C12.5511 7.5 12.3603 7.57902 12.2197 7.71967C12.079 7.86032 12 8.05109 12 8.25C12 8.44891 12.079 8.63968 12.2197 8.78033C12.3603 8.92098 12.5511 9 12.75 9ZM4.25 13.5C4.44891 13.5 4.63968 13.421 4.78033 13.2803C4.92098 13.1397 5 12.9489 5 12.75C5 12.5511 4.92098 12.3603 4.78033 12.2197C4.63968 12.079 4.44891 12 4.25 12C4.05109 12 3.86032 12.079 3.71967 12.2197C3.57902 12.3603 3.5 12.5511 3.5 12.75C3.5 12.9489 3.57902 13.1397 3.71967 13.2803C3.86032 13.421 4.05109 13.5 4.25 13.5Z"></path></svg> <svg class="octicon octicon-git-merge" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5 3.254V3.25V3.255C4.99934 3.45369 4.91985 3.64401 4.779 3.78415C4.63815 3.9243 4.44745 4.00283 4.24875 4.0025C4.05006 4.00217 3.85961 3.923 3.71923 3.78239C3.57885 3.64177 3.5 3.45119 3.5 3.2525C3.5 3.0538 3.57885 2.86323 3.71923 2.72261C3.85961 2.58199 4.05006 2.50283 4.24875 2.5025C4.44745 2.50217 4.63815 2.5807 4.779 2.72084C4.91985 2.86099 4.99934 3.0513 5 3.25V3.254ZM5.45 5.154C5.88079 4.8824 6.2067 4.47269 6.37445 3.99186C6.54221 3.51102 6.54188 2.9875 6.37353 2.50687C6.20517 2.02624 5.87875 1.61694 5.44762 1.34588C5.01649 1.07483 4.50616 0.95804 4.00005 1.01462C3.49394 1.0712 3.022 1.2978 2.66137 1.65737C2.30074 2.01695 2.07276 2.48822 2.0147 2.99416C1.95664 3.5001 2.07193 4.01077 2.34173 4.4427C2.61152 4.87462 3.01987 5.20224 3.5 5.372V10.628C2.99931 10.8049 2.57729 11.1532 2.30855 11.6112C2.0398 12.0692 1.94163 12.6075 2.03139 13.1309C2.12114 13.6542 2.39305 14.1291 2.79904 14.4713C3.20503 14.8136 3.71897 15.0014 4.25 15.0014C4.78103 15.0014 5.29496 14.8136 5.70095 14.4713C6.10695 14.1291 6.37885 13.6542 6.46861 13.1309C6.55837 12.6075 6.4602 12.0692 6.19145 11.6112C5.9227 11.1532 5.50069 10.8049 5 10.628V7.123C5.53827 7.71503 6.19447 8.18788 6.92641 8.51114C7.65836 8.8344 8.44985 9.00093 9.25 9H10.628C10.8049 9.50069 11.1532 9.9227 11.6112 10.1915C12.0692 10.4602 12.6075 10.5584 13.1309 10.4686C13.6542 10.3789 14.1291 10.1069 14.4713 9.70096C14.8136 9.29496 15.0014 8.78103 15.0014 8.25C15.0014 7.71897 14.8136 7.20503 14.4713 6.79904C14.1291 6.39305 13.6542 6.12114 13.1309 6.03139C12.6075 5.94163 12.0692 6.0398 11.6112 6.30855C11.1532 6.57729 10.8049 6.99931 10.628 7.5H9.25C8.4613 7.50006 7.68813 7.28066 7.01702 6.86634C6.34592 6.45202 5.80334 5.85912 5.45 5.154ZM12.75 9C12.9489 9 13.1397 8.92098 13.2803 8.78033C13.421 8.63968 13.5 8.44891 13.5 8.25C13.5 8.05109 13.421 7.86032 13.2803 7.71967C13.1397 7.57902 12.9489 7.5 12.75 7.5C12.5511 7.5 12.3603 7.57902 12.2197 7.71967C12.079 7.86032 12 8.05109 12 8.25C12 8.44891 12.079 8.63968 12.2197 8.78033C12.3603 8.92098 12.5511 9 12.75 9ZM4.25 13.5C4.44891 13.5 4.63968 13.421 4.78033 13.2803C4.92098 13.1397 5 12.9489 5 12.75C5 12.5511 4.92098 12.3603 4.78033 12.2197C4.63968 12.079 4.44891 12 4.25 12C4.05109 12 3.86032 12.079 3.71967 12.2197C3.57902 12.3603 3.5 12.5511 3.5 12.75C3.5 12.9489 3.57902 13.1397 3.71967 13.2803C3.86032 13.421 4.05109 13.5 4.25 13.5Z"></path></svg>
Merged Merged
</span> </span>
``` ```
**Note:** Similar to [labels](#labels), you should include the title attribute on states to differentiate them from other content.
### Small states ### Small states
Use `State--small` for a state label with reduced padding a smaller font size. This is useful in denser areas of content. Use `State--small` for a state label with reduced padding a smaller font size. This is useful in denser areas of content.
```html live ```html live
<span class="State State--small mr-2" title="Status: Default">Default</span> <span class="State State--small mr-2">Default</span>
<span class="State State--small State--green mr-2" title="Status: open"> <span class="State State--small State--green mr-2">
<!-- <%= octicon "issue-opened" %> --> <!-- <%= octicon "issue-opened" %> -->
<svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg> <svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg>
Open Open
</span> </span>
<span class="State State--small State--red mr-2" title="Status: closed"> <span class="State State--small State--red mr-2">
<!-- <%= octicon "issue-closed" %> --> <!-- <%= octicon "issue-closed" %> -->
<svg class="octicon octicon-issue-closed" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 10h2v2H7v-2zm2-6H7v5h2V4zm1.5 1.5l-1 1L12 9l4-4.5-1-1L12 7l-1.5-1.5zM8 13.7A5.71 5.71 0 0 1 2.3 8c0-3.14 2.56-5.7 5.7-5.7 1.83 0 3.45.88 4.5 2.2l.92-.92A6.947 6.947 0 0 0 8 1C4.14 1 1 4.14 1 8s3.14 7 7 7 7-3.14 7-7l-1.52 1.52c-.66 2.41-2.86 4.19-5.48 4.19v-.01z"></path></svg> <svg class="octicon octicon-issue-closed" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 10h2v2H7v-2zm2-6H7v5h2V4zm1.5 1.5l-1 1L12 9l4-4.5-1-1L12 7l-1.5-1.5zM8 13.7A5.71 5.71 0 0 1 2.3 8c0-3.14 2.56-5.7 5.7-5.7 1.83 0 3.45.88 4.5 2.2l.92-.92A6.947 6.947 0 0 0 8 1C4.14 1 1 4.14 1 8s3.14 7 7 7 7-3.14 7-7l-1.52 1.52c-.66 2.41-2.86 4.19-5.48 4.19v-.01z"></path></svg>
Closed Closed

6
docs/content/components/navigation.md
View File

@ -256,7 +256,7 @@ Different kind of content can be added inside a Side Nav item. Use utility class
</svg> </svg>
</a> </a>
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url"> <a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
With a label <span class="Label bg-blue" title="Label: label">label</span> With a label <span class="Label bg-blue">label</span>
</a> </a>
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url"> <a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
With a counter <span class="Counter ml-1">16</span> With a counter <span class="Counter ml-1">16</span>
@ -404,13 +404,13 @@ A vertical list of filters. Grey text on white background. Selecting a filter fr
<li> <li>
<a class="filter-item" href="#url" aria-current="page"> <a class="filter-item" href="#url" aria-current="page">
First filter First filter
<span class="count" title="results">21</span> <span class="count">21</span>
</a> </a>
</li> </li>
<li> <li>
<a class="filter-item" href="#url"> <a class="filter-item" href="#url">
Second filter Second filter
<span class="count" title="results">3</span> <span class="count">3</span>
</a> </a>
</li> </li>
<li> <li>

6
docs/content/components/select-menu.md
View File

@ -210,9 +210,7 @@ The list of items is arguably the most important subcomponent within the menu. B
<path fill-rule="evenodd" d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z" /> <path fill-rule="evenodd" d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z" />
</svg> </svg>
</button> </button>
<button class="SelectMenu-item d-block" role="menuitem"> <button class="SelectMenu-item d-block" role="menuitem">With a <span class="Label bg-blue">label</span></button>
With a <span class="Label bg-blue" title="Label: label">label</span>
</button>
<button class="SelectMenu-item" role="menuitem"> <button class="SelectMenu-item" role="menuitem">
With a counter <span class="Counter bg-gray-2 ml-1">16</span> With a counter <span class="Counter bg-gray-2 ml-1">16</span>
</button> </button>
@ -583,7 +581,7 @@ When adding the `.SelectMenu` component on github.com, use the [`<details-menu>`
```erb ```erb
<details class="details-reset details-overlay" id="my-select-menu"> <details class="details-reset details-overlay" id="my-select-menu">
<summary class="btn" title="Pick an item"> <summary class="btn">
<span>Choose</span> <span>Choose</span>
<span class="dropdown-caret"></span> <span class="dropdown-caret"></span>
</summary> </summary>

15
docs/content/components/truncate.md
View File

@ -6,8 +6,7 @@ source: 'https://github.com/primer/css/tree/master/src/truncate'
bundle: truncate bundle: truncate
--- ---
The `css-truncate` class will shorten text with an ellipsis.
The `css-truncate` class will shorten text with an ellipsis. Always add a `title` attribute to the truncated element so the full text remains accessible.
## Truncate overflow ## Truncate overflow
@ -15,8 +14,7 @@ Combine the `css-truncate` and `css-truncate-overflow` classes to prevent text t
```html live ```html live
<div class="col-3"> <div class="col-3">
<div class="css-truncate css-truncate-overflow border p-3" <div class="css-truncate css-truncate-overflow border p-3">
title="branch-name-that-is-really-long">
branch-name-that-is-really-long branch-name-that-is-really-long
</div> </div>
<div class="border p-3 mt-3"> <div class="border p-3 mt-3">
@ -31,8 +29,7 @@ Combine the `css-truncate` and `css-truncate-target` classes for inline (or inli
```html live ```html live
Some text with a Some text with a
<strong class="css-truncate css-truncate-target" <strong class="css-truncate css-truncate-target">
title="branch-name-that-is-really-long">
branch-name-that-is-really-long branch-name-that-is-really-long
</strong> </strong>
``` ```
@ -41,8 +38,7 @@ You can override the maximum width of the truncated text with an inline `style`
```html live ```html live
Some text with a Some text with a
<strong class="css-truncate css-truncate-target" style="max-width: 180px" <strong class="css-truncate css-truncate-target" style="max-width: 180px">
title="branch-name-that-is-really-long">
branch-name-that-is-really-long branch-name-that-is-really-long
</strong> </strong>
``` ```
@ -51,8 +47,7 @@ You can reveal the entire string on hover with the addition of `.expandable`.
```html live ```html live
Some text with a Some text with a
<strong class="css-truncate css-truncate-target expandable" <strong class="css-truncate css-truncate-target expandable">
title="branch-name-that-is-really-long">
branch-name-that-is-really-long branch-name-that-is-really-long
</strong> </strong>
``` ```

6
docs/content/principles/accessibility.md
View File

@ -104,12 +104,6 @@ Make sure text-based alternative is always available when using icons, images, a
<p>To find out more about GitHub Enterprise pricing, <a href="#url">click here</a>.</p> <p>To find out more about GitHub Enterprise pricing, <a href="#url">click here</a>.</p>
``` ```
Use `title` to add information on top of existing content.
```html
<a title="@octocat's repositories" href="https://github.com/octocat?tab=repositories">octocat</a>
```
Use `aria-label` when there is no text. Use `aria-label` when there is no text.
```html ```html

10
docs/content/stickersheet/labels.md
View File

@ -61,12 +61,12 @@ The base <span class="Label Label--inline"> label </span> component styles the t
```html live ```html live
<span class="State mr-2">Default</span> <span class="State mr-2">Default</span>
<span class="State State--green mr-2" title="Status: open"> <span class="State State--green mr-2">
<!-- <%= octicon "git-pull-request" %> --> <!-- <%= octicon "git-pull-request" %> -->
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg> <svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
Open Open
</span> </span>
<span class="State State--red mr-2" title="Status: closed"> <span class="State State--red mr-2">
<!-- <%= octicon "git-pull-request" %> --> <!-- <%= octicon "git-pull-request" %> -->
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg> <svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
Closed Closed
@ -74,13 +74,13 @@ The base <span class="Label Label--inline"> label </span> component styles the t
<div class="my-3"></div><!-- Spacer ------------------------ --> <div class="my-3"></div><!-- Spacer ------------------------ -->
<span class="State State--small mr-2" title="Status: Default">Default</span> <span class="State State--small mr-2">Default</span>
<span class="State State--small State--green mr-2" title="Status: open"> <span class="State State--small State--green mr-2">
<!-- <%= octicon "issue-opened" %> --> <!-- <%= octicon "issue-opened" %> -->
<svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg> <svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg>
Open Open
</span> </span>
<span class="State State--small State--red mr-2" title="Status: closed"> <span class="State State--small State--red mr-2">
<!-- <%= octicon "issue-closed" %> --> <!-- <%= octicon "issue-closed" %> -->
<svg class="octicon octicon-issue-closed" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 10h2v2H7v-2zm2-6H7v5h2V4zm1.5 1.5l-1 1L12 9l4-4.5-1-1L12 7l-1.5-1.5zM8 13.7A5.71 5.71 0 0 1 2.3 8c0-3.14 2.56-5.7 5.7-5.7 1.83 0 3.45.88 4.5 2.2l.92-.92A6.947 6.947 0 0 0 8 1C4.14 1 1 4.14 1 8s3.14 7 7 7 7-3.14 7-7l-1.52 1.52c-.66 2.41-2.86 4.19-5.48 4.19v-.01z"></path></svg> <svg class="octicon octicon-issue-closed" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 10h2v2H7v-2zm2-6H7v5h2V4zm1.5 1.5l-1 1L12 9l4-4.5-1-1L12 7l-1.5-1.5zM8 13.7A5.71 5.71 0 0 1 2.3 8c0-3.14 2.56-5.7 5.7-5.7 1.83 0 3.45.88 4.5 2.2l.92-.92A6.947 6.947 0 0 0 8 1C4.14 1 1 4.14 1 8s3.14 7 7 7 7-3.14 7-7l-1.52 1.52c-.66 2.41-2.86 4.19-5.48 4.19v-.01z"></path></svg>
Closed Closed