Merge pull request #1038 from primer/next-nav

Refresh navigation
primer · Feb 26, 2020 · f5d2e10 · f5d2e10
2 parents 0dbb09a + e85d6c7
commit f5d2e10
Show file tree

Hide file tree

Showing 10 changed files with 192 additions and 268 deletions.
diff --git a/docs/content/components/navigation.md b/docs/content/components/navigation.md
diff --git a/docs/content/components/pagination.md b/docs/content/components/pagination.md
@@ -15,8 +15,16 @@ 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">Previous</span>
-    <a class="next_page" rel="next" href="#url" aria-label="Next Page">Next</a>
+    <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>
   </div>
 </nav>
 ```
@@ -35,15 +43,23 @@ 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">Previous</span>
+    <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>
     <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</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>
   </div>
 </nav>
 ```
diff --git a/src/labels/counters.scss b/src/labels/counters.scss
@@ -1,8 +1,9 @@
 // Counters are rounded-corner badges for numbers
 .Counter {
   display: inline-block;
-  min-width: 24px; // makes sure it's a circle with just one digit
-  padding: $spacer-1 $spacer-2;
+  min-width: 20px; // makes sure it's a circle with just one digit
+  // stylelint-disable-next-line primer/spacing
+  padding: 2px 6px;
   font-size: $font-size-small;
   // stylelint-disable-next-line primer/typography
   font-weight: 500;
@@ -33,11 +34,3 @@
   // stylelint-disable-next-line primer/colors
   background-color: $gray-500;
 }
-
-// Small
-
-.Counter--small {
-  min-width: 20px; // makes sure it's a circle with just one digit
-  // stylelint-disable-next-line primer/spacing
-  padding: 2px 6px;
-}
diff --git a/src/navigation/filter-list.scss b/src/navigation/filter-list.scss
@@ -5,9 +5,8 @@
   list-style-type: none;
 
   &.small .filter-item {
-    padding: $spacer-1 10px;
     // stylelint-disable-next-line primer/spacing
-    margin: 0 0 2px;
+    padding: 6px 12px;
     font-size: $font-size-small;
   }
 
@@ -25,9 +24,8 @@
 .filter-item {
   position: relative;
   display: block;
-  padding: $spacer-2 10px;
-  // stylelint-disable-next-line primer/spacing
-  margin-bottom: 5px;
+  padding: $spacer-2 $spacer-3;
+  margin-bottom: $spacer-1;
   overflow: hidden;
   font-size: $h5-size;
   color: $text-gray;
@@ -39,8 +37,7 @@
 
   &:hover {
     text-decoration: none;
-    // stylelint-disable-next-line primer/colors
-    background-color: lighten($gray-200, 3%);
+    background-color: $bg-gray;
   }
 
   &.selected,

diff --git a/src/navigation/menu.scss b/src/navigation/menu.scss
@@ -3,54 +3,55 @@
 // A menu on the side of a page, defaults to left side. e.g. github.com/about
 
 .menu {
-  // stylelint-disable-next-line primer/spacing
-  margin-bottom: 15px;
+  margin-bottom: $spacer-3;
   list-style: none;
   background-color: $bg-white;
-  border: $border-width $border-style $border-gray-dark;
+  border: $border;
   border-radius: $border-radius;
 }
 
 .menu-item {
   position: relative;
   display: block;
-  padding: $spacer-2 10px;
-  border-bottom: $border;
+  // stylelint-disable-next-line primer/spacing
+  padding: 12px $spacer-3;
+  color: $text-black;
+  border-bottom: $border-width $border-style $border-gray-light;
 
   &:first-child {
     border-top: 0;
-    // stylelint-disable-next-line primer/borders
-    border-top-left-radius: 2px;
-    // stylelint-disable-next-line primer/borders
-    border-top-right-radius: 2px;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
 
-    // stylelint-disable-next-line primer/borders
-    &::before { border-top-left-radius: 2px; }
+    &::before { border-top-left-radius: $border-radius; }
   }
 
   &:last-child {
     border-bottom: 0;
-    // stylelint-disable-next-line primer/borders
-    border-bottom-right-radius: 2px;
-    // stylelint-disable-next-line primer/borders
-    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
 
-    // stylelint-disable-next-line primer/borders
-    &::before { border-bottom-left-radius: 2px; }
+    &::before { border-bottom-left-radius: $border-radius; }
   }
 
+  &:focus,
   &:hover {
     text-decoration: none;
-    background-color: $bg-gray;
+    // stylelint-disable-next-line primer/colors
+    background-color: $gray-100;
+    outline: none;
+  }
+
+  &:active {
+    background-color: $bg-gray-light;
   }
 
   &.selected,
   &[aria-selected=true],
   &[aria-current] {
-    font-weight: $font-weight-bold;
-    color: $text-gray-dark;
     cursor: default;
-    background-color: $bg-white;
+    // stylelint-disable-next-line primer/colors
+    background-color: $orange-000;
 
     &::before {
       position: absolute;
@@ -60,22 +61,21 @@
       width: 2px;
       content: "";
       // stylelint-disable-next-line primer/colors
-      background-color: $orange-600;
+      background-color: $orange-500;
     }
   }
 
   .octicon {
     width: 16px;
-    // stylelint-disable-next-line primer/spacing
-    margin-right: 5px;
-    color: $text-gray-dark;
+    margin-right: $spacer-2;
+    // stylelint-disable-next-line primer/colors
+    color: $gray-400;
     text-align: center;
   }
 
   .Counter {
     float: right;
-    // stylelint-disable-next-line primer/spacing
-    margin-left: 5px;
+    margin-left: $spacer-1;
   }
 
   .menu-warning {
@@ -86,8 +86,7 @@
 
   .avatar {
     float: left;
-    // stylelint-disable-next-line primer/spacing
-    margin-right: 5px;
+    margin-right: $spacer-1;
   }
 
   &.alert {
@@ -99,35 +98,28 @@
 
 .menu-heading {
   display: block;
-  padding: $spacer-2 10px;
+  padding: $spacer-1 $spacer-3;
   margin-top: 0;
   margin-bottom: 0;
   // stylelint-disable-next-line primer/typography
-  font-size: 13px;
-  font-weight: $font-weight-bold;
+  font-weight: 500;
   // stylelint-disable-next-line primer/typography
-  line-height: 20px;
-  color: $text-gray;
-  // stylelint-disable-next-line primer/colors
-  background-color: darken($gray-100, 1%);
-  border-bottom: $border;
+  line-height: 23px;
+  color: $text-black;
+  border-bottom: $border-width $border-style $border-gray-light;
 
   &:hover {
     text-decoration: none;
   }
 
   &:first-child {
-    // stylelint-disable-next-line primer/borders
-    border-top-left-radius: 2px;
-    // stylelint-disable-next-line primer/borders
-    border-top-right-radius: 2px;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
   }
 
   &:last-child {
     border-bottom: 0;
-    // stylelint-disable-next-line primer/borders
-    border-bottom-right-radius: 2px;
-    // stylelint-disable-next-line primer/borders
-    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
   }
 }
diff --git a/src/navigation/sidenav.scss b/src/navigation/sidenav.scss
@@ -10,12 +10,13 @@
   position: relative;
   display: block;
   width: 100%;
-  padding: $spacer-3;
-  color: $text-gray;
+  // stylelint-disable-next-line primer/spacing
+  padding: 12px $spacer-3;
+  color: $text-black;
   text-align: left;
   background-color: transparent;
   border: 0;
-  border-top: $border;
+  border-top: $border-width $border-style $border-gray-light;
 
   &:first-child {
     border-top: 0;
@@ -34,7 +35,7 @@
     bottom: 0;
     left: 0;
     z-index: 1;
-    width: 3px;
+    width: 2px;
     pointer-events: none;
     content: "";
   }
@@ -44,32 +45,24 @@
 
 .SideNav-item:hover,
 .SideNav-item:focus {
-  color: $text-gray-dark;
   text-decoration: none;
-  background-color: $bg-gray;
+  // stylelint-disable-next-line primer/colors
+  background-color: $gray-100;
   outline: none;
-
-  // Bar on the left
-  &::before {
-    // stylelint-disable-next-line primer/colors
-    background-color: $gray-300;
-  }
 }
 
 .SideNav-item:active {
-  background-color: $bg-white;
+  background-color: $bg-gray-light;
 }
 
 .SideNav-item[aria-current="page"],
 .SideNav-item[aria-selected="true"] {
-  font-weight: $font-weight-semibold;
-  color: $text-gray-dark;
   background-color: $bg-white;
 
   // Bar on the left
   &::before {
     // stylelint-disable-next-line primer/colors
-    background-color: $orange-600;
+    background-color: $orange-500;
   }
 }
 
@@ -79,6 +72,7 @@
 
 .SideNav-icon {
   width: 16px;
+  margin-right: $spacer-2;
   color: $text-gray-light;
 }
 

diff --git a/src/navigation/subnav.scss b/src/navigation/subnav.scss
@@ -21,11 +21,12 @@
   position: relative;
   float: left;
   // stylelint-disable-next-line primer/spacing
-  padding: 6px 14px;
-  font-weight: $font-weight-bold;
+  padding: 6px $spacer-3;
+  // stylelint-disable-next-line primer/typography
+  font-weight: 500;
   // stylelint-disable-next-line primer/typography
   line-height: 20px;
-  color: $text-gray;
+  color: $text-gray-dark;
   border: $border;
 
   + .subnav-item {
@@ -46,7 +47,7 @@
     color: $text-white;
     background-color: $bg-blue;
     // stylelint-disable-next-line primer/borders
-    border-color: $blue;
+    border-color: $blue-600;
   }
 
   &:first-child {
@@ -63,13 +64,12 @@
 .subnav-search {
   position: relative;
   // stylelint-disable-next-line primer/spacing
-  margin-left: 10px;
+  margin-left: 12px;
 }
 
 .subnav-search-input {
   width: 320px;
-  // stylelint-disable-next-line primer/spacing
-  padding-left: 30px;
+  padding-left: $spacer-5;
   color: $text-gray;
 }
 
@@ -83,7 +83,7 @@
   left: 8px;
   display: block;
   // stylelint-disable-next-line primer/colors
-  color: darken($gray-300, 4%);
+  color: $gray-400;
   text-align: center;
   pointer-events: none;
 }
@@ -128,5 +128,5 @@
 
 .subnav-spacer-right {
   // stylelint-disable-next-line primer/spacing
-  padding-right: 10px;
+  padding-right: 12px;
 }