-
Notifications
You must be signed in to change notification settings - Fork 638
Vertically center Pagination prev/next chevron icons #6984
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.
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
base: main
Are you sure you want to change the base?
Conversation
🦋 Changeset detectedLatest commit: 1f1324c The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR fixes the vertical alignment of chevron icons in Pagination component's "Previous" and "Next" links by replacing CSS-based pseudo-element icons with React Octicon components and updating the layout to use flexbox.
- Replaces CSS clip-path pseudo-element chevrons with
ChevronLeftIcon
andChevronRightIcon
from Octicons - Updates CSS layout from
inline-block
toinline-flex
with proper alignment properties - Introduces a
PageLabel
component to conditionally render icons alongside page content
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
File | Description |
---|---|
packages/react/src/Pagination/Pagination.tsx | Adds PageLabel component with Octicon chevrons and integrates it into page rendering |
packages/react/src/Pagination/Pagination.module.css | Replaces CSS pseudo-element chevrons with flexbox layout and SVG icon styling |
.changeset/bright-birds-glow.md | Documents the pagination chevron alignment fix for release notes |
👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks! |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…act into mp/pagnation-papercuts-oct2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yay thank you!
Something to check: The updated snapshots look a bit strange, they don't match your description, the chevrons look smaller in them
Closes https://github.com/github/primer/issues/5277
Demos
Toggling between "before" and "after"
Bonus: adapts to different font sizes
Changelog
New
Changed
Vertically centers chevron icons in "Previous" and "Next" links
Removed
Rollout strategy
Testing & Reviewing
Merge checklist