patternfly / patternfly/patternfly-react

[Truncate] - Multi line truncation and scrollable tooltip

Open
#11,860 9 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Stale
Dominant language
TypeScript
Stars
862
Forks
392
Avg merge
4d 8h
Merged PRs (30d)
9

Description

Is this a new component or an extension of an existing one?
existing component: Truncate

Describe the feature
Add support to set the number of lines to truncate to. For example I want to display descriptions up to 2 lines tall, afterwards show the ellipsis with tooltip.

On top of this, when truncating a description, often the tooltip opens to a large block of centre justified text which is not ideal. Can this component support a popover that is scrollable and doesn't centre justify text.


Jira Issue: PF-1932

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the existing Truncate component and inspect its current tooltip or popover behavior. Done means supporting a configurable line count, showing an ellipsis after overflow, and presenting long truncated text in a scrollable, non-centred tooltip or popover; verify the two-line description case and long content.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
design, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.