feat(lab): add LineClamp — clamp arbitrary content to N lines#4259
Open
HelloOjasMutreja wants to merge 1 commit into
Open
feat(lab): add LineClamp — clamp arbitrary content to N lines#4259HelloOjasMutreja wants to merge 1 commit into
HelloOjasMutreja wants to merge 1 commit into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
meta-cla
Bot
added
the
CLA Signed
github-actions
Bot
added
community
HelloOjasMutreja
marked this pull request as ready for review
July 24, 2026 05:22
HelloOjasMutreja
requested review from
cixzhang,
ejhammond and
imdreamrunner
as code owners
July 24, 2026 05:22
Contributor
Author
|
Visual before/after, verified against the live Storybook story:
Text, font, size, color, and line height come directly from the running story (Lab/LineClamp, Default), not typed by hand. The tooltip on hover/focus is a real feature of the component, shown here as a static capture; try it live in Storybook to see it appear on hover. |
Text's maxLines truncates a single text node; LineClamp is the composable version, wrapping arbitrary children (mixed inline content, nested elements) and clamping the whole block to N lines. Reuses useTruncation (the same overflow-detection hook Text uses) rather than reinventing measurement, and the same optional-tooltip-on-truncation pattern. Lands in @astryxdesign/lab per the lab -> core graduation path. No changeset: lab is private and not published to npm. Closes facebook#4180
HelloOjasMutreja
force-pushed
the
feat/lab-line-clamp
branch
from
July 25, 2026 05:34
a868309 to
d96fa86
Compare
Contributor
Author
|
Rebased onto the latest main (was a few days behind). CI should be green again. Happy to address any feedback or make adjustments -- let me know if anything needs changing before this can move forward. |
Contributor
PR Analysis ReportNo new or modified components detected. Bundle Size Summary
Accessibility AuditStatus: No accessibility violations detected. Generated by PR Enrichment workflow | View full report |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #4180
Text'smaxLinestruncates a single text node;LineClampis the composable version — wrap it around any children (mixed inline content, nested elements) to clamp the whole block to N lines.useTruncation(the same overflow-detection hookTextuses) rather than reinventing measurementText'shasTruncateTooltip, viahasTooltip@astryxdesign/labper the lab → core graduation path (no spec-protocol proposal needed for lab)Testing
@astryxdesign/labsuite (256/256 pass)tsc --noEmitcleaneslintclean-webkit-line-clampin computed style, overflow correctly detected viascrollHeight/offsetHeight), tooltip shows full content only when truncated (no tooltip/title when content fits), mixed inline content (bold/italic/code) composes correctly inside the clampOpening as a draft per the contributing guide — will mark ready after final self-review.