diff --git a/packages/react/src/sds/Home/Communities/Post/CommunityPost/index.test.tsx b/packages/react/src/sds/Home/Communities/Post/CommunityPost/index.test.tsx index 2ade8cfed1..fa422ad9a4 100644 --- a/packages/react/src/sds/Home/Communities/Post/CommunityPost/index.test.tsx +++ b/packages/react/src/sds/Home/Communities/Post/CommunityPost/index.test.tsx @@ -90,6 +90,40 @@ test("expands the description when enabled", async () => { expect(onClick).not.toHaveBeenCalled() }) +test("shows the whole description, with no See more, when the clamp is off", async () => { + mockDescriptionDimensions({ scrollHeight: 120, clientHeight: 100 }) + + render( + + ) + + expect(document.querySelector(".FactorialOneTextEditor")).not.toHaveClass( + "line-clamp-5" + ) + expect(screen.queryByRole("button", { name: "See more" })).toBeNull() +}) + +test("clamps the description again once the clamp comes back", () => { + mockDescriptionDimensions({ scrollHeight: 120, clientHeight: 100 }) + + const { rerender } = render( + + ) + + const description = document.querySelector(".FactorialOneTextEditor") + expect(description).not.toHaveClass("line-clamp-5") + + rerender() + + expect(description).toHaveClass("line-clamp-5") +}) + test("does not show description expansion controls when the description fits", () => { mockDescriptionDimensions({ scrollHeight: 100, clientHeight: 100 }) diff --git a/packages/react/src/sds/Home/Communities/Post/CommunityPost/index.tsx b/packages/react/src/sds/Home/Communities/Post/CommunityPost/index.tsx index 242978a976..ac0015f0a6 100644 --- a/packages/react/src/sds/Home/Communities/Post/CommunityPost/index.tsx +++ b/packages/react/src/sds/Home/Communities/Post/CommunityPost/index.tsx @@ -114,6 +114,17 @@ export type CommunityPostProps = { descriptionExpandable?: boolean + /** + * THE WHOLE BODY, unclamped and with no "See more" — for a container that IS + * the post rather than a way to it: a dialog, a page. There the body is what + * the reader came for, and a clamp with nothing behind it hides the end of + * what they opened. + * + * In a FEED, leave it off. Posts a page long each are what makes a feed + * unskimmable, which is what the clamp is for. + */ + noDescriptionClamp?: boolean + /** * Keeps the title as the post's ACCESSIBLE NAME but takes it out of the card — * for a container that already shows it, like a dialog carrying the post's @@ -145,6 +156,7 @@ export const BaseCommunityPost = ({ dropdownItems, noReactionsButton = false, descriptionExpandable = false, + noDescriptionClamp = false, hideTitle = false, }: CommunityPostProps) => { const titleId = useId() @@ -165,7 +177,7 @@ export const BaseCommunityPost = ({ descriptionExpandable && expandedDescription?.id === id && expandedDescription.description === description - const descriptionCollapsed = !descriptionExpanded + const descriptionCollapsed = !descriptionExpanded && !noDescriptionClamp const date = getDisplayDateBasedOnDuration(createdAt, { locale }) const isClickable = Boolean(onClick) @@ -370,6 +382,7 @@ export const BaseCommunityPost = ({ className={cn(descriptionExpanded && focusRing())} /> {descriptionExpandable && + !noDescriptionClamp && isDescriptionOverflowing && !descriptionExpanded && ( ( id={post.id} // The dialog's header carries the title, so the post doesn't repeat it. hideTitle + // Opened, not skimmed: the body is what the reader came for, so it is shown + // whole rather than clamped with nothing behind the clamp. + noDescriptionClamp author={post.author} group={{ title: "All company", onClick: () => {} }} createdAt={post.createdAt}