Skip to content

Commit

Permalink
Pagination design updates (#2702)
Browse files Browse the repository at this point in the history
* 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>
  • Loading branch information
mperrotti and colebemis authored Mar 6, 2023
1 parent d44d86f commit 0121c0f
Show file tree
Hide file tree
Showing 5 changed files with 37 additions and 18 deletions.
8 changes: 8 additions & 0 deletions .changeset/long-bags-double.md
Original file line number Diff line number Diff line change
@@ -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
5 changes: 5 additions & 0 deletions .changeset/sour-melons-wait.md
Original file line number Diff line number Diff line change
@@ -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.
19 changes: 11 additions & 8 deletions src/Pagination/Pagination.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
Expand All @@ -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%)) {
Expand Down
2 changes: 1 addition & 1 deletion src/Pagination/model.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'})
}
}

Expand Down
21 changes: 12 additions & 9 deletions src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand All @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -173,8 +176,8 @@ exports[`Pagination renders consistently 1`] = `
6
</a>
<span
aria-disabled={true}
className="c2"
role="presentation"
>
</span>
Expand Down

0 comments on commit 0121c0f

Please sign in to comment.