[ActionList] Prevent title="[object Object]" when Description has non-string children (#6223)

Author: liuliu-dev

.changeset/brown-rules-taste.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Fix ActionList.Description title attribute for non-string children with truncate

packages/react/src/ActionList/ActionList.docs.json

@@ -393,4 +393,4 @@
       ]
     }
   ]
-}
+}

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

@@ -587,6 +587,18 @@ export const TextWrapAndTruncation = () => (
           <ArrowLeftIcon />
         </ActionList.TrailingVisual>
       </ActionList.Item>
+      <ActionList.Item>
+        <ActionList.LeadingVisual>
+          <ArrowRightIcon />
+        </ActionList.LeadingVisual>
+        Description with truncation and complex children
+        <ActionList.Description truncate>
+          With <strong>bold</strong> and <em>italic</em> text, and it should truncate if it is too long
+        </ActionList.Description>
+        <ActionList.TrailingVisual>
+          <ArrowLeftIcon />
+        </ActionList.TrailingVisual>
+      </ActionList.Item>
       <ActionList.Item>
         <ActionList.LeadingVisual>
           <ArrowRightIcon />

packages/react/src/ActionList/ActionList.test.tsx

@@ -171,4 +171,32 @@ describe('ActionList', () => {
     expect(container.querySelector('li[aria-disabled="true"]')?.nextElementSibling).toHaveTextContent('Option 4')
     expect(container.querySelector('li[aria-disabled="true"]')?.nextElementSibling).toHaveAttribute('tabindex', '0')
   })
+
+  it('sets title correctly for Description component', () => {
+    const {container} = HTMLRender(
+      <ActionList>
+        <ActionList.Item>
+          Option 1<ActionList.Description truncate>Simple string description</ActionList.Description>
+        </ActionList.Item>
+        <ActionList.Item>
+          Option 2
+          <ActionList.Description truncate>
+            <span>Complex</span> content
+          </ActionList.Description>
+        </ActionList.Item>
+        <ActionList.Item>
+          Option 3
+          <ActionList.Description>
+            <span>Non-truncated</span> content
+          </ActionList.Description>
+        </ActionList.Item>
+      </ActionList>,
+    )
+
+    const descriptions = container.querySelectorAll('[data-component="ActionList.Description"]')
+
+    expect(descriptions[0]).toHaveAttribute('title', 'Simple string description')
+    expect(descriptions[1]).toHaveAttribute('title', 'Complex content')
+    expect(descriptions[2]).not.toHaveAttribute('title')
+  })
 })

packages/react/src/ActionList/Description.tsx

@@ -15,6 +15,7 @@ export type ActionListDescriptionProps = {
    * - `"block"` - Secondary text is positioned below primary text.
    */
   variant?: 'inline' | 'block'
+
   className?: string
   /**
    * Whether the inline description should truncate the text on overflow.
@@ -30,6 +31,18 @@ export const Description: React.FC<React.PropsWithChildren<ActionListDescription
   ...props
 }) => {
   const {blockDescriptionId, inlineDescriptionId} = React.useContext(ItemContext)
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const [computedTitle, setComputedTitle] = React.useState<string>('')
+
+  // Extract text content from rendered DOM for tooltip
+  React.useEffect(() => {
+    if (truncate && containerRef.current) {
+      const textContent = containerRef.current.textContent || ''
+      setComputedTitle(textContent)
+    }
+  }, [truncate, props.children])
+
+  const effectiveTitle = typeof props.children === 'string' ? props.children : computedTitle
 
   if (variant === 'block' || !truncate) {
     return (
@@ -46,10 +59,11 @@ export const Description: React.FC<React.PropsWithChildren<ActionListDescription
   } else {
     return (
       <Truncate
+        ref={containerRef}
         id={inlineDescriptionId}
         className={clsx(className, classes.Description)}
         sx={sx}
-        title={props.children as string}
+        title={effectiveTitle}
         inline={true}
         maxWidth="100%"
         data-component="ActionList.Description"