Add truncation for content beyond 2 lines and show tooltip with original value if content was truncated #3123
Conversation
teodosii
added
the
pr:no public docs
teodosii
changed the title
teodosii
force-pushed
the
rares/increase-integration-max-characters
branch
from
52b6ce3 to
14687d8
Compare
| text, | ||
| tooltipTitle, | ||
| tooltipContent, | ||
| placement, |
There was a problem hiding this comment.
maybe placement = 'bottom-start' to use 'bottom-start' as default
| const elContentRef = useRef<HTMLDivElement>(null); | ||
|
|
||
| useEffect(() => { | ||
| setEllipsis(); |
There was a problem hiding this comment.
it's called only onMount, but textContent and children can be changed later
There was a problem hiding this comment.
In current use cases the content cannot change, the only issue is on resizing as that will determine truncation, but that's sorted out by onMouseHover.
There was a problem hiding this comment.
maybe it's better to add [children] to useEffect deps right now?
| }, []); | ||
|
|
||
| const elContent = ( | ||
| <div className={cx(className)} ref={elContentRef} onMouseOver={setEllipsis}> |
There was a problem hiding this comment.
ok, we'll display tooltip (if element is too long) onMouseOver, but what about calling setEllipsis on onMouseOut ?
There was a problem hiding this comment.
The tooltip is not displayed on onMouseHover, it just updates the state to know it's a truncated element - from there is just normal rendering (which will include tooltip as well)
There was a problem hiding this comment.
Why would we need to call it on mouseleave?
There was a problem hiding this comment.
ok, just looks a bit weird to update the state on onMouseHover, in theory mouse hovering shouldn't affect this state...
There was a problem hiding this comment.
IMO that's a good spot for checking if anything changed - just for this case. It's like a trigger to show the tooltip, instead we just update the state which will show the tooltip... I don't like setting it on resize, maybe there are some other actions triggering truncation which I'm not aware of right now, onMouseOver catches every case.
| <HorizontalGroup> | ||
| <TextEllipsisTooltip placement="top" content={user.username}> | ||
| <Text type="secondary" className={cx('overflow-child')}> | ||
| <Avatar size="small" src={user.avatar} />{' '} |
There was a problem hiding this comment.
Changed from medium to small so that it's consistent with other places (see incident's users, schedule current user at the top or the teams icon)
…nal value if content was truncated (#3123) # What this PR does - Removed `MAX_LINE_LENGTH` which was used to truncate Integrations Name - Added new component `TextEllipsisTooltip` that determines if its content was truncated, and if so, it will show a tooltip with the original value. Integrations Name and Alert Group Name fields inside tables have been changed so that after filling in 2 lines, the content gets truncated and a tooltip is shown on hover. Before  After  As you can see this results in more space being taken for the integrations name (but no more than what it should take), and the end result is always truncated after 2 lines. Same applies to the Integrations Before  After  The `Don't delete` integration wasn't even showing 100% of its full width in the before screen, but it shows in the after because now there's no more limit on the characters.
What this PR does
MAX_LINE_LENGTHwhich was used to truncate Integrations NameTextEllipsisTooltipthat determines if its content was truncated, and if so, it will show a tooltip with the original value. Integrations Name and Alert Group Name fields inside tables have been changed so that after filling in 2 lines, the content gets truncated and a tooltip is shown on hover.Before
After
As you can see this results in more space being taken for the integrations name (but no more than what it should take), and the end result is always truncated after 2 lines. Same applies to the Integrations
Before
After
The
Don't deleteintegration wasn't even showing 100% of its full width in the before screen, but it shows in the after because now there's no more limit on the characters.