Feature
Two related gaps in TreeView:
- 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.
- 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.
Feature
Two related gaps in
TreeView:TreeViewBranchesrenders vertical connector lines unconditionally (src/components/TreeView/TreeViewItem.tsx:338-343, styled inTreeViewBranches.recipe.ts). Add avariant: 'lineGuides' | 'noGuides'prop; default'lineGuides'so existing rendering is unchanged.TreeViewItem.tsx:321-323(calc(level * 16px)) andTreeViewBranches.tsx:39,47. Replace with a single CSS custom property (e.g.--tree-view-indent, default16px) so consumers can theme density and the constants can't drift. Follow the existing pattern of--avatar-group-overlap(AvatarGroup.tsx:84consumed inAvatar.recipe.ts:107).Notes
noGuidesand a compact-indent tree.