diff --git a/.changeset/bright-birds-glow.md b/.changeset/bright-birds-glow.md
new file mode 100644
index 00000000000..3da5347d68d
--- /dev/null
+++ b/.changeset/bright-birds-glow.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Fixes vertical alignment of prev/next pagination chevrons
diff --git a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Default-dark-high-contrast-linux.png
index baf44f68958..558d20f9edf 100644
Binary files a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Default-light-colorblind-linux.png b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Default-light-colorblind-linux.png
index 277a20c467a..077c373d375 100644
Binary files a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Default-light-high-contrast-linux.png
index 2f505621529..e890b7d8e6a 100644
Binary files a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Default-light-linux.png b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Default-light-linux.png
index 277a20c467a..077c373d375 100644
Binary files a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Default-light-linux.png and b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Default-light-tritanopia-linux.png
index 277a20c467a..077c373d375 100644
Binary files a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Default-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Dev-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Dev-Default-dark-high-contrast-linux.png
index baf44f68958..558d20f9edf 100644
Binary files a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Dev-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Dev-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Dev-Default-light-colorblind-linux.png b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Dev-Default-light-colorblind-linux.png
index 277a20c467a..077c373d375 100644
Binary files a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Dev-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Dev-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Dev-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Dev-Default-light-high-contrast-linux.png
index 2f505621529..e890b7d8e6a 100644
Binary files a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Dev-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Dev-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Dev-Default-light-linux.png b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Dev-Default-light-linux.png
index 277a20c467a..077c373d375 100644
Binary files a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Dev-Default-light-linux.png and b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Dev-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Dev-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Dev-Default-light-tritanopia-linux.png
index 277a20c467a..077c373d375 100644
Binary files a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Dev-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Dev-Default-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Hide-Page-Numbers-dark-high-contrast-linux.png b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Hide-Page-Numbers-dark-high-contrast-linux.png
index 9b57ec451ac..1c1f99bd176 100644
Binary files a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Hide-Page-Numbers-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Hide-Page-Numbers-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Hide-Page-Numbers-light-colorblind-linux.png b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Hide-Page-Numbers-light-colorblind-linux.png
index 421ba725d7e..120546609a8 100644
Binary files a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Hide-Page-Numbers-light-colorblind-linux.png and b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Hide-Page-Numbers-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Hide-Page-Numbers-light-high-contrast-linux.png b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Hide-Page-Numbers-light-high-contrast-linux.png
index df56e09b8e2..2feb45a4a4a 100644
Binary files a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Hide-Page-Numbers-light-high-contrast-linux.png and b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Hide-Page-Numbers-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Hide-Page-Numbers-light-linux.png b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Hide-Page-Numbers-light-linux.png
index 421ba725d7e..120546609a8 100644
Binary files a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Hide-Page-Numbers-light-linux.png and b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Hide-Page-Numbers-light-linux.png differ
diff --git a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Hide-Page-Numbers-light-tritanopia-linux.png b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Hide-Page-Numbers-light-tritanopia-linux.png
index 421ba725d7e..120546609a8 100644
Binary files a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Hide-Page-Numbers-light-tritanopia-linux.png and b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Hide-Page-Numbers-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Render-Links-dark-high-contrast-linux.png b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Render-Links-dark-high-contrast-linux.png
index baf44f68958..558d20f9edf 100644
Binary files a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Render-Links-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Render-Links-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Render-Links-light-colorblind-linux.png b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Render-Links-light-colorblind-linux.png
index 277a20c467a..077c373d375 100644
Binary files a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Render-Links-light-colorblind-linux.png and b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Render-Links-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Render-Links-light-high-contrast-linux.png b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Render-Links-light-high-contrast-linux.png
index 2f505621529..e890b7d8e6a 100644
Binary files a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Render-Links-light-high-contrast-linux.png and b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Render-Links-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Render-Links-light-linux.png b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Render-Links-light-linux.png
index 277a20c467a..077c373d375 100644
Binary files a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Render-Links-light-linux.png and b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Render-Links-light-linux.png differ
diff --git a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Render-Links-light-tritanopia-linux.png b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Render-Links-light-tritanopia-linux.png
index 277a20c467a..077c373d375 100644
Binary files a/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Render-Links-light-tritanopia-linux.png and b/.playwright/snapshots/components/Pagination.test.ts-snapshots/Pagehead-Render-Links-light-tritanopia-linux.png differ
diff --git a/packages/react/src/Pagination/Pagination.module.css b/packages/react/src/Pagination/Pagination.module.css
index 1c6e2e46d56..e5e8aa26f09 100644
--- a/packages/react/src/Pagination/Pagination.module.css
+++ b/packages/react/src/Pagination/Pagination.module.css
@@ -1,5 +1,4 @@
.Page {
- display: inline-block;
min-width: 32px; /* primer.control.medium.size */
height: 32px; /* primer.control.medium.size */
padding: var(--base-size-8) calc((var(--base-size-32) - var(--base-size-20)) / 2); /* primer.control.medium.paddingInline.condensed primer.control.medium.paddingBlock */
@@ -17,50 +16,24 @@
background-color: transparent;
border-radius: var(--borderRadius-medium);
transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
}
-@supports (clip-path: polygon(50% 0, 100% 50%, 50% 100%)) {
- .Page[rel='prev']::before,
- .Page[rel='next']::after {
- display: inline-block;
- width: 16px;
- height: 16px;
- vertical-align: text-bottom;
- content: '';
- background-color: currentColor;
- }
+.Page[rel='prev'] > svg,
+.Page[rel='next'] > svg {
+ /* sizing with `em` so icons scale with inherited font-size */
+ height: 1em;
+ width: 1em;
+}
- /* chevron-left */
- .Page[rel='prev']::before {
- margin-right: var(--base-size-4);
- clip-path: polygon(
- 9.8px 12.8px,
- 8.7px 12.8px,
- 4.5px 8.5px,
- 4.5px 7.5px,
- 8.7px 3.2px,
- 9.8px 4.3px,
- 6.1px 8px,
- 9.8px 11.7px,
- 9.8px 12.8px
- );
- }
+.Page[rel='prev'] > svg {
+ margin-inline-end: var(--base-size-4);
+}
- /* chevron-right */
- .Page[rel='next']::after {
- margin-left: var(--base-size-4);
- clip-path: polygon(
- 6.2px 3.2px,
- 7.3px 3.2px,
- 11.5px 7.5px,
- 11.5px 8.5px,
- 7.3px 12.8px,
- 6.2px 11.7px,
- 9.9px 8px,
- 6.2px 4.3px,
- 6.2px 3.2px
- );
- }
+.Page[rel='next'] > svg {
+ margin-inline-start: var(--base-size-4);
}
.Page:last-child {
diff --git a/packages/react/src/Pagination/Pagination.tsx b/packages/react/src/Pagination/Pagination.tsx
index 556864aa2ca..1d362001705 100644
--- a/packages/react/src/Pagination/Pagination.tsx
+++ b/packages/react/src/Pagination/Pagination.tsx
@@ -1,4 +1,5 @@
import React from 'react'
+import {ChevronLeftIcon, ChevronRightIcon} from '@primer/octicons-react'
import {buildComponentData, buildPaginationModel, type PageDataProps} from './model'
import type {ResponsiveValue} from '../hooks/useResponsiveValue'
import {viewportRanges} from '../hooks/useResponsiveValue'
@@ -41,6 +42,19 @@ type UsePaginationPagesParameters = {
renderPage?: (props: PageProps) => React.ReactNode
}
+type PageLabelProps = {
+ children: React.ReactNode
+ direction?: PageProps['key']
+}
+
+const PageLabel = ({children, direction}: PageLabelProps) => (
+ <>
+ {direction === 'page-prev' ? : null}
+ {children}
+ {direction === 'page-next' ? : null}
+ >
+)
+
function usePaginationPages({
pageCount,
currentPage,
@@ -61,14 +75,20 @@ function usePaginationPages({
return model.map(page => {
const {props, key, content} = buildComponentData(page, hrefBuilder, pageChange(page.num))
if (renderPage && props.as !== 'span') {
- return renderPage({key, children: content, number: page.num, className: classes.Page, ...props})
+ return renderPage({
+ key,
+ children: {content},
+ number: page.num,
+ className: classes.Page,
+ ...props,
+ })
}
const Component = props.as || 'a'
return (
// @ts-ignore giving me grief about children and "as" props
- {content}
+ {content}
)
})