Fix collapsed action to have the same tooltip delay as non-collapsed …

…actions - this involves adding `toolTipProps` to `EuiContextMenuItem` - deprecate a few other top-level tooltip props while here, for simpler API usage
elastic · Nov 17, 2023 · cdc1c39 · cdc1c39
1 parent d29b623
commit cdc1c39
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 7 deletions.
diff --git a/changelogs/upcoming/7373.md b/changelogs/upcoming/7373.md
@@ -1,5 +1,11 @@
 - Updated the actions column in `EuiBasicTable` and `EuiInMemoryTable`s. Alongside `name`, the `description`, `href`, and `data-test-subj` properties now also accept an optional callback that the current `item` will be passed to
+- Updated `EuiContextMenuItem` with a new `toolTipProps` prop
 
 **Bug fixes**
 
 - Fixed non-`isPrimary` actions (collapsed within a popover) not showing the action description in a tooltip
+
+**Deprecations**
+
+- Deprecated `EuiContextMenuItem`'s `toolTipTitle` prop. Use `toolTipProps.title` instead
+- Deprecated `EuiContextMenuItem`'s `toolTipPosition` prop. Use `toolTipProps.position` instead
diff --git a/src/components/basic_table/collapsed_item_actions.tsx b/src/components/basic_table/collapsed_item_actions.tsx
@@ -103,6 +103,7 @@ export const CollapsedItemActions = <T extends {}>({
               onClickItem(onClick ? () => onClick(item) : undefined)
             }
             toolTipContent={toolTipContent}
+            toolTipProps={{ delay: 'long' }}
           >
             {buttonContent}
           </EuiContextMenuItem>

diff --git a/src/components/context_menu/__snapshots__/context_menu_item.test.tsx.snap b/src/components/context_menu/__snapshots__/context_menu_item.test.tsx.snap
@@ -60,3 +60,52 @@ exports[`EuiContextMenuItem renders 1`] = `
   </span>
 </a>
 `;
+
+exports[`EuiContextMenuItem tooltip behavior 1`] = `
+<body
+  class="euiBody-hasPortalContent"
+>
+  <div>
+    <span
+      class="euiToolTipAnchor eui-displayBlock emotion-euiToolTipAnchor-inlineBlock"
+    >
+      <button
+        aria-describedby="generated-id"
+        class="euiContextMenuItem emotion-euiContextMenuItem-m-center"
+        type="button"
+      >
+        <span
+          class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
+        >
+          Hello
+        </span>
+      </button>
+    </span>
+  </div>
+  <div
+    data-euiportal="true"
+  >
+    <div
+      class="euiToolTipPopover euiToolTip emotion-euiToolTip-top"
+      data-position="top"
+      id="generated-id"
+      position="top"
+      role="tooltip"
+      style="top: -16px; left: -10px;"
+    >
+      <div
+        class="euiToolTip__title emotion-euiToolTip__title"
+      >
+        Test
+      </div>
+      <div
+        class="euiToolTip__arrow emotion-euiToolTip__arrow-top"
+        style="left: 4px; top: 0px;"
+      />
+      <div>
+        tooltip content
+      </div>
+    </div>
+  </div>
+</body>
+`;
diff --git a/src/components/context_menu/context_menu_item.test.tsx b/src/components/context_menu/context_menu_item.test.tsx
@@ -8,7 +8,7 @@
 
 import React from 'react';
 import { fireEvent } from '@testing-library/react';
-import { render } from '../../test/rtl';
+import { render, waitForEuiToolTipVisible } from '../../test/rtl';
 import { shouldRenderCustomStyles } from '../../test/internal';
 import { requiredProps } from '../../test/required_props';
 
@@ -17,6 +17,18 @@ import { EuiContextMenuItem, SIZES } from './context_menu_item';
 describe('EuiContextMenuItem', () => {
   shouldRenderCustomStyles(<EuiContextMenuItem />);
 
+  shouldRenderCustomStyles(
+    <EuiContextMenuItem toolTipContent="test" data-test-subj="trigger" />,
+    {
+      childProps: ['toolTipProps', 'toolTipProps.anchorProps'],
+      skip: { parentTest: true },
+      renderCallback: async ({ getByTestSubject }) => {
+        fireEvent.mouseOver(getByTestSubject('trigger'));
+        await waitForEuiToolTipVisible();
+      },
+    }
+  );
+
   it('renders', () => {
     const { container } = render(
       <EuiContextMenuItem {...requiredProps} href="url">
@@ -121,4 +133,22 @@ describe('EuiContextMenuItem', () => {
       ).toBeInTheDocument();
     });
   });
+
+  test('tooltip behavior', async () => {
+    const { getByRole, baseElement } = render(
+      <EuiContextMenuItem
+        toolTipContent="tooltip content"
+        toolTipTitle="overridden"
+        // Should override the deprecated props
+        toolTipProps={{ title: 'Test', position: 'top', delay: 'long' }}
+      >
+        Hello
+      </EuiContextMenuItem>
+    );
+
+    fireEvent.mouseOver(getByRole('button'));
+    await waitForEuiToolTipVisible();
+
+    expect(baseElement).toMatchSnapshot();
+  });
 });
diff --git a/src/components/context_menu/context_menu_item.tsx b/src/components/context_menu/context_menu_item.tsx
@@ -25,7 +25,7 @@ import {
 import { validateHref } from '../../services/security/href_validator';
 import { CommonProps, keysOf } from '../common';
 import { EuiIcon } from '../icon';
-import { EuiToolTip, ToolTipPositions } from '../tool_tip';
+import { EuiToolTip, EuiToolTipProps, ToolTipPositions } from '../tool_tip';
 
 import { euiContextMenuItemStyles } from './context_menu_item.styles';
 
@@ -46,11 +46,16 @@ export interface EuiContextMenuItemProps extends CommonProps {
    */
   toolTipContent?: ReactNode;
   /**
-   * Optional title for the tooltip
+   * Optional configuration to pass to the underlying [EuiToolTip](/#/display/tooltip).
+   * Accepts any prop that EuiToolTip does, except for `content` and `children`.
+   */
+  toolTipProps?: Partial<Omit<EuiToolTipProps, 'content' | 'children'>>;
+  /**
+   * @deprecated Use toolTipProps.title instead
    */
   toolTipTitle?: ReactNode;
   /**
-   * Dictates the position of the tooltip.
+   * @deprecated Use tooltipProps.position instead
    */
   toolTipPosition?: ToolTipPositions;
   href?: string;
@@ -94,6 +99,7 @@ export const EuiContextMenuItem: FunctionComponent<Props> = ({
   toolTipTitle,
   toolTipContent,
   toolTipPosition = 'right',
+  toolTipProps,
   href,
   target,
   rel,
@@ -173,7 +179,7 @@ export const EuiContextMenuItem: FunctionComponent<Props> = ({
         {buttonContent}
       </a>
     );
-  } else if (href || rest.onClick) {
+  } else if (href || rest.onClick || toolTipContent) {
     button = (
       <button
         disabled={disabled}
@@ -200,12 +206,17 @@ export const EuiContextMenuItem: FunctionComponent<Props> = ({
   }
 
   if (toolTipContent) {
+    const anchorClasses = classNames(
+      'eui-displayBlock',
+      toolTipProps?.anchorClassName
+    );
     return (
       <EuiToolTip
         title={toolTipTitle ? toolTipTitle : null}
-        content={toolTipContent}
-        anchorClassName="eui-displayBlock"
         position={toolTipPosition}
+        {...toolTipProps}
+        anchorClassName={anchorClasses}
+        content={toolTipContent}
       >
         {button}
       </EuiToolTip>