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}