fix(ActionList): do not truncate description by default

.changeset/cyan-lions-itch.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+fix(ActionList): do not truncate description by default

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

@@ -252,6 +252,12 @@
           "type": "string | undefined",
           "defaultValue": "",
           "description": "CSS string"
+        },
+        {
+         "name": "truncate",
+         "type": "boolean",
+         "defaultValue": "false",
+          "description": "Whether the inline description should truncate the text on overflow." 
         }
       ]
     },

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

@@ -551,7 +551,19 @@ export const TextWrapAndTruncation = () => (
           <ArrowRightIcon />
         </ActionList.LeadingVisual>
         Inline Description
-        <ActionList.Description>This description gets truncated because it is inline</ActionList.Description>
+        <ActionList.Description truncate>
+          This description gets truncated because it is inline with truncation
+        </ActionList.Description>
+        <ActionList.TrailingVisual>
+          <ArrowLeftIcon />
+        </ActionList.TrailingVisual>
+      </ActionList.Item>
+      <ActionList.Item>
+        <ActionList.LeadingVisual>
+          <ArrowRightIcon />
+        </ActionList.LeadingVisual>
+        Inline Description
+        <ActionList.Description>This description wraps because it is inline without truncation</ActionList.Description>
         <ActionList.TrailingVisual>
           <ArrowLeftIcon />
         </ActionList.TrailingVisual>

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

@@ -648,4 +648,52 @@ describe('ActionList', () => {
     await userEvent.keyboard('{ArrowUp}')
     expect(document.activeElement).toHaveTextContent('Option 4')
   })
+
+  describe('ActionList.Description', () => {
+    it('should render the description as inline without truncation by default', () => {
+      const {getByText} = HTMLRender(
+        <ActionList>
+          <ActionList.Item>
+            Item 1<ActionList.Description>Item 1 description</ActionList.Description>
+          </ActionList.Item>
+        </ActionList>,
+      )
+
+      const description = getByText('Item 1 description')
+      expect(description.tagName).toBe('SPAN')
+      expect(description).toHaveStyleRule('flex-basis', 'auto')
+      expect(description).not.toHaveStyleRule('overflow', 'ellipsis')
+      expect(description).not.toHaveStyleRule('white-space', 'nowrap')
+    })
+    it('should render the description as `Truncate` when truncate is true', () => {
+      const {getByText} = HTMLRender(
+        <ActionList>
+          <ActionList.Item>
+            Item 1<ActionList.Description truncate>Item 1 description</ActionList.Description>
+          </ActionList.Item>
+        </ActionList>,
+      )
+
+      const description = getByText('Item 1 description')
+      expect(description.tagName).toBe('DIV')
+      expect(description).toHaveAttribute('title', 'Item 1 description')
+      expect(description).toHaveStyleRule('flex-basis', '0')
+      expect(description).toHaveStyleRule('text-overflow', 'ellipsis')
+      expect(description).toHaveStyleRule('overflow', 'hidden')
+      expect(description).toHaveStyleRule('white-space', 'nowrap')
+    })
+    it('should render the description in a new line when variant is block', () => {
+      const {getByText} = HTMLRender(
+        <ActionList>
+          <ActionList.Item>
+            Item 1<ActionList.Description variant="block">Item 1 description</ActionList.Description>
+          </ActionList.Item>
+        </ActionList>,
+      )
+
+      const description = getByText('Item 1 description')
+      expect(description.tagName).toBe('SPAN')
+      expect(description.parentElement).toHaveAttribute('data-component', 'ActionList.Item--DividerContainer')
+    })
+  })
 })

packages/react/src/ActionList/Description.tsx

@@ -14,19 +14,24 @@ export type ActionListDescriptionProps = {
    */
   variant?: 'inline' | 'block'
   className?: string
+  /**
+   * Whether the inline description should truncate the text on overflow.
+   */
+  truncate?: boolean
 } & SxProp
 
 export const Description: React.FC<React.PropsWithChildren<ActionListDescriptionProps>> = ({
   variant = 'inline',
   sx = {},
   className,
+  truncate,
   ...props
 }) => {
   const styles = {
     fontSize: 0,
     lineHeight: '16px',
     flexGrow: 1,
-    flexBasis: 0,
+    flexBasis: variant === 'inline' && !truncate ? 'auto' : 0,
     minWidth: 0,
     marginLeft: variant === 'block' ? 0 : 2,
     color: 'fg.muted',
@@ -37,11 +42,11 @@ export const Description: React.FC<React.PropsWithChildren<ActionListDescription
 
   const {blockDescriptionId, inlineDescriptionId} = React.useContext(ItemContext)
 
-  return variant === 'block' ? (
+  return variant === 'block' || !truncate ? (
     <Box
       as="span"
       sx={merge(styles, sx as SxProp)}
-      id={blockDescriptionId}
+      id={variant === 'block' ? blockDescriptionId : inlineDescriptionId}
       className={className}
       data-component="ActionList.Description"
     >

packages/react/src/ActionList/Item.tsx

@@ -392,7 +392,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
                       flexGrow: slots.inlineDescription ? 0 : 1,
                       fontWeight: slots.inlineDescription || slots.blockDescription || active ? 'bold' : 'normal',
                       marginBlockEnd: slots.blockDescription ? '4px' : undefined,
-                      wordBreak: 'break-word',
+                      wordBreak: slots.inlineDescription ? 'normal' : 'break-word',
                     }}
                   >
                     {childrenWithoutSlots}