lucca-front
lucca-front copied to clipboard
refactor(lu-tooltip): simplify code and implement ellipsis system
Description
Refactor of the luTooltip
directive because it was relying on a lot of common code with LuPopover
code while it's not the same thing at all and doesn't require the same approaches to various things (like position). It was also not acting like we want it to act regarding ellipsis (ellipsis tooltip should be hidden from screen readers and detection needs to be accurate).
ℹ️ This is a non-breaking refactor, everything will work as expected with existing code, with better accessibility and better ellipsis detection
The refactor includes:
- Direct use of
@angular/cdk
for the tooltip logic instead of using the one hidden inALuPopoverTrigger
for better granularity on features we want/don't want - Removal of inheritence for easier maintenance, in order to keep the code simple to read
-
luTooltipWhenEllipsis
is now accurate in all the cases tested inside our testing story (stories/documentation/overlays/tooltip/tooltip-ellipsis.stories.ts) - When a tooltip is triggered by ellipsis, it's not seen by Screen Readers to avoid double reading of the same content
-
luTooltipWhenEllipsis
can now be used with an emptyluTooltip
, making the tooltip automatically getting its content fromhost.nativeElement.innerText
, thus removing any HTML present inside of it to only keep rendered text as string.