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} ) })