lucca-front icon indicating copy to clipboard operation
lucca-front copied to clipboard

refactor(lu-tooltip): simplify code and implement ellipsis system

Open Supamiu opened this issue 10 months ago • 10 comments

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 in ALuPopoverTrigger 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 empty luTooltip, making the tooltip automatically getting its content from host.nativeElement.innerText, thus removing any HTML present inside of it to only keep rendered text as string.


Supamiu avatar Apr 22 '24 13:04 Supamiu