Skip to content

Component refresh 7 #1077

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
simurai merged 4 commits into from
May 8, 2020
Merged

Component refresh 7 #1077

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
67ddeae
Use px-3 for flash alerts
simurai May 5, 2020
2d26108
Add chevrons to pagination
simurai May 5, 2020
29e506c
Use clip-path for chevron icons
simurai May 5, 2020
ef251c7
Use default $bg-green for states
simurai May 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions docs/content/components/alerts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,9 +172,7 @@ A flash message that is full width and removes border and border radius.

```html live
<div class="flash flash-full">
<div class="container">
Full width flash message.
</div>
Full width flash message.
</div>
```

Expand Down
24 changes: 4 additions & 20 deletions docs/content/components/pagination.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,8 @@ You can make a very simple pagination container with just the Previous and Next
```html live
<nav class="paginate-container" aria-label="Pagination">
<div class="pagination">
<span class="previous_page" aria-disabled="true">
<!-- <%= octicon "chevron-left mr-1" %> -->
<svg class="octicon octicon-chevron-left mr-1" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M9.78033 12.7803C9.48744 13.0732 9.01256 13.0732 8.71967 12.7803L4.46967 8.53033C4.17678 8.23744 4.17678 7.76256 4.46967 7.46967L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L6.06066 8L9.78033 11.7197C10.0732 12.0126 10.0732 12.4874 9.78033 12.7803Z"></path></svg>
Previous
</span>
<a class="next_page" rel="next" href="#url" aria-label="Next Page">
Next
<!-- <%= octicon "chevron-right ml-1" %> -->
<svg class="octicon octicon-chevron-right ml-1" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.21967 3.21967C6.51256 2.92678 6.98744 2.92678 7.28033 3.21967L11.5303 7.46967C11.8232 7.76256 11.8232 8.23744 11.5303 8.53033L7.28033 12.7803C6.98744 13.0732 6.51256 13.0732 6.21967 12.7803C5.92678 12.4874 5.92678 12.0126 6.21967 11.7197L9.93934 8L6.21967 4.28033C5.92678 3.98744 5.92678 3.51256 6.21967 3.21967Z"></path></svg>
</a>
<span class="previous_page" aria-disabled="true">Previous</span>
<a class="next_page" rel="next" href="#url" aria-label="Next Page">Next</a>
</div>
</nav>
```
Expand All @@ -43,23 +35,15 @@ As always, make sure to include the appropriate `aria` attributes to make the el
```html live
<nav class="paginate-container" aria-label="Pagination">
<div class="pagination">
<span class="previous_page" aria-disabled="true">
<!-- <%= octicon "chevron-left mr-1" %> -->
<svg class="octicon octicon-chevron-left mr-1" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M9.78033 12.7803C9.48744 13.0732 9.01256 13.0732 8.71967 12.7803L4.46967 8.53033C4.17678 8.23744 4.17678 7.76256 4.46967 7.46967L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L6.06066 8L9.78033 11.7197C10.0732 12.0126 10.0732 12.4874 9.78033 12.7803Z"></path></svg>
Previous
</span>
<span class="previous_page" aria-disabled="true">Previous</span>
<em aria-current="page">1</em>
<a href="#url" aria-label="Page 2">2</a>
<a href="#url" aria-label="Page 3">3</a>
<span class="gap">…</span>
<a href="#url" aria-label="Page 8">8</a>
<a href="#url" aria-label="Page 9">9</a>
<a href="#url" aria-label="Page 10">10</a>
<a class="next_page" rel="next" href="#url" aria-label="Next Page">
Next
<!-- <%= octicon "chevron-right ml-1" %> -->
<svg class="octicon octicon-chevron-right ml-1" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.21967 3.21967C6.51256 2.92678 6.98744 2.92678 7.28033 3.21967L11.5303 7.46967C11.8232 7.76256 11.8232 8.23744 11.5303 8.53033L7.28033 12.7803C6.98744 13.0732 6.51256 13.0732 6.21967 12.7803C5.92678 12.4874 5.92678 12.0126 6.21967 11.7197L9.93934 8L6.21967 4.28033C5.92678 3.98744 5.92678 3.51256 6.21967 3.21967Z"></path></svg>
</a>
<a class="next_page" rel="next" href="#url" aria-label="Next Page">Next</a>
</div>
</nav>
```
3 changes: 1 addition & 2 deletions src/alerts/flash.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
.flash {
position: relative;
// stylelint-disable-next-line primer/spacing
padding: 20px $spacer-4;
padding: 20px $spacer-3;
color: $text-gray-dark;
border-style: $border-style;
border-width: $border-width;
Expand Down Expand Up @@ -56,7 +56,6 @@
float: right;
// stylelint-disable-next-line primer/spacing
margin-top: -3px;
margin-right: -$spacer-2;
margin-left: $spacer-4;
background-clip: padding-box;
}
Expand Down
3 changes: 1 addition & 2 deletions src/labels/states.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,7 @@
}

.State--green {
// stylelint-disable-next-line primer/colors
background-color: #159739; // custom green
background-color: $bg-green;
}

.State--red {
Expand Down
26 changes: 26 additions & 0 deletions src/pagination/pagination.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,32 @@
cursor: default;
border-color: transparent;
}

// chevron icons using clip-path
@supports (clip-path: polygon(50% 0, 100% 50%, 50% 100%)) {
.previous_page::before,
.next_page::after {
display: inline-block;
width: 16px;
height: 16px;
vertical-align: text-bottom;
content: "";
// stylelint-disable-next-line primer/colors
background-color: currentColor;
}

// chevron-left
.previous_page::before {
margin-right: $spacer-1;
clip-path: polygon(9.8px 12.8px, 8.7px 12.8px, 4.5px 8.5px, 4.5px 7.5px, 8.7px 3.2px, 9.8px 4.3px, 6.1px 8px, 9.8px 11.7px, 9.8px 12.8px);
}

// chevron-right
.next_page::after {
margin-left: $spacer-1;
clip-path: polygon(6.2px 3.2px, 7.3px 3.2px, 11.5px 7.5px, 11.5px 8.5px, 7.3px 12.8px, 6.2px 11.7px, 9.9px 8px, 6.2px 4.3px, 6.2px 3.2px);
}
}
}

// Unified centered pagination across the site
Expand Down