Text component text truncation hook

[pcapel]

Describe the feature that you would like added

Given I have some text
And it is long enough to be truncated
Then I would like to notify the parent component

The utility of this would be to be able to trigger a Tooltip only when the text inside the component is to be truncated.

My first thought is to add an onOverflow prop that could hook into state on the parent and allow a conditional render of the Tooltip or TooltipHost.

What component or utility would this be added to

<Text />

Have you discussed this feature with our team, and if so, who

I have not.

Additional context/screenshots

I am fairly new to FluentUI, so if there is an alternative available path to achieve what I'm going for I would love to hear it! Enjoying things so far otherwise 👍

[paulgildea]

@pcapel Thanks for the feedback!

We're currently focusing on improvements to performance and coherence, as you can see in our pinned issue on the repo detailing our v8 plans. So while we don't plan to address this right now, we will take it into consideration when we schedule future work for Text component.

Thanks for reaching out to us! 👍

In the meantime, we're trying to build up our community on Stack Overflow, so you could ask if anyone has found a work around using the office-ui-fabric-react and fluentui tags.

[pcapel]

@paulgildea Thanks for the response! That makes sense. Some of what I found is as follows, just for posterity:

TooltipHost supports an overflowMode which could potentially solve this issue for me. However, it also seems that it doesn't support identifying a child that is overflowing. Since the desired behavior is to have the overflow ellipses and theme benefits of Text in addition to the overflow-triggered tooltip.

I had forgotten that the overflow state of ellipsis is something that you can set purely with CSS, so my initial assumption that there was some calculation going on under the hood was incorrect. This means that it probably shouldn't fall on the library to afford me the convenience of not doing a little calculation.

In the end I used the canvas element's 2D context to get the measured text based on the current theme information and calculated that against the current width of the wrapping div using a ref. I connected that to the component state and put an update in a 'resize' event handler so as to update the rendering of the component should a user shrink the screen enough to trigger an overflow. Essentially:

function getRenderedTextWidth(text, fontProps) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = fontProps;
  const { width } = ctx.measureText(text);
  return width;
}

// as a hook for convenience
function useTruncateNotifier(text, fontProps) {
  const [width, setWidth] = useState(0);
  const ref = useRef(null);

  useEffect(() => {
    const handleResize = () => {f
      setWidth(ref.current.offsetWidth);
    }
    // ensure width is set on first render
    handleResize();
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    }
  }, [ref]);
  const textWidth = getRenderedTextWidth(text, fontProps);
  const willTruncate = width < textWidth;

  return [ref, willTruncate]

The fontProps that I used is a string formed by the following:

const fontProps = `${theme.fonts.medium.fontSize} ${theme.fonts.medium.fontFamily}`

That's roughly the implementation that works for my situation. I haven't poked any holes in it yet, but I usually need a little sleep before I can see how I messed things up anyway! 🤣

I feel like this can be closed, since the assumption I had when I made it was unfounded.
Thanks!

[JustSlone]

So, for the original scenario. TooltipHost actually already has this functionality see overflowMode here: ITooltipHostProps. For examples using this see the "Tooltip only on overflow" example on the Tooltip page.

The core of the implementation for detecting overflow is:

fluentui/packages/utilities/src/overflow.ts

Lines 8 to 10 in baa5199

	export function hasHorizontalOverflow(element: HTMLElement): boolean {
	return element.clientWidth < element.scrollWidth;
	}

Of course there is more work to do around getting a reference to the element on the DOM, as well as figuring out when to recalculate if there is truncation. The ToolTipHost code actually does it on mouse enter, but for other scenarios you may need to do it on resize.

Glad you figured out a solution that works for you, if you end up with a nice reusable solution that would be generally useful, please consider contributing it back to Fluent UI!

I'm going to close this issue, but feel free to reach out again!