Make non-truncate opt-in

Author: TylerJDev

packages/react/src/TreeView/TreeView.docs.json

@@ -69,6 +69,12 @@
           "name": "onSelect",
           "type": "(event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void"
         },
+        {
+          "name": "truncate",
+          "type": "boolean",
+          "defaultValue": "true",
+          "description": "Truncate the item's text content with an ellipsis."
+        },
         {
           "name": "ref",
           "type": "React.Ref<HTMLElement>"

packages/react/src/TreeView/TreeView.features.stories.tsx

@@ -1046,15 +1046,13 @@ export const LeadingAction: StoryFn = () => {
 
 export const MultilineItems: StoryFn = () => (
   <nav aria-label="Files changed">
-    <TreeView aria-label="Files changed">
+    <TreeView aria-label="Files changed" truncate={false}>
       <TreeView.Item id="src" defaultExpanded>
         <TreeView.LeadingVisual>
           <TreeView.DirectoryIcon />
         </TreeView.LeadingVisual>
-        <div style={{whiteSpace: 'wrap'}}>
-          this is a very long directory name that we have intentionally allowed to wrap over multiple lines to
-          demonstrate alignment
-        </div>
+        this is a very long directory name that we have intentionally allowed to wrap over multiple lines to demonstrate
+        alignment
         <TreeView.SubTree>
           <TreeView.Item id="src/Avatar.tsx">
             <TreeView.LeadingVisual>
@@ -1071,9 +1069,7 @@ export const MultilineItems: StoryFn = () => (
         <TreeView.LeadingVisual>
           <TreeView.DirectoryIcon />
         </TreeView.LeadingVisual>
-        <div style={{whiteSpace: 'wrap'}}>
-          this is a medium directory name that we wrap over 2 lines to demonstrate alignment
-        </div>
+        this is a medium directory name that we wrap over 2 lines to demonstrate alignment
         <TreeView.TrailingVisual label="Added">
           <Octicon icon={DiffAddedIcon} color="success.fg" />
         </TreeView.TrailingVisual>

packages/react/src/TreeView/TreeView.tsx

@@ -285,7 +285,7 @@ const Root: React.FC<TreeViewProps> = ({
   'aria-labelledby': ariaLabelledby,
   children,
   flat,
-  truncate,
+  truncate = true,
   className,
 }) => {
   const containerRef = React.useRef<HTMLUListElement>(null)