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}