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,61 @@
+import React from 'react';
+
+import { EuiInnerText } from '../../../../src/components/inner_text';
+
+import {
+  EuiBadge,
+  EuiCode,
+  EuiFlexGroup,
+  EuiHighlight,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiPanel,
+  EuiText,
+} from '../../../../src/components';
+
+export default () => (
+  <EuiText size="s">
+    <h5>Example:</h5>
+    <EuiInnerText>
+      {(ref, innerText) => (
+        <React.Fragment>
+          <EuiFlexGroup>
+            <EuiFlexItem grow={false}>
+              <EuiPanel paddingSize="s" grow={false}>
+                <span ref={ref} title={innerText}>
+                  Simple string content
+                </span>
+              </EuiPanel>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <h5 className="eui-displayInlineBlock">Output:</h5>{' '}
+          <EuiCode>{innerText}</EuiCode>
+        </React.Fragment>
+      )}
+    </EuiInnerText>
+
+    <EuiHorizontalRule margin="xl" />
+
+    <h5>Example:</h5>
+    <EuiInnerText>
+      {(ref, innerText) => (
+        <React.Fragment>
+          <EuiFlexGroup>
+            <EuiFlexItem grow={false}>
+              <EuiPanel paddingSize="s" grow={false}>
+                <span ref={ref} title={innerText}>
+                  <EuiHighlight search="content">
+                    EuiHighlight content
+                  </EuiHighlight>
+                  <EuiBadge>with EuiBadge</EuiBadge>
+                </span>
+              </EuiPanel>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <h5 className="eui-displayInlineBlock">Output:</h5>{' '}
+          <EuiCode>{innerText}</EuiCode>
+        </React.Fragment>
+      )}
+    </EuiInnerText>
+  </EuiText>
+);

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

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import { GuideSectionTypes } from '../../components';
+
+import { EuiCode, EuiSpacer, EuiText } from '../../../../src/components';
+
+import InnerText from './inner_text';
+const innerTextSource = require('!!raw-loader!./inner_text');
+const innerTextHtml = renderToHtml(InnerText);
+const useInnerTextSnippet = `// useInnerText
+const [ref, innerText] = useInnerText();
+<span ref={ref} title={innerText}>
+  Content
+</span>`;
+const euiInnerTextSnippet = `// 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>
+      </EuiText>
+      <EuiSpacer />
+    </React.Fragment>
+  ),
+  sections: [
+    {
+      title: 'Rendered',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: innerTextSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: innerTextHtml,
+        },
+      ],
+      demo: <InnerText />,
+      snippet: [useInnerTextSnippet, euiInnerTextSnippet],
+    },
+  ],
+};

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

@@ -60,7 +60,7 @@ export default class extends Component {
 
         <EuiSpacer size="l" />
 
-        <EuiListGroup flush={flushWidth} bordered={showBorder} showToolTips>
+        <EuiListGroup flush={flushWidth} bordered={showBorder}>
           <EuiListGroupItem label="First item" />
 
           <EuiListGroupItem label="Second item" />

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,27 @@ export const ListGroupExample = {
       ),
       demo: <ListGroupLinkActions />,
     },
+    {
+      title: 'Text wrapping and tooltips',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: listGroupExtraSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: listGroupExtraHtml,
+        },
+      ],
+      text: (
+        <p>
+          Optional props <EuiCode>showToolTip</EuiCode> and{' '}
+          <EuiCode>wrapLines</EuiCode> can be used to augment the display of
+          list items. Use these when lists are inside small containers where it
+          is likely that the content will be truncated.
+        </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}>
+        data-text={dataText || innerText}
+        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);
+};