Problem
The library's convention is RTL-safe styling (_rtl mirroring, LogicalChevron*, logical properties — used by Pagination, Calendar, Lightbox, Drawer, SideNav, etc.), but TreeView is entirely physical:
- The disclosure chevron is a raw
ChevronRight with no _rtl mirror (src/components/TreeView/TreeViewItem.tsx:271), rotated 90° when expanded (TreeViewItem.recipe.ts:176). In RTL the collapsed arrow points away from the content. (Contrast: Table row expansion already uses LogicalChevronEnd.)
- Item indentation uses physical
marginLeft (TreeViewItem.tsx:350).
- Branch guide lines are positioned with physical
left (src/components/TreeView/TreeViewBranches.tsx:39,47).
Keyboard handling already does the right thing (TreeView.tsx:280-285 swaps ArrowLeft/ArrowRight in RTL), which makes the visual mismatch worse.
Expected
Under dir="rtl", the tree mirrors: chevron points toward the content when collapsed, indentation grows from the inline-start edge, guide lines sit on the inline-start side.
Suggested fix
Use LogicalChevronEnd (or add the _rtl: scaleX(-1) mirror) for the disclosure icon, and migrate marginLeft/left to marginInlineStart/insetInlineStart. Verify with an RTL Storybook example.
Problem
The library's convention is RTL-safe styling (
_rtlmirroring,LogicalChevron*, logical properties — used by Pagination, Calendar, Lightbox, Drawer, SideNav, etc.), but TreeView is entirely physical:ChevronRightwith no_rtlmirror (src/components/TreeView/TreeViewItem.tsx:271), rotated 90° when expanded (TreeViewItem.recipe.ts:176). In RTL the collapsed arrow points away from the content. (Contrast: Table row expansion already usesLogicalChevronEnd.)marginLeft(TreeViewItem.tsx:350).left(src/components/TreeView/TreeViewBranches.tsx:39,47).Keyboard handling already does the right thing (
TreeView.tsx:280-285swaps ArrowLeft/ArrowRight in RTL), which makes the visual mismatch worse.Expected
Under
dir="rtl", the tree mirrors: chevron points toward the content when collapsed, indentation grows from the inline-start edge, guide lines sit on the inline-start side.Suggested fix
Use
LogicalChevronEnd(or add the_rtl: scaleX(-1)mirror) for the disclosure icon, and migratemarginLeft/lefttomarginInlineStart/insetInlineStart. Verify with an RTL Storybook example.