TreeView: Add nesting indicator lines (#2350)

* Add TreeView docs

* Update TreeView props

* Scaffold treeview markup

* Add TreeView to drafts

* Add comment

* Track item levels

* Add TreeView stories

* Update TreeView docs

* Update TreeView markup

* Create curly-birds-argue.md

* Fix examples

* Update src/TreeView/TreeView.tsx

* Update docs/content/TreeView.mdx

* Add some tests

* Implement arrow key navigation

* Fix arrow left

* Set up aria-activedescendant

Co-authored-by: Eric Bailey <[email protected]>

* Display focus ring on active descendant

* Use arrow key to change active descendant

* Handle expand/collapse with arrow keys

* Fix lint error

* Add up and down arrow key test

* Prevent default when moving focus with arrow keys

* Open links in same tab by default

* Add test for right arrow key expand

* Add defaultExpanded prop

* Test left arrow key collapse

* Reorganize tests

* Create neat-squids-cheat.md

* Add more tests

* Implement home and end key behavior

* Update active descendant on click

* Remove focus state

* Remove focus state from context

* Test enter and space keys

* Update focus style

* Remove Space key behavior

* Wrap test cases with themeprovider

* Add test for link item

* Update urls

* Add indicator lines for each nested level

* Create heavy-pets-own.md

* Create LevelIndicatorLines component

* Remove transitions for now

Co-authored-by: Eric Bailey <[email protected]>

Author: colebemis

.changeset/heavy-pets-own.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Adds lines to indicate the depth of items in a TreeView

src/TreeView/TreeView.tsx

@@ -339,7 +339,6 @@ const Item: React.FC<TreeViewItemProps> = ({
             color: 'fg.default',
             borderRadius: 2,
             cursor: 'pointer',
-            transition: 'background 33.333ms linear',
             '&:hover': {
               backgroundColor: 'actionListItem.default.hoverBg'
             },
@@ -361,6 +360,9 @@ const Item: React.FC<TreeViewItemProps> = ({
             }
           }}
         >
+          <Box sx={{gridArea: 'spacer', display: 'flex'}}>
+            <LevelIndicatorLines level={level} />
+          </Box>
           {hasSubTree ? (
             <Box
               onClick={event => {
@@ -405,6 +407,39 @@ const Item: React.FC<TreeViewItemProps> = ({
   )
 }
 
+/** Lines to indicate the depth of an item in a TreeView */
+const LevelIndicatorLines: React.FC<{level: number}> = ({level}) => {
+  return (
+    <Box sx={{width: '100%', display: 'flex'}}>
+      {Array.from({length: level - 1}).map((_, index) => (
+        <Box
+          key={index}
+          sx={{
+            width: '100%',
+            height: '100%',
+            borderRight: '1px solid',
+
+            // On devices without hover, the nesting indicator lines
+            // appear at all times.
+            borderColor: 'border.subtle',
+
+            // On devices with :hover support, the nesting indicator lines
+            // fade in when the user mouses over the entire component,
+            // or when there's focus inside the component. This makes
+            // sure the component remains simple when not in use.
+            '@media (hover: hover)': {
+              borderColor: 'transparent',
+              '[role=tree]:hover &, [role=tree]:focus &': {
+                borderColor: 'border.subtle'
+              }
+            }
+          }}
+        />
+      ))}
+    </Box>
+  )
+}
+
 // ----------------------------------------------------------------------------
 // TreeView.LinkItem