diff --git a/CHANGELOG.md b/CHANGELOG.md index 751a4ff83a8..a356004c13e 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/src-docs/src/views/tool_tip/icon_tip.js b/src-docs/src/views/tool_tip/icon_tip.js new file mode 100644 index 00000000000..28a9d6e5b06 --- /dev/null +++ b/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 () => ( + + + + {}} + /> + + + + + + + + + + + +); diff --git a/src-docs/src/views/tool_tip/tool_tip_example.js b/src-docs/src/views/tool_tip/tool_tip_example.js index ff008a34832..82db91b9dcd 100644 --- a/src-docs/src/views/tool_tip/tool_tip_example.js +++ b/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: , + }, { + title: 'IconTip', + source: [{ + type: GuideSectionTypes.JS, + code: infoTipSource, + }, { + type: GuideSectionTypes.HTML, + code: infoTipHtml, + }], + text: ( + +

+ You can use EuiIconTip 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 EuiIconTip as a last resort. +

+

+ It accepts all the same props as EuiToolTip. + For convenience, you can also specify an optional icon type prop. +

+ + ), + props: { EuiToolTip, EuiIconTip }, + demo: , }], }; diff --git a/src/components/index.js b/src/components/index.js index 250853169ea..5581642a633 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -260,6 +260,7 @@ export { } from './toast'; export { + EuiIconTip, EuiToolTip, } from './tool_tip'; diff --git a/src/components/tool_tip/__snapshots__/icon_tip.test.js.snap b/src/components/tool_tip/__snapshots__/icon_tip.test.js.snap new file mode 100644 index 00000000000..65f20992a0a --- /dev/null +++ b/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`] = ` + + + + + + +`; + +exports[`EuiIconTip props type is rendered as the icon 1`] = ` + + + + + + + + +`; diff --git a/src/components/tool_tip/icon_tip.js b/src/components/tool_tip/icon_tip.js new file mode 100644 index 00000000000..b7af43d1988 --- /dev/null +++ b/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 }) => ( + + + +); + +EuiIconTip.propTypes = { + /** + * The icon type. + */ + type: PropTypes.string, +}; + +EuiIconTip.defaultProps = { + type: 'questionInCircle', +}; diff --git a/src/components/tool_tip/icon_tip.test.js b/src/components/tool_tip/icon_tip.test.js new file mode 100644 index 00000000000..37775d5fb9c --- /dev/null +++ b/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( + + ); + + expect(component) + .toMatchSnapshot(); + }); + + describe('props', () => { + describe('type', () => { + test('is rendered as the icon', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); + }); + }); +}); diff --git a/src/components/tool_tip/index.js b/src/components/tool_tip/index.js index cadac9c8b64..c6a8c5cf4a2 100644 --- a/src/components/tool_tip/index.js +++ b/src/components/tool_tip/index.js @@ -1,3 +1,7 @@ export { EuiToolTip, } from './tool_tip'; + +export { + EuiIconTip, +} from './icon_tip';