diff --git a/src-docs/src/views/filter_group/filter_group_example.js b/src-docs/src/views/filter_group/filter_group_example.js index 0ed02c74fc9..c9593f0d234 100644 --- a/src-docs/src/views/filter_group/filter_group_example.js +++ b/src-docs/src/views/filter_group/filter_group_example.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import { renderToHtml } from '../../services'; @@ -22,7 +22,7 @@ const filterGroupHtml = renderToHtml(FilterGroup); export const FilterGroupExample = { title: 'Filter Group', intro: ( -
+ -
+ ), sections: [{ source: [{ diff --git a/src-docs/src/views/flex/flex_example.js b/src-docs/src/views/flex/flex_example.js index 55fb0f587d7..4ef788352ff 100644 --- a/src-docs/src/views/flex/flex_example.js +++ b/src-docs/src/views/flex/flex_example.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import { renderToHtml } from '../../services'; @@ -72,7 +72,7 @@ const flexGroupResonsiveHtml = renderToHtml(FlexGroupResponsive); export const FlexExample = { title: 'Flex', intro: ( -
+ -
+ ), sections: [{ title: 'FlexGroup is for a single row layout', diff --git a/src-docs/src/views/spacer/spacer_example.js b/src-docs/src/views/spacer/spacer_example.js index 5ea4a6fb689..7793716d242 100644 --- a/src-docs/src/views/spacer/spacer_example.js +++ b/src-docs/src/views/spacer/spacer_example.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import { renderToHtml } from '../../services'; @@ -20,7 +20,7 @@ const spacerHtml = renderToHtml(Spacer); export const SpacerExample = { title: 'Spacer', intro: ( -
+ -
+ ), sections: [{ source: [{ diff --git a/src-docs/src/views/tool_tip/tool_tip.js b/src-docs/src/views/tool_tip/tool_tip.js index 0be8243d6c0..58f4fbff504 100644 --- a/src-docs/src/views/tool_tip/tool_tip.js +++ b/src-docs/src/views/tool_tip/tool_tip.js @@ -16,7 +16,6 @@ export default () => (

This tooltip appears on the{' '} @@ -27,7 +26,6 @@ export default () => (

This tooltip appears on the{' '} (

This tooltip appears on the{' '} @@ -51,7 +48,6 @@ export default () => (

This tooltip appears on the bottom of this icon:{' '} 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 82db91b9dcd..e804f803ddb 100644 --- a/src-docs/src/views/tool_tip/tool_tip_example.js +++ b/src-docs/src/views/tool_tip/tool_tip_example.js @@ -7,9 +7,11 @@ import { } from '../../components'; import { + EuiCallOut, EuiCode, EuiToolTip, EuiIconTip, + EuiSpacer, } from '../../../../src/components'; import ToolTip from './tool_tip'; @@ -22,6 +24,20 @@ const infoTipHtml = renderToHtml(IconTip); export const ToolTipExample = { title: 'ToolTip', + intro: ( + + +

+ EuiToolTip wraps its children in a span element, so if you pass in a block-level child + (e.g. a div) the resulting DOM will be in violation of the HTML5 spec. +

+ + + + + ), sections: [{ source: [{ type: GuideSectionTypes.JS, diff --git a/src/components/tool_tip/__snapshots__/icon_tip.test.js.snap b/src/components/tool_tip/__snapshots__/icon_tip.test.js.snap index e4740c9b9e9..4567c32c117 100644 --- a/src/components/tool_tip/__snapshots__/icon_tip.test.js.snap +++ b/src/components/tool_tip/__snapshots__/icon_tip.test.js.snap @@ -1,7 +1,7 @@ // 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/__snapshots__/tool_tip.test.js.snap b/src/components/tool_tip/__snapshots__/tool_tip.test.js.snap index ed0eba05692..c6a5cdf0d99 100644 --- a/src/components/tool_tip/__snapshots__/tool_tip.test.js.snap +++ b/src/components/tool_tip/__snapshots__/tool_tip.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiToolTip is rendered 1`] = ` -
-
+ `; diff --git a/src/components/tool_tip/tool_tip.js b/src/components/tool_tip/tool_tip.js index 364b31fd371..6b5e7a9dd44 100644 --- a/src/components/tool_tip/tool_tip.js +++ b/src/components/tool_tip/tool_tip.js @@ -90,7 +90,6 @@ export class EuiToolTip extends Component { className, content, title, - inline, ...rest } = this.props; @@ -119,10 +118,8 @@ export class EuiToolTip extends Component { ); } - const AnchorElement = inline ? 'span' : 'div'; - const anchor = ( - this.anchor = anchor} className="euiToolTipAnchor" > @@ -133,7 +130,7 @@ export class EuiToolTip extends Component { onMouseOver: this.showToolTip, onMouseOut: this.onMouseOut })} - + ); return ( @@ -174,11 +171,6 @@ EuiToolTip.propTypes = { * Unless you provide one, this will be randomly generated. */ id: PropTypes.string, - - /** - * Use span instead of div. - */ - inline: PropTypes.bool, }; EuiToolTip.defaultProps = {