Pagination design updates (#2702)

* updates pagination styles to match latest token usage patterns, and updates ARIA markup

* adds changeset

* Create .changeset/long-bags-double.md

---------

Co-authored-by: Cole Bemis <colebemis@github.com>

Author: mperrotti

.changeset/long-bags-double.md

@@ -0,0 +1,8 @@
+---
+"@primer/react": patch
+---
+
+Pagination design updates:
+- Updates spacing inside of the buttons to match the "medium" control metrics: https://primer.style/primitives/spacing#medium
+- Updates hover style to align with ActionList items and other elements that may appear on any background color
+- Updates ARIA markup to improve assistive technology experience

.changeset/sour-melons-wait.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Updates the visual design of the Pagination component to align with the latest design token usage patterns. Also improves ARIA markup to hide the "..." from assistive technologies.

src/Pagination/Pagination.tsx

@@ -8,10 +8,11 @@ import {buildComponentData, buildPaginationModel} from './model'
 
 const Page = styled.a`
   display: inline-block;
-  min-width: 32px;
-  padding: 5px 10px;
+  min-width: 32px; /* primer.control.medium.size */
+  height: 32px; /* primer.control.medium.size */
+  padding: 0.5rem calc((2rem - 1.25rem) / 2); /* primer.control.medium.paddingInline.condensed primer.control.medium.paddingBlock */
   font-style: normal;
-  line-height: 20px;
+  line-height: 1;
   color: ${get('colors.fg.default')};
   text-align: center;
   white-space: nowrap;
@@ -26,14 +27,14 @@ const Page = styled.a`
     margin-right: 0;
   }
 
-  border: ${get('borderWidths.1')} solid transparent;
+  background-color: transparent;
   border-radius: ${get('radii.2')};
-  transition: border-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
 
   &:hover,
   &:focus {
     text-decoration: none;
-    border-color: ${get('colors.border.default')};
+    background-color: ${get('colors.actionListItem.default.hoverBg')};
     outline: 0;
     transition-duration: 0.1s;
   }
@@ -57,10 +58,12 @@ const Page = styled.a`
   }
 
   &[aria-disabled],
-  &[aria-disabled]:hover {
+  &[aria-disabled]:hover,
+  &[role='presentation'],
+  &[role='presentation']:hover {
     color: ${get('colors.primer.fg.disabled')}; // check
     cursor: default;
-    border-color: transparent;
+    background-color: transparent;
   }
 
   @supports (clip-path: polygon(50% 0, 100% 50%, 50% 100%)) {

src/Pagination/model.tsx

@@ -179,7 +179,7 @@ export function buildComponentData(
     case 'BREAK': {
       key = `page-${page.num}-break`
       content = '…'
-      Object.assign(props, {as: 'span', 'aria-disabled': true})
+      Object.assign(props, {as: 'span', role: 'presentation'})
     }
   }
 

src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap

@@ -8,9 +8,10 @@ exports[`Pagination renders consistently 1`] = `
 .c2 {
   display: inline-block;
   min-width: 32px;
-  padding: 5px 10px;
+  height: 32px;
+  padding: 0.5rem calc((2rem - 1.25rem) / 2);
   font-style: normal;
-  line-height: 20px;
+  line-height: 1;
   color: #24292f;
   text-align: center;
   white-space: nowrap;
@@ -23,10 +24,10 @@ exports[`Pagination renders consistently 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   margin-right: 4px;
-  border: 1px solid transparent;
+  background-color: transparent;
   border-radius: 6px;
-  -webkit-transition: border-color 0.2s cubic-bezier(0.3,0,0.5,1);
-  transition: border-color 0.2s cubic-bezier(0.3,0,0.5,1);
+  -webkit-transition: background-color 0.2s cubic-bezier(0.3,0,0.5,1);
+  transition: background-color 0.2s cubic-bezier(0.3,0,0.5,1);
 }
 
 .c2:last-child {
@@ -37,7 +38,7 @@ exports[`Pagination renders consistently 1`] = `
 .c2:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
-  border-color: #d0d7de;
+  background-color: rgba(208,215,222,0.32);
   outline: 0;
   -webkit-transition-duration: 0.1s;
   transition-duration: 0.1s;
@@ -76,10 +77,12 @@ exports[`Pagination renders consistently 1`] = `
 }
 
 .c2[aria-disabled],
-.c2[aria-disabled]:hover {
+.c2[aria-disabled]:hover,
+.c2[role='presentation'],
+.c2[role='presentation']:hover {
   color: #8c959f;
   cursor: default;
-  border-color: transparent;
+  background-color: transparent;
 }
 
 .c0 {
@@ -173,8 +176,8 @@ exports[`Pagination renders consistently 1`] = `
       6
     </a>
     <span
-      aria-disabled={true}
       className="c2"
+      role="presentation"
     >
       …
     </span>