Skip to content

TreeView: guide-line variant and themeable indentation #428

Description

@czarandy

Feature

Two related gaps in TreeView:

  1. Guide lines are always on. TreeViewBranches renders vertical connector lines unconditionally (src/components/TreeView/TreeViewItem.tsx:338-343, styled in TreeViewBranches.recipe.ts). Add a variant: 'lineGuides' | 'noGuides' prop; default 'lineGuides' so existing rendering is unchanged.
  2. Indent step is hardcoded and duplicated. The 16px step lives in two places that must stay in sync: TreeViewItem.tsx:321-323 (calc(level * 16px)) and TreeViewBranches.tsx:39,47. Replace with a single CSS custom property (e.g. --tree-view-indent, default 16px) so consumers can theme density and the constants can't drift. Follow the existing pattern of --avatar-group-overlap (AvatarGroup.tsx:84 consumed in Avatar.recipe.ts:107).

Notes

  • sva recipe variant per repo convention.
  • Tests for both variants and for a custom indent value; Storybook examples for noGuides and a compact-indent tree.
  • Related: TreeView RTL fixes are tracked separately — implementing the CSS var with logical properties would dovetail with that work.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestmediumApproximately medium amount of work

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions