Merge pull request #1077 from primer/next-7

Component refresh 7
primer · May 8, 2020 · 4467910 · 4467910
2 parents 0ee8139 + ef251c7
commit 4467910
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 27 deletions.
diff --git a/docs/content/components/alerts.md b/docs/content/components/alerts.md
@@ -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>
 ```
 

diff --git a/docs/content/components/pagination.md b/docs/content/components/pagination.md
@@ -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>
 ```
@@ -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>
 ```
diff --git a/src/alerts/flash.scss b/src/alerts/flash.scss
@@ -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;
@@ -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;
 }

diff --git a/src/labels/states.scss b/src/labels/states.scss
@@ -28,8 +28,7 @@
 }
 
 .State--green {
-  // stylelint-disable-next-line primer/colors
-  background-color: #159739; // custom green
+  background-color: $bg-green;
 }
 
 .State--red {

diff --git a/src/pagination/pagination.scss b/src/pagination/pagination.scss
@@ -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