Add EuiIconTip (#528)

* Add EuiIconTip.

CHANGELOG.md

@@ -1,5 +1,7 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `EuiIconTip` to make it easier to display icons with tooltips ([#528](https://github.com/elastic/eui/pull/528))
+
 **Bug fixes**
 
 - Fix `EuiPageContent` centering within `EuiPage` issue ([#527](https://github.com/elastic/eui/pull/527))

src-docs/src/views/tool_tip/icon_tip.js

@@ -0,0 +1,37 @@
+import React, { Fragment } from 'react';
+
+import {
+  EuiCheckbox,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIconTip,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export default () => (
+  <Fragment>
+    <EuiFlexGroup alignItems="center" gutterSize="s">
+      <EuiFlexItem grow={false}>
+        <EuiCheckbox
+          id="explainedCheckbox"
+          label="Use source maps"
+          onChange={() => {}}
+        />
+      </EuiFlexItem>
+
+      <EuiFlexItem grow={false}>
+        <EuiIconTip
+          content="Source maps allow browser dev tools to map minified code to the original source code"
+          position="right"
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+
+    <EuiSpacer />
+
+    <EuiIconTip
+      type="alert"
+      content="I do not think it means what you think it means"
+    />
+  </Fragment>
+);

src-docs/src/views/tool_tip/tool_tip_example.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { renderToHtml } from '../../services';
 
@@ -9,12 +9,17 @@ import {
 import {
   EuiCode,
   EuiToolTip,
+  EuiIconTip,
 } from '../../../../src/components';
 
 import ToolTip from './tool_tip';
 const toolTipSource = require('!!raw-loader!./tool_tip');
 const toolTipHtml = renderToHtml(ToolTip);
 
+import IconTip from './icon_tip';
+const infoTipSource = require('!!raw-loader!./icon_tip');
+const infoTipHtml = renderToHtml(IconTip);
+
 export const ToolTipExample = {
   title: 'ToolTip',
   sections: [{
@@ -36,5 +41,29 @@ export const ToolTipExample = {
     ),
     props: { EuiToolTip },
     demo: <ToolTip />,
+  }, {
+    title: 'IconTip',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: infoTipSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: infoTipHtml,
+    }],
+    text: (
+      <Fragment>
+        <p>
+          You can use <EuiCode>EuiIconTip</EuiCode> to explain options, other controls, or entire
+          parts of the user interface. When possible, surface explanations inline within the UI,
+          and only hide them behind a <EuiCode>EuiIconTip</EuiCode> as a last resort.
+        </p>
+        <p>
+          It accepts all the same props as <EuiCode>EuiToolTip</EuiCode>.
+          For convenience, you can also specify an optional icon <EuiCode>type</EuiCode> prop.
+        </p>
+      </Fragment>
+    ),
+    props: { EuiToolTip, EuiIconTip },
+    demo: <IconTip />,
   }],
 };

src/components/index.js

@@ -260,6 +260,7 @@ export {
 } from './toast';
 
 export {
+  EuiIconTip,
   EuiToolTip,
 } from './tool_tip';
 

src/components/tool_tip/__snapshots__/icon_tip.test.js.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiIconTip is rendered 1`] = `
+<span>
+  <svg
+    aria-describedby="id"
+    class="euiIcon euiIcon--medium"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
+    />
+    <path
+      d="M7.086 10.169c.01-.534.077-.955.2-1.264.123-.31.375-.653.755-1.03l.969-.907c.414-.426.621-.883.621-1.372 0-.47-.135-.84-.407-1.106-.27-.267-.665-.4-1.183-.4-.503 0-.908.12-1.214.363-.305.242-.458.567-.458.975H5c.01-.727.295-1.313.855-1.759C6.415 3.223 7.143 3 8.04 3c.932 0 1.658.228 2.178.683.52.455.781 1.079.781 1.872 0 .785-.4 1.558-1.199 2.32l-.806.727c-.36.363-.54.885-.54 1.567H7.086zM7.027 12.3c0-.202.068-.371.204-.508.135-.137.336-.205.603-.205.266 0 .468.068.606.205a.686.686 0 0 1 .207.508.664.664 0 0 1-.207.5c-.138.133-.34.199-.606.199-.267 0-.468-.066-.603-.198a.67.67 0 0 1-.204-.501z"
+    />
+  </svg>
+</span>
+`;
+
+exports[`EuiIconTip props type is rendered as the icon 1`] = `
+<span>
+  <svg
+    aria-describedby="id"
+    class="euiIcon euiIcon--medium"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g
+      fill-rule="evenodd"
+    >
+      <path
+        d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
+      />
+      <path
+        d="M7 6h1v5H7zM7 12h1v1H7z"
+      />
+    </g>
+  </svg>
+</span>
+`;

src/components/tool_tip/icon_tip.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { EuiIcon } from '../icon';
+import { EuiToolTip } from './tool_tip';
+
+export const EuiIconTip = ({ type, ...rest }) => (
+  <EuiToolTip {...rest}>
+    <EuiIcon type={type} />
+  </EuiToolTip>
+);
+
+EuiIconTip.propTypes = {
+  /**
+   * The icon type.
+   */
+  type: PropTypes.string,
+};
+
+EuiIconTip.defaultProps = {
+  type: 'questionInCircle',
+};

src/components/tool_tip/icon_tip.test.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test';
+
+import { EuiIconTip } from './icon_tip';
+
+describe('EuiIconTip', () => {
+  test('is rendered', () => {
+    const component = render(
+      <EuiIconTip title="title" id="id" content="content" {...requiredProps} />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+
+  describe('props', () => {
+    describe('type', () => {
+      test('is rendered as the icon', () => {
+        const component = render(
+          <EuiIconTip type="alert" id="id" content="content" />
+        );
+
+        expect(component)
+          .toMatchSnapshot();
+      });
+    });
+  });
+});

src/components/tool_tip/index.js

@@ -1,3 +1,7 @@
 export {
   EuiToolTip,
 } from './tool_tip';
+
+export {
+  EuiIconTip,
+} from './icon_tip';