Add tooltips to context menu (#817)

Tooltips can now be set on context menu items.
elastic · May 11, 2018 · 935f9e2 · 935f9e2
1 parent 9c3ca32
commit 935f9e2
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - Added utility CSS classes for text and alignment concerns.  ([#774](https://github.com/elastic/eui/pull/774))
 - Added `compressed` versions of `EuiFormRow` and all form controls.  ([#800](https://github.com/elastic/eui/pull/800))
+- Added the ability to add tooltips to `EuiContextMenuItem`s.  ([#817](https://github.com/elastic/eui/pull/817))
 
 **Bug fixes**
 

diff --git a/src-docs/src/views/context_menu/context_menu.js b/src-docs/src/views/context_menu/context_menu.js
@@ -101,8 +101,11 @@ export default class extends Component {
         icon: 'user',
         onClick: () => { this.closePopover(); window.alert('Edit / add panels'); },
       }, {
-        name: 'Display options',
+        name: 'You can add a tooltip',
         icon: 'user',
+        toolTipTitle: 'Optional tooltip',
+        toolTipContent: 'Optional content for a tooltip',
+        toolTipPosition: 'right',
         onClick: () => { this.closePopover(); window.alert('Display options'); },
       }, {
         name: 'Disabled option',

diff --git a/src-docs/src/views/context_menu/context_menu_example.js b/src-docs/src/views/context_menu/context_menu_example.js
@@ -9,6 +9,8 @@ import {
 import {
   EuiCode,
   EuiContextMenu,
+  EuiContextMenuPanel,
+  EuiContextMenuItem,
 } from '../../../../src/components';
 
 import ContextMenu from './context_menu';
@@ -36,7 +38,7 @@ export const ContextMenuExample = {
         which itself can be wrapped around any component (like a button in this example).
       </p>
     ),
-    props: { EuiContextMenu },
+    props: { EuiContextMenu, EuiContextMenuPanel, EuiContextMenuItem },
     demo: <ContextMenu />,
   }, {
     title: `With single panel`,

diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap
@@ -30,11 +30,13 @@ exports[`CollapsedItemActions render 1`] = `
           disabled={false}
           icon={undefined}
           onClick={[Function]}
+          toolTipPosition="right"
         >
           default1
         </EuiContextMenuItem>,
         <EuiContextMenuItem
           onClick={[Function]}
+          toolTipPosition="right"
         />,
       ]
     }

diff --git a/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap b/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap
@@ -115,7 +115,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should
 "<EuiContextMenuPanel items={{...}} hasFocus={true}>
   <div className=\\"euiContextMenuPanel\\" onKeyDown={[Function]} tabIndex=\\"0\\" onAnimationEnd={[Function]}>
     <div>
-      <EuiContextMenuItem data-counter={0} buttonRef={[Function: bound ]}>
+      <EuiContextMenuItem data-counter={0} toolTipPosition=\\"right\\" buttonRef={[Function: bound ]}>
         <button className=\\"euiContextMenuItem\\" type=\\"button\\" disabled={[undefined]} data-counter={0}>
           <span className=\\"euiContextMenu__itemLayout\\">
             <span className=\\"euiContextMenuItem__text\\">
@@ -124,7 +124,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should
           </span>
         </button>
       </EuiContextMenuItem>
-      <EuiContextMenuItem data-counter={1} buttonRef={[Function: bound ]}>
+      <EuiContextMenuItem data-counter={1} toolTipPosition=\\"right\\" buttonRef={[Function: bound ]}>
         <button className=\\"euiContextMenuItem\\" type=\\"button\\" disabled={[undefined]} data-counter={1}>
           <span className=\\"euiContextMenu__itemLayout\\">
             <span className=\\"euiContextMenuItem__text\\">
@@ -142,7 +142,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should
 "<EuiContextMenuPanel items={{...}} hasFocus={true}>
   <div className=\\"euiContextMenuPanel\\" onKeyDown={[Function]} tabIndex=\\"0\\" onAnimationEnd={[Function]}>
     <div>
-      <EuiContextMenuItem data-counter={0} buttonRef={[Function: bound ]}>
+      <EuiContextMenuItem data-counter={0} toolTipPosition=\\"right\\" buttonRef={[Function: bound ]}>
         <button className=\\"euiContextMenuItem\\" type=\\"button\\" disabled={[undefined]} data-counter={0}>
           <span className=\\"euiContextMenu__itemLayout\\">
             <span className=\\"euiContextMenuItem__text\\">
@@ -151,7 +151,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should
           </span>
         </button>
       </EuiContextMenuItem>
-      <EuiContextMenuItem data-counter={1} buttonRef={[Function: bound ]}>
+      <EuiContextMenuItem data-counter={1} toolTipPosition=\\"right\\" buttonRef={[Function: bound ]}>
         <button className=\\"euiContextMenuItem\\" type=\\"button\\" disabled={[undefined]} data-counter={1}>
           <span className=\\"euiContextMenu__itemLayout\\">
             <span className=\\"euiContextMenuItem__text\\">
@@ -189,7 +189,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should
 "<EuiContextMenuPanel watchedItemProps={{...}} items={{...}} hasFocus={true}>
   <div className=\\"euiContextMenuPanel\\" onKeyDown={[Function]} tabIndex=\\"0\\" onAnimationEnd={[Function]}>
     <div>
-      <EuiContextMenuItem data-counter={0} buttonRef={[Function: bound ]}>
+      <EuiContextMenuItem data-counter={0} toolTipPosition=\\"right\\" buttonRef={[Function: bound ]}>
         <button className=\\"euiContextMenuItem\\" type=\\"button\\" disabled={[undefined]} data-counter={0}>
           <span className=\\"euiContextMenu__itemLayout\\">
             <span className=\\"euiContextMenuItem__text\\">
@@ -198,7 +198,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should
           </span>
         </button>
       </EuiContextMenuItem>
-      <EuiContextMenuItem data-counter={1} buttonRef={[Function: bound ]}>
+      <EuiContextMenuItem data-counter={1} toolTipPosition=\\"right\\" buttonRef={[Function: bound ]}>
         <button className=\\"euiContextMenuItem\\" type=\\"button\\" disabled={[undefined]} data-counter={1}>
           <span className=\\"euiContextMenu__itemLayout\\">
             <span className=\\"euiContextMenuItem__text\\">
@@ -216,7 +216,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should
 "<EuiContextMenuPanel watchedItemProps={{...}} items={{...}} hasFocus={true}>
   <div className=\\"euiContextMenuPanel\\" onKeyDown={[Function]} tabIndex=\\"0\\" onAnimationEnd={[Function]}>
     <div>
-      <EuiContextMenuItem data-counter={2} buttonRef={[Function: bound ]}>
+      <EuiContextMenuItem data-counter={2} toolTipPosition=\\"right\\" buttonRef={[Function: bound ]}>
         <button className=\\"euiContextMenuItem\\" type=\\"button\\" disabled={[undefined]} data-counter={2}>
           <span className=\\"euiContextMenu__itemLayout\\">
             <span className=\\"euiContextMenuItem__text\\">
@@ -225,7 +225,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should
           </span>
         </button>
       </EuiContextMenuItem>
-      <EuiContextMenuItem data-counter={3} buttonRef={[Function: bound ]}>
+      <EuiContextMenuItem data-counter={3} toolTipPosition=\\"right\\" buttonRef={[Function: bound ]}>
         <button className=\\"euiContextMenuItem\\" type=\\"button\\" disabled={[undefined]} data-counter={3}>
           <span className=\\"euiContextMenu__itemLayout\\">
             <span className=\\"euiContextMenuItem__text\\">

diff --git a/src/components/context_menu/context_menu.js b/src/components/context_menu/context_menu.js
@@ -199,6 +199,8 @@ export class EuiContextMenu extends Component {
         name,
         icon,
         onClick,
+        toolTipTitle,
+        toolTipContent,
         ...rest
       } = item;
 
@@ -221,6 +223,8 @@ export class EuiContextMenu extends Component {
           icon={icon}
           onClick={onClickHandler}
           hasPanel={Boolean(panel)}
+          toolTipTitle={toolTipTitle}
+          toolTipContent={toolTipContent}
           {...rest}
         >
           {name}

diff --git a/src/components/context_menu/context_menu_item.js b/src/components/context_menu/context_menu_item.js
@@ -6,26 +6,49 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import { EuiIcon } from '../icon';
+import { EuiToolTip } from '../tool_tip';
 
 export class EuiContextMenuItem extends Component {
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
+    /**
+     * Icon used for the item
+     */
     icon: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
     onClick: PropTypes.func,
+    /**
+     * Whether the item leads to a new set of items
+     */
     hasPanel: PropTypes.bool,
     buttonRef: PropTypes.func,
     disabled: PropTypes.bool,
+    /**
+     * Required if using a tooltip. Add an optional tooltip on hover
+     */
+    toolTipContent: PropTypes.node,
+    /**
+     * Optional title for the tooltip
+     */
+    toolTipTitle: PropTypes.node,
+    /**
+     * Dictates the position of the tooltip.
+     */
+    toolTipPosition: PropTypes.string,
   };
 
   render() {
+
     const {
       children,
       className,
       hasPanel,
       icon,
       buttonRef,
       disabled,
+      toolTipTitle,
+      toolTipContent,
+      toolTipPosition,
       ...rest
     } = this.props;
 
@@ -67,7 +90,7 @@ export class EuiContextMenuItem extends Component {
       'euiContextMenuItem-isDisabled': disabled,
     });
 
-    return (
+    const button = (
       <button
         className={classes}
         type="button"
@@ -84,5 +107,27 @@ export class EuiContextMenuItem extends Component {
         </span>
       </button>
     );
+
+    if (toolTipContent) {
+      return (
+        <EuiToolTip
+          title={toolTipTitle ? toolTipTitle : null}
+          content={toolTipContent}
+          anchorClassName="eui-displayBlock"
+          position={toolTipPosition}
+        >
+          {button}
+        </EuiToolTip>
+      );
+    } else {
+      return (
+        button
+      );
+    }
+
   }
 }
+
+EuiContextMenuItem.defaultProps = {
+  toolTipPosition: "right",
+};
diff --git a/src/components/tool_tip/tool_tip.js b/src/components/tool_tip/tool_tip.js
@@ -88,6 +88,7 @@ export class EuiToolTip extends Component {
     const {
       children,
       className,
+      anchorClassName,
       content,
       title,
       ...rest
@@ -99,6 +100,11 @@ export class EuiToolTip extends Component {
       className
     );
 
+    const anchorClasses = classNames(
+      'euiToolTipAnchor',
+      anchorClassName,
+    );
+
     let tooltip;
     if (this.state.visible) {
       tooltip = (
@@ -121,7 +127,7 @@ export class EuiToolTip extends Component {
     const anchor = (
       <span
         ref={anchor => this.anchor = anchor}
-        className="euiToolTipAnchor"
+        className={anchorClasses}
       >
         {cloneElement(children, {
           onFocus: this.showToolTip,