Revert inline prop.

elastic · Mar 22, 2018 · 7aae2ad · 7aae2ad
1 parent d7fef6c
commit 7aae2ad
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 29 deletions.
diff --git 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: (
-    <div>
+    <Fragment>
       <EuiCallOut
         title="Demo of visual pattern only"
         color="warning"
@@ -37,7 +37,7 @@ export const FilterGroupExample = {
       </EuiCallOut>
 
       <EuiSpacer size="l" />
-    </div>
+    </Fragment>
   ),
   sections: [{
     source: [{

diff --git 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: (
-    <div>
+    <Fragment>
       <EuiCallOut
         title="Coloring and padding exist for examples only"
         color="warning"
@@ -85,7 +85,7 @@ export const FlexExample = {
       </EuiCallOut>
 
       <EuiSpacer size="l" />
-    </div>
+    </Fragment>
   ),
   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
@@ -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: (
-    <div>
+    <Fragment>
       <EuiCallOut
         title="Try not to stuff these in loops"
         color="warning"
@@ -37,7 +37,7 @@ export const SpacerExample = {
       </EuiCallOut>
 
       <EuiSpacer size="l" />
-    </div>
+    </Fragment>
   ),
   sections: [{
     source: [{

diff --git 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 () => (
       <p>
         This tooltip appears on the{' '}
         <EuiToolTip
-          inline
           position="top"
           content="Here is some tooltip text"
         >
@@ -27,7 +26,6 @@ export default () => (
       <p>
         This tooltip appears on the{' '}
         <EuiToolTip
-          inline
           position="left"
           title="Tooltip titles are optional"
           content="Here is some tooltip text. Lets add some more content to see how it wraps."
@@ -40,7 +38,6 @@ export default () => (
       <p>
         This tooltip appears on the{' '}
         <EuiToolTip
-          inline
           position="right"
           content="Here is some tooltip text"
         >
@@ -51,7 +48,6 @@ export default () => (
       <p>
         This tooltip appears on the bottom of this icon:{' '}
         <EuiToolTip
-          inline
           position="bottom"
           content="Here is some tooltip text"
         >

diff --git 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: (
+    <Fragment>
+      <EuiCallOut
+        title="EuiToolTip only applies to inline elements"
+      >
+        <p>
+          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.
+        </p>
+      </EuiCallOut>
+
+      <EuiSpacer size="l" />
+    </Fragment>
+  ),
   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
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiIconTip is rendered 1`] = `
-<div
+<span
   class="euiToolTipAnchor"
 >
   <svg
@@ -21,11 +21,11 @@ exports[`EuiIconTip is rendered 1`] = `
       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>
-</div>
+</span>
 `;
 
 exports[`EuiIconTip props type is rendered as the icon 1`] = `
-<div
+<span
   class="euiToolTipAnchor"
 >
   <svg
@@ -49,5 +49,5 @@ exports[`EuiIconTip props type is rendered as the icon 1`] = `
       />
     </g>
   </svg>
-</div>
+</span>
 `;
diff --git a/src/components/tool_tip/__snapshots__/tool_tip.test.js.snap b/src/components/tool_tip/__snapshots__/tool_tip.test.js.snap
@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiToolTip is rendered 1`] = `
-<div
+<span
   class="euiToolTipAnchor"
 >
   <button
     aria-describedby="id"
   >
     Trigger
   </button>
-</div>
+</span>
 `;
diff --git 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 = (
-      <AnchorElement
+      <span
         ref={anchor => this.anchor = anchor}
         className="euiToolTipAnchor"
       >
@@ -133,7 +130,7 @@ export class EuiToolTip extends Component {
           onMouseOver: this.showToolTip,
           onMouseOut: this.onMouseOut
         })}
-      </AnchorElement>
+      </span>
     );
 
     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 = {