diff --git a/.changeset/cyan-lions-itch.md b/.changeset/cyan-lions-itch.md
new file mode 100644
index 00000000000..fda53e9bf07
--- /dev/null
+++ b/.changeset/cyan-lions-itch.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+fix(ActionList): do not truncate description by default
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-colorblind-linux.png
index 907aada231c..3b65aab7a75 100644
Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-colorblind-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-dimmed-linux.png
index b429f1981f7..e0b9f8ca1c9 100644
Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-dimmed-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-high-contrast-linux.png
index 8d18525f283..19eb6178332 100644
Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-linux.png
index 907aada231c..3b65aab7a75 100644
Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-tritanopia-linux.png
index 907aada231c..3b65aab7a75 100644
Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-colorblind-linux.png
index b71dc1491e3..db22305f64d 100644
Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-colorblind-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-high-contrast-linux.png
index a7b37a2d3a0..c671e889423 100644
Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-high-contrast-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-linux.png
index b71dc1491e3..db22305f64d 100644
Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-tritanopia-linux.png
index b71dc1491e3..db22305f64d 100644
Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-tritanopia-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-tritanopia-linux.png differ
diff --git a/packages/react/src/ActionList/ActionList.docs.json b/packages/react/src/ActionList/ActionList.docs.json
index ba78705b808..2d7ff88c1a9 100644
--- a/packages/react/src/ActionList/ActionList.docs.json
+++ b/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."
}
]
},
diff --git a/packages/react/src/ActionList/ActionList.features.stories.tsx b/packages/react/src/ActionList/ActionList.features.stories.tsx
index 59155c9c0f4..a06525b3b4e 100644
--- a/packages/react/src/ActionList/ActionList.features.stories.tsx
+++ b/packages/react/src/ActionList/ActionList.features.stories.tsx
@@ -551,7 +551,19 @@ export const TextWrapAndTruncation = () => (
Inline Description
- This description gets truncated because it is inline
+
+ This description gets truncated because it is inline with truncation
+
+
+
+
+
+
+
+
+
+ Inline Description
+ This description wraps because it is inline without truncation
diff --git a/packages/react/src/ActionList/ActionList.test.tsx b/packages/react/src/ActionList/ActionList.test.tsx
index 79b50978b4c..ae983870427 100644
--- a/packages/react/src/ActionList/ActionList.test.tsx
+++ b/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(
+
+
+ Item 1Item 1 description
+
+ ,
+ )
+
+ 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(
+
+
+ Item 1Item 1 description
+
+ ,
+ )
+
+ 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(
+
+
+ Item 1Item 1 description
+
+ ,
+ )
+
+ const description = getByText('Item 1 description')
+ expect(description.tagName).toBe('SPAN')
+ expect(description.parentElement).toHaveAttribute('data-component', 'ActionList.Item--DividerContainer')
+ })
+ })
})
diff --git a/packages/react/src/ActionList/Description.tsx b/packages/react/src/ActionList/Description.tsx
index 10fc980fc51..68bc4f661f9 100644
--- a/packages/react/src/ActionList/Description.tsx
+++ b/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> = ({
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
diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx
index 268c7a4312f..168333b770a 100644
--- a/packages/react/src/ActionList/Item.tsx
+++ b/packages/react/src/ActionList/Item.tsx
@@ -392,7 +392,7 @@ export const Item = React.forwardRef(
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}