From ac04c1e1b2833461290c024f754f9854a09d40a5 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Fri, 16 Dec 2022 16:47:40 -0800 Subject: [PATCH 1/3] updates pagination styles to match latest token usage patterns, and updates ARIA markup --- src/Pagination/Pagination.tsx | 19 ++++++++++------- src/Pagination/model.tsx | 2 +- .../__snapshots__/Pagination.test.tsx.snap | 21 +++++++++++-------- 3 files changed, 24 insertions(+), 18 deletions(-) diff --git a/src/Pagination/Pagination.tsx b/src/Pagination/Pagination.tsx index cf36159b051..30a88bfa32e 100644 --- a/src/Pagination/Pagination.tsx +++ b/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%)) { diff --git a/src/Pagination/model.tsx b/src/Pagination/model.tsx index 5be580e76c7..1ba6f323b18 100644 --- a/src/Pagination/model.tsx +++ b/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'}) } } diff --git a/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap b/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap index 4d8a364a6d6..7197e07d306 100644 --- a/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap +++ b/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 … From 158984918a71657109a2d8a9a5f21db38e713dcc Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Fri, 16 Dec 2022 16:57:34 -0800 Subject: [PATCH 2/3] adds changeset --- .changeset/sour-melons-wait.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/sour-melons-wait.md diff --git a/.changeset/sour-melons-wait.md b/.changeset/sour-melons-wait.md new file mode 100644 index 00000000000..06b56eace05 --- /dev/null +++ b/.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. From 02c49e1617c8d8550da3272223437e8fb36ae988 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 1 Mar 2023 15:09:17 -0500 Subject: [PATCH 3/3] Create .changeset/long-bags-double.md --- .changeset/long-bags-double.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 .changeset/long-bags-double.md diff --git a/.changeset/long-bags-double.md b/.changeset/long-bags-double.md new file mode 100644 index 00000000000..872e2ac2f68 --- /dev/null +++ b/.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