useInnerText; Fix EuiListGroupItem title attrs

[thompsongl]

Summary

Adds a custom hook (useInnerText), a render prop component (EuiInnerText, for class components), and uses the former to fix #2011.

EuiListGroupItem would provisionally get a title attribute if it was suspected that its content would truncate. This was unnecessary if it used custom tooltips or was allowed to wrap lines. Logic added fixes this.
EuiListGroupItem also accepts React node children, which would make the rendered value of the title attribute unreadable ([object Object]). useInnerText now updates the attribute value to match the text content of the list item.

Checklist

- [ ] This was checked in mobile
- [ ] This was checked in IE11
- [ ] This was checked in dark mode
- [ ] Any props added have proper autodocs

• Documentation examples were added
• A changelog entry exists and is marked appropriately
• This was checked for breaking changes and labeled appropriately
• Jest tests were updated or added to match the most common scenarios

- [ ] This was checked against keyboard-only and screenreader scenarios
- [ ] This required updates to Framer X components

[thompsongl]

Working on getting these types of tests to run

[thompsongl]

Still stumped. I'm not actually sure if Enzyme can handle it.

[cchaos]

Can you add this to the EuiFilterButton component as well?

[thompsongl]

Ok, ready for review (sorry; should've made it Draft to start)

I'll figure out how to correctly test hooks in the meantime.

[cchaos]

Can you alter the docs for innerText a bit?

1. I'm thinking the big Usage section isn't really needed because the snippets should take care of that. (You can also reference the snippet tab in the explanation).
2. I'd add a bit about why a consumer would need this or really our typically usage for it (truncation).
3. Update the examples so it's a little clearer what you are trying to show.

Something like:

[cchaos]

A few more docs comments

[cchaos]

I think these other two can be combined into one group even though it will still show a tooltip on the wrapped lines one.

• First item
• Second item
• Third very, very long item that will surely force truncation
• Fourth very, very long item with wrapping enabled that will not force truncation

[cchaos]

TY! Just one more thing, I promise...

Can you add two snippets for this example?

<EuiListGroup showToolTips>...</EuiListGroup>

<EuiListGroupItem
  wrapText
  label={label}
/>

[cchaos]

@thompsongl Did you see my last comment on here? ^^

[chandlerprall]

Love the simplicity!

This doesn't account for data that updates. Let's throw a mutation observer on that ref as well to catch text changes. Unfortunately we can't use EuiMutationObserver because we aren't wrapping, but should be pretty straightforward none-the-less.

[chandlerprall]

This also doesn't update if the ref changes (important for re-attaching a mutation observer as well). This is a stupid bit of code, but this modified doc example demonstrates:

export default () => {
  const [[thing, type], setThing] = useState(['Input 1', 'span']);
  useEffect(() => {
    console.log('setting timeout');
    setTimeout(() => {
      console.log('setting to Input 2');
      setThing(['Input 2', 'div']);
    }, 5000);
  }, [setThing]);

  return (
    <EuiText size="s">
      <h5>Example:</h5>
      <EuiInnerText>
        {(ref, innerText) => (
          <React.Fragment>
            <EuiFlexGroup>
              <EuiFlexItem grow={false}>
                <EuiPanel paddingSize="s" grow={false}>
                  {React.createElement(
                    type,
                    {
                      ref,
                      title: innerText,
                    },
                    thing
                  )}
                </EuiPanel>
              </EuiFlexItem>
            </EuiFlexGroup>
            <h5 className="eui-displayInlineBlock">Output:</h5>{' '}
            <EuiCode>{innerText}</EuiCode>
          </React.Fragment>
        )}
      </EuiInnerText>
    </EuiText>
  );
};

with useInnerText modified with two console.logs

export function useInnerText(
  innerTextFallback?: string
): [RefObject<HTMLElement>, string | undefined] {
  const ref = useRef<HTMLElement>(null);
  const [innerText, setInnerText] = useState(innerTextFallback);
  useEffect(() => {
    console.log(ref.current);
    if (ref && ref.current) {
      console.log('setting innerText', ref.current.innerText)
      setInnerText(ref.current.innerText);
    }
  }, [ref.current]);

  return [ref, innerText];
}

console output is

inner_text.tsx:17 <span title=​"Input 1">​Input 1​</span>​
inner_text.tsx:19 setting innerText Input 1
inner_text.js:19 setting timeout
inner_text.tsx:17 <span title=​"Input 1">​Input 1​</span>​
inner_text.tsx:19 setting innerText Input 1
inner_text.js:21 setting to Input 2

the inner_text.tsx:17 <span title=​"Input 1">​Input 1​</span>​ lines are the first console.log in useEffect, but there isn't a subsequent one when the underlying element switches from a span to a div.

[thompsongl]

@chandlerprall I stopped using useRef based on advice in this article. That solves the changing element problem.
Also instituted MutationObserver for the content updates, but the polyfill we use for testing doesn't jibe with useState. Commented out the test, but you can see it work in the docs now.

[chandlerprall]

Changes LGTM; tested examples locally; this is so cool ❄️