diff --git a/packages/ui/components/list/List.tsx b/packages/ui/components/list/List.tsx index 1487bb970d1c60..934be4350ca050 100644 --- a/packages/ui/components/list/List.tsx +++ b/packages/ui/components/list/List.tsx @@ -101,7 +101,7 @@ export function ListLinkItem(props: ListLinkItemProps) { passHref href={href} className={classNames( - "text-default grow truncate text-sm", + "text-default min-w-0 grow text-sm", disabled ? "pointer-events-none cursor-not-allowed opacity-30" : "" )}>
@@ -112,9 +112,8 @@ export function ListLinkItem(props: ListLinkItemProps) { )}
-

- {subHeading.substring(0, 100)} - {subHeading.length > 100 && "..."} +

+ {subHeading}

{children}
diff --git a/packages/ui/components/list/list.test.tsx b/packages/ui/components/list/list.test.tsx index 3039114e3d8d70..b5a8abaadfe4eb 100644 --- a/packages/ui/components/list/list.test.tsx +++ b/packages/ui/components/list/list.test.tsx @@ -90,6 +90,33 @@ describe("Tests for ListLinkItem component", () => { const action = screen.getByText("cta"); expect(action).toBeInTheDocument(); }); + + test("Should render full subHeading text without JavaScript truncation", () => { + const longText = "A".repeat(150); + render( + + Alright + + ); + + const subHeading = screen.getByText(longText); + expect(subHeading).toBeInTheDocument(); + expect(subHeading.tagName).toBe("H2"); + expect(subHeading).toHaveClass("line-clamp-2"); + }); + + test("Should not apply truncate class on the link wrapper", () => { + render( + + Alright + + ); + + const listLinkItemElement = screen.getByTestId("list-link-item"); + const link = listLinkItemElement.firstChild; + expect(link).not.toHaveClass("truncate"); + expect(link).toHaveClass("min-w-0"); + }); }); describe("Tests for ListItemTitle component", () => {