useInnerText; Fix EuiListGroupItem title attrs

src-docs/src/routes.js

@@ -110,6 +110,8 @@ import { IconExample } from './views/icon/icon_example';
 
 import { ImageExample } from './views/image/image_example';
 
+import { InnerTextExample } from './views/inner_text/inner_text_example';
+
 import { KeyPadMenuExample } from './views/key_pad_menu/key_pad_menu_example';
 
 import { LinkExample } from './views/link/link_example';
@@ -371,6 +373,7 @@ const navigation = [
       ErrorBoundaryExample,
       FocusTrapExample,
       HighlightExample,
+      InnerTextExample,
       I18nExample,
       IsColorDarkExample,
       MutationObserverExample,

src-docs/src/views/inner_text/inner_text.js

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { EuiInnerText } from '../../../../src/components/inner_text';
+
+import {
+  EuiBadge,
+  EuiCode,
+  EuiHighlight,
+  EuiIcon,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export default () => (
+  <React.Fragment>
+    <EuiInnerText>
+      {(ref, innerText) => (
+        <React.Fragment>
+          <span ref={ref} title={innerText}>
+            Simple string content
+          </span>
+          <EuiIcon type="sortRight" />
+          <EuiCode>{innerText}</EuiCode>
+        </React.Fragment>
+      )}
+    </EuiInnerText>
+
+    <EuiSpacer />
+
+    <EuiInnerText>
+      {(ref, innerText) => (
+        <React.Fragment>
+          <span ref={ref} title={innerText}>
+            <EuiHighlight search="content">EuiHighlight content </EuiHighlight>
+            <EuiBadge>with EuiBadge</EuiBadge>
+          </span>
+          <EuiIcon type="sortRight" />
+          <EuiCode>{innerText}</EuiCode>
+        </React.Fragment>
+      )}
+    </EuiInnerText>
+  </React.Fragment>
+);

src-docs/src/views/inner_text/inner_text_example.js

@@ -0,0 +1,86 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import { GuideSectionTypes } from '../../components';
+
+import {
+  EuiCode,
+  EuiCodeBlock,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '../../../../src/components';
+
+import InnerText from './inner_text';
+const innerTextSource = require('!!raw-loader!./inner_text');
+const innerTextHtml = renderToHtml(InnerText);
+const innerTextSnippet = `// useInnerText
+const [ref, innerText] = useInnerText();
+<span ref={ref} title={innerText}>
+  Content
+</span>
+
+// EuiInnerText
+<EuiInnerText>
+  {(ref, innerText) => (
+    <span ref={ref} title={innerText}>
+      Content
+    </span>
+  )}
+</EuiInnerText>`;
+
+export const InnerTextExample = {
+  title: 'Inner Text',
+  intro: (
+    <React.Fragment>
+      <EuiText>
+        <p>
+          For instances where accessing the text content of a component that may
+          be wrapped or interspersed with other components, two utilities are
+          available:
+        </p>
+        <ul>
+          <li>
+            <EuiCode>useInnerText</EuiCode> - A custom React hook, usable in
+            function components
+          </li>
+          <li>
+            <EuiCode>EuiInnerText</EuiCode> - A higher order{' '}
+            <EuiCode>useInnerText</EuiCode> component for use in class
+            components
+          </li>
+        </ul>
+        <p>
+          Both utilities make available a <EuiCode>ref</EuiCode> reference to
+          add to the target DOM element, and the resulting{' '}
+          <EuiCode>innerText</EuiCode> value to use as needed.
+        </p>
+        <EuiTitle>
+          <h2>Usage</h2>
+        </EuiTitle>
+      </EuiText>
+      <EuiCodeBlock language="js" paddingSize="m">
+        {innerTextSnippet}
+      </EuiCodeBlock>
+      <EuiSpacer />
+    </React.Fragment>
+  ),
+  sections: [
+    {
+      title: 'Rendered',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: innerTextSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: innerTextHtml,
+        },
+      ],
+      demo: <InnerText />,
+      snippet: innerTextSnippet,
+    },
+  ],
+};

src-docs/src/views/list_group/list_group_example.js

@@ -22,6 +22,10 @@ import ListGroupLinkActions from './list_group_link_actions';
 const listGroupLinkActionsSource = require('!!raw-loader!./list_group_link_actions');
 const listGroupLinkActionsHtml = renderToHtml(ListGroupLinkActions);
 
+import ListGroupExtra from './list_group_extra';
+const listGroupExtraSource = require('!!raw-loader!./list_group_extra');
+const listGroupExtraHtml = renderToHtml(ListGroupExtra);
+
 export const ListGroupExample = {
   title: 'List Group',
   sections: [
@@ -95,5 +99,28 @@ export const ListGroupExample = {
       ),
       demo: <ListGroupLinkActions />,
     },
+    {
+      title: 'Text truncation and wrapping ',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: listGroupExtraSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: listGroupExtraHtml,
+        },
+      ],
+      text: (
+        <p>
+          By default, truncation occurs for long list items. In such cases a{' '}
+          <EuiCode>title</EuiCode> attribute with a value matching the text
+          content of the item is added for readability and accessibility. If{' '}
+          <EuiCode>showToolTip</EuiCode> or <EuiCode>wrapLines</EuiCode> are
+          used, the attribute will not be added.
+        </p>
+      ),
+      demo: <ListGroupExtra />,
+    },
   ],
 };

src-docs/src/views/list_group/list_group_extra.js

@@ -0,0 +1,55 @@
+import React, { Fragment } from 'react';
+
+import {
+  EuiListGroup,
+  EuiListGroupItem,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export default () => (
+  <Fragment>
+    <EuiListGroup>
+      <EuiListGroupItem label="We use defaults" />
+
+      <EuiListGroupItem
+        label={
+          <span>
+            A very, very long item that <strong>will surely</strong> force
+            truncation
+          </span>
+        }
+      />
+    </EuiListGroup>
+
+    <EuiSpacer />
+
+    <EuiListGroup>
+      <EuiListGroupItem wrapText label="We wrap lines" />
+
+      <EuiListGroupItem
+        wrapText
+        label={
+          <span>
+            A very, very long item that <strong>will surely</strong> force
+            wrapping
+          </span>
+        }
+      />
+    </EuiListGroup>
+
+    <EuiSpacer />
+
+    <EuiListGroup showToolTips>
+      <EuiListGroupItem label="We use tooltips" />
+
+      <EuiListGroupItem
+        label={
+          <span>
+            A very, very long item that <strong>will surely</strong> force
+            truncation
+          </span>
+        }
+      />
+    </EuiListGroup>
+  </Fragment>
+);

src/components/filter_group/filter_button.js

@@ -8,6 +8,8 @@ import { COLORS, ICON_SIDES, EuiButtonEmpty } from '../button/button_empty';
 
 import { IconPropType } from '../icon';
 
+import { useInnerText } from '../inner_text';
+
 export const EuiFilterButton = ({
   children,
   className,
@@ -53,12 +55,14 @@ export const EuiFilterButton = ({
     dataText = children;
   }
 
+  const [ref, innerText] = useInnerText();
   const buttonContents = (
     <Fragment>
       <span
+        ref={ref}
         className="euiFilterButton__textShift"
         data-text={dataText}
-        title={dataText}>
+        title={dataText || innerText}>
         {children}
       </span>
 

src/components/index.js

@@ -141,6 +141,8 @@ export { ICON_TYPES, EuiIcon } from './icon';
 
 export { EuiImage } from './image';
 
+export { useInnerText, EuiInnerText } from './inner_text';
+
 export { EuiI18n, EuiI18nNumber } from './i18n';
 
 export {

src/components/inner_text/__snapshots__/inner_text.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiInnerText is rendered 1`] = `
+<span>
+  Test
+</span>
+`;

src/components/inner_text/index.ts

@@ -0,0 +1 @@
+export { useInnerText, EuiInnerText } from './inner_text';

src/components/inner_text/inner_text.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import {
+  render,
+  // mount
+} from 'enzyme';
+import {
+  // findTestSubject,
+  requiredProps,
+} from '../../test';
+
+import { EuiInnerText } from './inner_text';
+
+describe('EuiInnerText', () => {
+  test('is rendered', () => {
+    const component = render(
+      <EuiInnerText {...requiredProps}>
+        {(ref, innerText) => (
+          <span ref={ref} title={innerText}>
+            Test
+          </span>
+        )}
+      </EuiInnerText>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  // test('uses innerText', () => {
+  //   const text = 'Test';
+  //   const component = mount(
+  //     <EuiInnerText {...requiredProps}>
+  //       {(ref, innerText) => (
+  //         <span ref={ref} title={innerText} data-test-subj="span">
+  //           {text}
+  //         </span>
+  //       )}
+  //     </EuiInnerText>
+  //   );
+  //
+  //   const span = findTestSubject(component, 'span');
+  //   expect(span.props().title).toBe(text);
+  // });
+});

src/components/inner_text/inner_text.tsx

@@ -0,0 +1,30 @@
+import {
+  FunctionComponent,
+  ReactElement,
+  Ref,
+  RefObject,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
+export function useInnerText(
+  innerTextFallback?: string
+): [RefObject<HTMLElement>, string | undefined] {
+  const ref = useRef<HTMLElement>(null);
+  const [innerText, setInnerText] = useState(innerTextFallback);
+  useEffect(() => {
+    if (ref && ref.current) {
+      setInnerText(ref.current.innerText);
+    }
+  }, [ref.current]);
+
+  return [ref, innerText];
+}
+
+export const EuiInnerText: FunctionComponent<{
+  children: (ref?: Ref<HTMLElement>, innerText?: string) => ReactElement;
+}> = ({ children }) => {
+  const [ref, innerText] = useInnerText();
+  return children(ref, innerText);
+};

src/components/list_group/list_group_item.js

@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import { EuiButtonIcon } from '../button';
 import { IconPropType, EuiIcon } from '../icon';
 import { EuiToolTip } from '../tool_tip';
+import { useInnerText } from '../inner_text';
 
 const sizeToClassNameMap = {
   xs: 'euiListGroupItem--xSmall',
@@ -79,12 +80,18 @@ export const EuiListGroupItem = ({
   }
 
   // Only add the label as the title attribute if it's possibly truncated
-  const labelContent = (
+  // Also ensure the value of the title attribute is a string
+  const [ref, innerText] = useInnerText();
+  const shouldRenderTitle = !wrapText && !showToolTip;
+  const labelContent = shouldRenderTitle ? (
     <span
+      ref={ref}
       className="euiListGroupItem__label"
-      title={wrapText ? undefined : label}>
+      title={typeof label === 'string' ? label : innerText}>
       {label}
     </span>
+  ) : (
+    <span className="euiListGroupItem__label">{label}</span>
   );
 
   // Handle the variety of interaction behavior