Skip to content

Pagination design updates #2702

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
merged 6 commits into from
Mar 6, 2023
Merged

Pagination design updates #2702

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ac04c1e
updates pagination styles to match latest token usage patterns, and u…
mperrotti Dec 17, 2022
1589849
adds changeset
mperrotti Dec 17, 2022
0675d95
Merge branch 'main' into mp/pagination-updates-12.2022
colebemis Jan 24, 2023
02c49e1
Create .changeset/long-bags-double.md
mperrotti Mar 1, 2023
4759d8c
Merge branch 'main' into mp/pagination-updates-12.2022
mperrotti Mar 1, 2023
80fccb0
Merge branch 'main' into mp/pagination-updates-12.2022
mperrotti Mar 6, 2023
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
8 changes: 8 additions & 0 deletions .changeset/long-bags-double.md
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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