fix(pagination): center prev/next caret icons under the RTL mirror - #4723
Merged
Conversation
freddymeta
requested review from
cixzhang,
ejhammond and
imdreamrunner
as code owners
August 5, 2026 09:51
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
meta-cla
Bot
added
the
CLA Signed
github-actions
Bot
added
community
github-actions
Bot
requested review from
cvkxx,
ernestt,
kentonquatman and
rubyycheung
August 5, 2026 09:51
Contributor
PR Analysis Report📚 Storybook PreviewView Storybook for this PR 🧪 Sandbox PreviewView Sandbox for this PR Modified ComponentsPagination (@astryxdesign/core) · View in Storybook
Bundle Size Summary
Accessibility AuditStatus: No accessibility violations detected. Generated by PR Enrichment workflow | Storybook | Sandbox | View full report |
cixzhang
approved these changes
Aug 5, 2026
The RTL chevron mirror wrapped each caret icon in a display:contents span, which dropped the icon out of the button flex-centering context and left the glyph a few pixels high. Apply the mirror transform on the Icon directly via xstyle instead, so the icon stays a centered flex child and still flips under RTL, with no wrapper element.
cixzhang
force-pushed
the
fix/pagination-caret-icon-centering
branch
from
August 5, 2026 13:52
102919c to
3df096f
Compare
github-actions
Bot
removed
the
needs:code-review
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
The prev/next caret icons in
Paginationrender a few pixels above the button's vertical center. This centers them.Root cause
The RTL chevron mirror (added in #4687) wraps each caret
<Icon>in a<span {...rtlStyles.mirror}>. That span isdisplay: contents, so it drops the icon out of theButton's flex icon-centering wrapper — the icon then aligns to the surroundingline-heightbaseline instead of the flex cross-center. At the 20px (md) icon size the buttons use, the drift is a visible ~3px (measured: the glyph sat attop: 3.1px / bottom: 8.9pxin a 32px button).Fix
Apply the mirror transform on the
Icondirectly viaxstyle={rtlStyles.mirror}instead of a wrapper span. The icon stays a direct, centered flex child of the button (measured6.0 / 6.0after the fix) and still flips under RTL — thescaleX(-1)now rides on the icon's own element. No wrapper element, no new API.Verification
6.0 / 6.0; RTL still appliesmatrix(-1, 0, 0, 1, 0, 0)to the icon (mirror preserved).rtlStyles.mirrorusage (SideNav, Lightbox, Carousel, Calendar, TreeList, Table tree/grouped/row-expansion) — those icons center correctly (they use 16px icons or a non-button context), so this is Pagination-specific.Screenshots (before/after, LTR + RTL) attached below.