From 1f63a8b80cb2fa905cfd1695c85397a02836336a Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Wed, 8 May 2024 18:20:11 +0200
Subject: [PATCH] add example of drag handle on hover

---
 .../TreeView/TreeView.examples.stories.tsx    | 72 +++++++++++++++++++
 .../TreeView/TreeView.features.stories.tsx    |  4 --
 packages/react/src/TreeView/TreeView.tsx      |  8 ++-
 3 files changed, 78 insertions(+), 6 deletions(-)
 create mode 100644 packages/react/src/TreeView/TreeView.examples.stories.tsx

diff --git a/packages/react/src/TreeView/TreeView.examples.stories.tsx b/packages/react/src/TreeView/TreeView.examples.stories.tsx
new file mode 100644
index 00000000000..56d5130c1ed
--- /dev/null
+++ b/packages/react/src/TreeView/TreeView.examples.stories.tsx
@@ -0,0 +1,72 @@
+import {GrabberIcon} from '@primer/octicons-react'
+import type {Meta, Story} from '@storybook/react'
+import React from 'react'
+import Box from '../Box'
+import {TreeView} from './TreeView'
+
+const meta: Meta = {
+  title: 'Components/TreeView/Examples',
+  component: TreeView,
+  decorators: [
+    Story => {
+      return (
+        // Prevent TreeView from expanding to the full width of the screen
+        <Box sx={{maxWidth: 400}}>
+          <Story />
+        </Box>
+      )
+    },
+  ],
+}
+
+export const DraggableListItem: Story = () => {
+  return (
+    <Box
+      sx={{
+        // using Box for css, this could be in a css file as well
+        '.treeview-item': {
+          '.treeview-leading-action': {visibility: 'hidden'},
+          '&:hover, &:focus': {
+            '.treeview-leading-action': {visibility: 'visible'},
+          },
+        },
+      }}
+    >
+      <TreeView aria-label="Issues">
+        <ControlledDraggableItem id="item-1">Item 1</ControlledDraggableItem>
+        <ControlledDraggableItem id="item-2">
+          Item 2
+          <TreeView.SubTree>
+            <TreeView.Item id="item-2-sub-task-1">sub task 1</TreeView.Item>
+            <TreeView.Item id="item-2-sub-task-2">sub task 2</TreeView.Item>
+          </TreeView.SubTree>
+        </ControlledDraggableItem>
+        <ControlledDraggableItem id="item-3">Item 3</ControlledDraggableItem>
+      </TreeView>
+    </Box>
+  )
+}
+
+const ControlledDraggableItem: React.FC<{id: string; children: React.ReactNode}> = ({id, children}) => {
+  const [expanded, setExpanded] = React.useState(false)
+
+  return (
+    <>
+      <TreeView.Item id={id} className="treeview-item" expanded={expanded} onExpandedChange={setExpanded}>
+        <TreeView.LeadingAction
+          icon={GrabberIcon}
+          aria-label="Reorder item"
+          className="treeview-leading-action"
+          draggable="true"
+          onDragStart={() => {
+            setExpanded(false)
+            // other drag logic to follow
+          }}
+        />
+        {children}
+      </TreeView.Item>
+    </>
+  )
+}
+
+export default meta
diff --git a/packages/react/src/TreeView/TreeView.features.stories.tsx b/packages/react/src/TreeView/TreeView.features.stories.tsx
index 12a97917e90..a1e9e4a5f37 100644
--- a/packages/react/src/TreeView/TreeView.features.stories.tsx
+++ b/packages/react/src/TreeView/TreeView.features.stories.tsx
@@ -993,10 +993,6 @@ export const WithoutIndentation: Story = () => (
 )
 
 export const LeadingAction: Story = () => {
-  // todo: implement fold on click
-  // todo: implement hide until hovered
-  // todo: check if draggy boi should be aria-hidden
-
   return (
     <TreeView aria-label="Issues">
       <TreeView.Item id="item-0">
diff --git a/packages/react/src/TreeView/TreeView.tsx b/packages/react/src/TreeView/TreeView.tsx
index 6ec9316453d..b6e15f6c885 100644
--- a/packages/react/src/TreeView/TreeView.tsx
+++ b/packages/react/src/TreeView/TreeView.tsx
@@ -211,7 +211,7 @@ const UlBox = styled.ul<SxProp>`
   .PRIVATE_TreeView-item-leading-action {
     display: flex;
     color: ${get('colors.fg.muted')};
-    grid-area: 'leadingAction';
+    grid-area: leadingAction;
   }
 
   .PRIVATE_TreeView-item-level-line {
@@ -851,7 +851,11 @@ TrailingVisual.displayName = 'TreeView.TrailingVisual'
 // TreeView.LeadingAction
 
 const LeadingAction: React.FC<IconButtonProps> = props => {
-  return <IconButton variant="invisible" className="PRIVATE_TreeView-item-leading-action" {...props} />
+  return (
+    <div className="PRIVATE_TreeView-item-leading-action">
+      <IconButton variant="invisible" {...props} />
+    </div>
+  )
 }
 
 LeadingAction.displayName = 'TreeView.LeadingAction'