From abe830afbc9786773fb05c09aea7ee17b0ba07cf Mon Sep 17 00:00:00 2001 From: Andrew Prasetyo Jo Date: Mon, 3 Aug 2026 13:04:56 -0700 Subject: [PATCH 1/2] fix(core): center directional icon wrappers --- .../center-directional-icon-wrappers.md | 6 +++++ apps/docsite/AGENTS.md | 8 +++++++ apps/docsite/CLAUDE.md | 1 + packages/core/src/utils/rtlStyles.ts | 23 +++++++++++-------- 4 files changed, 29 insertions(+), 9 deletions(-) create mode 100644 .changeset/center-directional-icon-wrappers.md create mode 100644 apps/docsite/AGENTS.md create mode 100644 apps/docsite/CLAUDE.md diff --git a/.changeset/center-directional-icon-wrappers.md b/.changeset/center-directional-icon-wrappers.md new file mode 100644 index 000000000000..2276e170af95 --- /dev/null +++ b/.changeset/center-directional-icon-wrappers.md @@ -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 diff --git a/apps/docsite/AGENTS.md b/apps/docsite/AGENTS.md new file mode 100644 index 000000000000..337781a09cbc --- /dev/null +++ b/apps/docsite/AGENTS.md @@ -0,0 +1,8 @@ + + +# This is NOT the Next.js you know + +This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices. + +**Keep this block, including in commits.** It is part of the project's agent setup, maintained by `next dev` for every agent that works here. If it appears as an uncommitted change, that is intentional — commit it as-is. Do not remove it to clean up a diff; it will be regenerated. + diff --git a/apps/docsite/CLAUDE.md b/apps/docsite/CLAUDE.md new file mode 100644 index 000000000000..43c994c2d361 --- /dev/null +++ b/apps/docsite/CLAUDE.md @@ -0,0 +1 @@ +@AGENTS.md diff --git a/packages/core/src/utils/rtlStyles.ts b/packages/core/src/utils/rtlStyles.ts index e44422e265a7..1aee2f2b394e 100644 --- a/packages/core/src/utils/rtlStyles.ts +++ b/packages/core/src/utils/rtlStyles.ts @@ -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 @@ -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) => ({ From bc89600b11a259cbc9b56ddfc79fe3f40bde1a86 Mon Sep 17 00:00:00 2001 From: Andrew Prasetyo Jo Date: Tue, 4 Aug 2026 13:58:37 -0700 Subject: [PATCH 2/2] chore(docsite): drop unrelated generated agent docs --- apps/docsite/AGENTS.md | 8 -------- apps/docsite/CLAUDE.md | 1 - 2 files changed, 9 deletions(-) delete mode 100644 apps/docsite/AGENTS.md delete mode 100644 apps/docsite/CLAUDE.md diff --git a/apps/docsite/AGENTS.md b/apps/docsite/AGENTS.md deleted file mode 100644 index 337781a09cbc..000000000000 --- a/apps/docsite/AGENTS.md +++ /dev/null @@ -1,8 +0,0 @@ - - -# This is NOT the Next.js you know - -This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices. - -**Keep this block, including in commits.** It is part of the project's agent setup, maintained by `next dev` for every agent that works here. If it appears as an uncommitted change, that is intentional — commit it as-is. Do not remove it to clean up a diff; it will be regenerated. - diff --git a/apps/docsite/CLAUDE.md b/apps/docsite/CLAUDE.md deleted file mode 100644 index 43c994c2d361..000000000000 --- a/apps/docsite/CLAUDE.md +++ /dev/null @@ -1 +0,0 @@ -@AGENTS.md