TreeView: Add nesting indicator lines

.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