TreeView: Add truncate prop (#5122)

* Add "opt in" prop for `TreeView` to opt in to truncation of text

* Make non-truncate opt-in

* Add extra CSS, stories

* Add changeset

* Cleanup stories

* Remove `truncate` from story

* Add back prop to story

* test(vrt): update snapshots

* Fix story typos

* test(vrt): update snapshots

---------

Co-authored-by: TylerJDev <TylerJDev@users.noreply.github.com>

.changeset/slow-shoes-wait.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+TreeView: Adds prop `truncate`, keeps default behavior of truncation but allows for text to wrap when turned off.

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

@@ -34,7 +34,7 @@ const meta: Meta = {
 
 export const Files: StoryFn = () => (
   <nav aria-label="Files">
-    <TreeView aria-label="Files">
+    <TreeView aria-label="Files" truncate={false}>
       <TreeView.Item id="src" defaultExpanded>
         <TreeView.LeadingVisual>
           <TreeView.DirectoryIcon />
@@ -112,7 +112,7 @@ export const Files: StoryFn = () => (
 export const FilesChanged: StoryFn = () => {
   return (
     <nav aria-label="Files">
-      <TreeView aria-label="Files">
+      <TreeView aria-label="Files" truncate={false}>
         <TreeView.Item id="src" defaultExpanded>
           <TreeView.LeadingVisual>
             <TreeView.DirectoryIcon />
@@ -786,7 +786,7 @@ export const ContainIntrinsicSize: StoryFn = () => {
 export const InitialFocus: StoryFn = () => (
   <div>
     <Button>Focusable element before TreeView</Button>
-    <TreeView aria-label="Test tree">
+    <TreeView aria-label="Test tree" truncate={false}>
       <TreeView.Item id="src" defaultExpanded>
         <TreeView.LeadingVisual>
           <TreeView.DirectoryIcon />
@@ -891,11 +891,11 @@ export const InitialFocus: StoryFn = () => (
               </TreeView.Item>
             </TreeView.SubTree>
           </TreeView.Item>
-          <TreeView.Item id="src/ReallyLongFileNameThatShouldBeTruncated.tsx">
+          <TreeView.Item id="src/ReallyLongFileNameThatShouldNotBeTruncated.tsx">
             <TreeView.LeadingVisual>
               <FileIcon />
             </TreeView.LeadingVisual>
-            ReallyLongFileNameThatShouldBeTruncated.tsx
+            ReallyLongFileNameThatShouldNotBeTruncated.tsx
           </TreeView.Item>
         </TreeView.SubTree>
       </TreeView.Item>
@@ -1047,15 +1047,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>
@@ -1072,9 +1070,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

@@ -66,6 +66,7 @@ export type TreeViewProps = {
   'aria-labelledby'?: React.AriaAttributes['aria-labelledby']
   children: React.ReactNode
   flat?: boolean
+  truncate?: boolean
   className?: string
 }
 
@@ -205,14 +206,20 @@ const UlBox = styled.ul<SxProp>`
   }
 
   .PRIVATE_TreeView-item-content-text {
-    /* Truncate text label */
     flex: 1 1 auto;
     width: 0;
+  }
+
+  &[data-truncate-text='true'] .PRIVATE_TreeView-item-content-text {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
 
+  &[data-truncate-text='false'] .PRIVATE_TreeView-item-content-text {
+    word-break: break-word;
+  }
+
   .PRIVATE_TreeView-item-visual {
     display: flex;
     align-items: center;
@@ -282,6 +289,7 @@ const Root: React.FC<TreeViewProps> = ({
   'aria-labelledby': ariaLabelledby,
   children,
   flat,
+  truncate = true,
   className,
 }) => {
   const containerRef = React.useRef<HTMLUListElement>(null)
@@ -338,6 +346,7 @@ const Root: React.FC<TreeViewProps> = ({
           aria-label={ariaLabel}
           aria-labelledby={ariaLabelledby}
           data-omit-spacer={flat}
+          data-truncate-text={truncate || false}
           onMouseDown={onMouseDown}
           className={className}
         >