Skip to content

TreeView is not RTL-safe (chevron, indent, and guide lines are hard-coded LTR) #419

Description

@czarandy

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingsmallApproximately small amount of work

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions