Skip to content

Commit 736361f

Browse files
simuraisimurai
authored
Merge pull request #1041 from primer/next-polish
Refresh polish ✨
2 parents 0826b44 + 02c5ef6 commit 736361f

23 files changed

+657
-269
lines changed

‎docs/content/components/avatars.md

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,30 @@ Add `.avatar` to any `<img>` element to make it an avatar. This resets some key
1515
Be sure to set `width` and `height` attributes for maximum browser performance.
1616

1717
```html live
18-
<img class="avatar" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=144" width="72" height="72" />
18+
<img class="avatar" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=96" width="48" height="48" />
1919
```
2020

2121
### Small avatars
2222

23-
We occasionally use smaller avatars. Anything less than `48px` wide should include the `.avatar-small` modifier class to reset the `border-radius` to a more appropriate level.
23+
We occasionally use smaller avatars. Anything less than `24px` wide should include the `.avatar-small` modifier class to reset the `border-radius` to a more appropriate level.
2424

2525
```html live
26-
<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=64" width="32" height="32" />
26+
<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" />
27+
```
28+
29+
### Avatar sizes
30+
31+
Instead of using the `width` and `height` attribute, you can also use a class like `.avatar-[1-8]`. The sizes go from `16px` up to `64px`. Note: Avatar stacks are only suppurted for the `20px` avatar size.
32+
33+
```html live
34+
<img class="avatar avatar-1 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=32" />
35+
<img class="avatar avatar-2 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" />
36+
<img class="avatar avatar-3 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=48" />
37+
<img class="avatar avatar-4 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=56" />
38+
<img class="avatar avatar-5 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=64" />
39+
<img class="avatar avatar-6 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=80" />
40+
<img class="avatar avatar-7 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=96" />
41+
<img class="avatar avatar-8 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=128" />
2742
```
2843

2944
### Parent-child avatars

‎docs/content/components/buttons.md

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ Icon-only buttons that turn blue on hover. Use `.btn-octicon-danger` to turn an
147147
<svg class="octicon octicon-trashcan" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path></svg>
148148
</button>
149149

150-
<button class="btn-octicon" type="button" aria-label="Trashcan icon">
150+
<button class="btn-octicon" type="button" aria-label="Kebab icon">
151151
<!-- <%= octicon "kebab-horizontal" %> -->
152152
<svg class="octicon octicon-kebab-horizontal" viewBox="0 0 13 16" version="1.1" width="13" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm5 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM13 7.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"></path></svg>
153153
</button>
@@ -190,11 +190,16 @@ Icons can be added to any button.
190190
<span>Delete</span>
191191
</button>
192192

193-
<button class="btn btn-outline" type="button">
193+
<button class="btn btn-outline mr-2" type="button">
194194
<!-- <%= octicon "device-desktop" %> -->
195195
<svg class="octicon octicon-device-desktop" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M15 2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 9H1V3h14v8z"></path></svg>
196196
<span>Open in Desktop</span>
197197
</button>
198+
199+
<button class="btn" type="button" aria-label="Pencil icon">
200+
<!-- <%= octicon "pencil" %> -->
201+
<svg class="octicon octicon-pencil" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 011.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"></path></svg>
202+
</button>
198203
```
199204

200205
## Button with counts

‎docs/content/components/forms.md

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -76,12 +76,17 @@ Textual form controls have a white background by default. You can change this to
7676
```html live
7777
<form>
7878
<input class="form-control" type="text" placeholder="Default input" aria-label="Default input" />
79-
<input
80-
class="form-control input-contrast"
81-
type="text"
82-
placeholder="Input with contrast"
83-
aria-label="Input with contrast"
84-
/>
79+
<input class="form-control input-contrast" type="text" placeholder="Input with contrast" aria-label="Input with contrast" />
80+
</form>
81+
```
82+
83+
#### Disabled state
84+
85+
Add the `disabled` attribute to make a `.form-control` appear disabled.
86+
87+
```html live
88+
<form>
89+
<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input" disabled />
8590
</form>
8691
```
8792

‎docs/content/components/labels.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,27 @@ Labels come in a few different themes. Use a theme that helps communicate the co
6060

6161
Note: Avoid using `Label--orange` next to `Label--red` since most people will find it hard to tell the difference.
6262

63+
### Label sizes
64+
65+
If space allows, add the `Label--large` modidfier to add a bit more padding to lables.
66+
67+
```html live
68+
<span class="Label Label--gray-darker mr-1" title="Label: Default">Default</span>
69+
<span class="Label Label--large Label--gray-darker mr-1" title="Label: Large">Large</span>
70+
```
71+
72+
### Inline labels
73+
74+
Sometimes when adding a label the line-height can be incrased. Or the parent element increases in height. If that is not desired, use the `Label--inline` modifier change to the `display` property to `inline`. The font-size also adapts.
75+
76+
```html live
77+
<p class="col-4">
78+
Lorem Ipsum is simply <span class="Label Label--inline" title="Label: dummy">dummy text</span>
79+
<span>of </span> the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
80+
</p>
81+
```
82+
83+
6384
## Issue labels
6485

6586
Issue labels are used for adding labels to issues and pull requests. They also come with emoji support.

‎docs/content/stickersheet/index.md

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
---
2+
title: Sticker Sheet
3+
path: stickersheet/index
4+
---
5+
6+
7+
### Sizes
8+
9+
```html live
10+
11+
<span class="d-inline-block col-1 text-gray-light">16px</span>
12+
<img class="mr-3 avatar avatar-1" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
13+
<!-- <%= octicon "comment" %> -->
14+
<svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg>
15+
16+
17+
<div class="my-4"></div><!-- Spacer ------------------------ -->
18+
19+
<span class="d-inline-block col-1 text-gray-light">20px</span>
20+
<img class="mr-3 avatar avatar-2" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
21+
<span class="mr-3 Label">Label</span>
22+
<span class="mr-3 IssueLabel bg-pink text-white">IssueLabel</span>
23+
<span class="mr-3 Counter">1.5K</span>
24+
25+
26+
<div class="my-4"></div><!-- Spacer ------------------------ -->
27+
28+
<span class="d-inline-block col-1 text-gray-light">24px</span>
29+
<img class="mr-3 avatar avatar-3" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
30+
<span class="mr-3 Label Label--large">Label</span>
31+
<span class="mr-3 IssueLabel IssueLabel--big bg-purple text-white">IssueLabel</span>
32+
<span class="mr-3 State State--small">State</span>
33+
34+
35+
<div class="my-4"></div><!-- Spacer ------------------------ -->
36+
37+
<span class="d-inline-block col-1 text-gray-light">28px</span>
38+
<img class="mr-3 avatar avatar-4" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
39+
<button class="mr-3 btn btn-sm" type="button">Button</button>
40+
<input class="mr-3 form-control input-sm" type="text" placeholder="Input" />
41+
<select class="mr-3 form-select select-sm"><option>Select</option><option value="option 2">Option 2</option></select>
42+
43+
<div class="my-4"></div><!-- Spacer ------------------------ -->
44+
45+
<span class="d-inline-block col-1 text-gray-light">32px</span>
46+
<img class="mr-3 avatar avatar-5" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
47+
<button class="mr-3 btn" type="button">Button</button>
48+
<input class="mr-3 form-control" type="text" placeholder="Input" />
49+
<select class="mr-3 form-select"><option>Select</option><option value="option 2">Option 2</option></select>
50+
<nav class="mr-3 subnav d-inline-block v-align-middle mb-0">
51+
<a class="subnav-item" href="#url" aria-current="page">Filter 1</a>
52+
<a class="subnav-item" href="#url">Filter 2</a>
53+
</nav>
54+
<span class="mr-3 State">State</span>
55+
56+
<div class="my-4"></div><!-- Spacer ------------------------ -->
57+
58+
<span class="d-inline-block col-1 text-gray-light">40px</span>
59+
<img class="mr-3 avatar avatar-6" src="https://avatars.githubusercontent.com/jonrohan?s=80" />
60+
<div class="mr-3 tabnav d-inline-block v-align-middle mb-0">
61+
<nav class="tabnav-tabs">
62+
<a class="tabnav-tab" href="#url" aria-current="page">Tab 1</a>
63+
<a class="tabnav-tab" href="#url">Tab 2</a>
64+
<a class="tabnav-tab" href="#url">Tab 3</a>
65+
<a class="tabnav-tab" href="#url">Tab 4</a>
66+
</nav>
67+
</div>
68+
69+
<div class="my-4"></div><!-- Spacer ------------------------ -->
70+
71+
<span class="d-inline-block col-1 text-gray-light">48px</span>
72+
<img class="mr-3 avatar avatar-7" src="https://avatars.githubusercontent.com/jonrohan?s=96" />
73+
<nav class="mr-3 UnderlineNav d-inline-block v-align-middle">
74+
<div class="UnderlineNav-body">
75+
<button class="UnderlineNav-item" type="button" role="tab" aria-selected="true">Nav 1</button>
76+
<button class="UnderlineNav-item" role="tab" type="button">Nav 2</button>
77+
<button class="UnderlineNav-item" role="tab" type="button">Nav 3</button>
78+
</div>
79+
</nav>
80+
<div class="mr-3 flash d-inline-block v-align-middle">Flash alert</div>
81+
82+
<div class="my-4"></div><!-- Spacer ------------------------ -->
83+
84+
<span class="d-inline-block col-1 text-gray-light">64px</span>
85+
<img class="mr-3 avatar avatar-8" src="https://avatars.githubusercontent.com/jonrohan?s=128" />
86+
<div class="mr-3 Header d-inline-block v-align-middle">
87+
<div class="Header-item">
88+
<a href="#" class="Header-link f4 d-flex flex-items-center">
89+
<!-- <%= octicon "mark-github", class: "mr-2", height: 32 %> -->
90+
<svg height="32" class="octicon octicon-mark-github mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
91+
<span>Header</span>
92+
</a>
93+
</div>
94+
</div>
95+
96+
```

0 commit comments

Comments
 (0)