Skip to content

fix(core): center directional icons inside controls #4688

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.

Sign up for GitHub

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

Open
zeroryu wants to merge 2 commits into
base: main
Choose a base branch
from
+20 −9
Open

fix(core): center directional icons inside controls #4688

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
abe830a
fix(core): center directional icon wrappers
zeroryu Aug 3, 2026
bc89600
chore(docsite): drop unrelated generated agent docs
zeroryu Aug 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/center-directional-icon-wrappers.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@astryxdesign/core': patch
---

[fix] Center directional SVGs inside icon controls by normalizing the shared RTL mirror wrapper to `inline-flex`. This fixes the SideNav collapse button and the same baseline-sensitive wrapper used by gallery, tree, and table disclosure controls without changing their RTL mirroring behavior.
@andrewjp
23 changes: 14 additions & 9 deletions packages/core/src/utils/rtlStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,18 @@
/**
* @file rtlStyles.ts
* @input None
* @output Shared StyleX style that horizontally mirrors an element under RTL
* @position Core utility; applied to directional-icon wrappers in Calendar,
* Lightbox, and the Table expand/disclosure plugins
* @output Shared StyleX styles for RTL-safe mirroring and inline centering
* @position Core utility; applied to directional-icon wrappers throughout
* navigation, disclosure, gallery, and table controls
*
* `mirror` flips its element on the horizontal axis only when an ancestor
* carries `dir="rtl"`. Using `scaleX(-1)` (not `scale(-1, -1)`) keeps the
* vertical axis intact, and applying it OUTSIDE any state-driven rotation lets
* it compose correctly — e.g. a Table disclosure chevron still rotates to point
* down when expanded under RTL. The `:is([dir="rtl"] *)` selector matches the
* MobileNav drawer convention; a bare `direction: rtl` alone won't trigger it.
* `mirror` normalizes directional-icon wrappers to inline-flex so their SVGs
* are centered without inheriting a text baseline, then flips the wrapper on
* the horizontal axis only when an ancestor carries `dir="rtl"`. Using
* `scaleX(-1)` (not `scale(-1, -1)`) keeps the vertical axis intact, and
* applying it OUTSIDE any state-driven rotation lets it compose correctly —
* e.g. a Table disclosure chevron still rotates to point down when expanded
* under RTL. The `:is([dir="rtl"] *)` selector matches the MobileNav drawer
* convention; a bare `direction: rtl` alone won't trigger it.
*
* `centerInline(blockOffset?)` horizontally centers an absolutely-positioned,
* auto-width element on the inline axis, correctly in BOTH LTR and RTL, with an
Expand All @@ -39,6 +41,9 @@ import * as stylex from '@stylexjs/stylex';

export const rtlStyles = stylex.create({
mirror: {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
transform: {default: null, ':is([dir="rtl"] *)': 'scaleX(-1)'},
},
centerInline: (blockOffset: string) => ({
Expand Down
Loading