From 304f35cd551ef55a031567b8f54172cbf98abad7 Mon Sep 17 00:00:00 2001
From: Trevor Pierce <1Copenut@users.noreply.github.com>
Date: Fri, 4 Aug 2023 18:20:29 -0500
Subject: [PATCH] [EuiListGroupItem] Adding a `toolTipProps` spread operator to
 allow tooltip customization (#7018)

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
---
 .../views/list_group/list_group_example.js    |  4 ++
 .../src/views/list_group/list_group_extra.tsx |  7 +++-
 .../list_group/list_group_item.test.tsx       | 38 ++++++++++++++++++-
 src/components/list_group/list_group_item.tsx | 29 ++++++++++++--
 src/components/tool_tip/tool_tip.tsx          |  2 +-
 upcoming_changelogs/7018.md                   |  1 +
 6 files changed, 74 insertions(+), 7 deletions(-)
 create mode 100644 upcoming_changelogs/7018.md

diff --git a/src-docs/src/views/list_group/list_group_example.js b/src-docs/src/views/list_group/list_group_example.js
index d300221fc52..b34bad0618f 100644
--- a/src-docs/src/views/list_group/list_group_example.js
+++ b/src-docs/src/views/list_group/list_group_example.js
@@ -158,6 +158,10 @@ export const ListGroupExample = {
             tooltip text. By default, the tooltip will have the text same as the{' '}
             <EuiCode>label</EuiCode>.
           </p>
+          <p>
+            You can also use <EuiCode>toolTipProps</EuiCode> to customize
+            tooltip placement, title, and other behaviors.
+          </p>
         </>
       ),
       demo: <ListGroupExtra />,
diff --git a/src-docs/src/views/list_group/list_group_extra.tsx b/src-docs/src/views/list_group/list_group_extra.tsx
index 56535d1ced9..a672d0f290c 100644
--- a/src-docs/src/views/list_group/list_group_extra.tsx
+++ b/src-docs/src/views/list_group/list_group_extra.tsx
@@ -25,7 +25,12 @@ export default () => (
     <EuiListGroupItem
       onClick={() => {}}
       wrapText
-      label="Fourth very, very long item with wrapping enabled that will not force truncation"
+      label="Fourth very long item with wrapping enabled, custom props, and will not force truncation."
+      toolTipProps={{
+        delay: 'regular',
+        position: 'top',
+        title: 'Title of record',
+      }}
     />
   </EuiListGroup>
 );
diff --git a/src/components/list_group/list_group_item.test.tsx b/src/components/list_group/list_group_item.test.tsx
index 786c4a42e05..17ad96829bf 100644
--- a/src/components/list_group/list_group_item.test.tsx
+++ b/src/components/list_group/list_group_item.test.tsx
@@ -7,9 +7,10 @@
  */
 
 import React from 'react';
+import { fireEvent } from '@testing-library/react';
 import { shouldRenderCustomStyles } from '../../test/internal';
 import { requiredProps } from '../../test/required_props';
-import { render } from '../../test/rtl';
+import { render, waitForEuiToolTipVisible } from '../../test/rtl';
 
 import { EuiListGroupItem, SIZES, COLORS } from './list_group_item';
 
@@ -33,6 +34,22 @@ describe('EuiListGroupItem', () => {
       skip: { parentTest: true },
     }
   );
+  shouldRenderCustomStyles(
+    <EuiListGroupItem
+      label="Label"
+      toolTipText="Tooltip"
+      showToolTip
+      data-test-subj="trigger"
+    />,
+    {
+      childProps: ['toolTipProps', 'toolTipProps.anchorProps'],
+      skip: { parentTest: true },
+      renderCallback: async ({ getByTestSubject }) => {
+        fireEvent.mouseOver(getByTestSubject('trigger'));
+        await waitForEuiToolTipVisible();
+      },
+    }
+  );
 
   test('is rendered', () => {
     const { container } = render(
@@ -206,6 +223,25 @@ describe('EuiListGroupItem', () => {
         expect(container.firstChild).toMatchSnapshot();
       });
     });
+
+    describe('toolTipProps', () => {
+      test('renders custom tooltip props', async () => {
+        const { getByTestSubject } = render(
+          <EuiListGroupItem
+            label="Label"
+            toolTipText="Tooltip"
+            showToolTip
+            data-test-subj="trigger"
+            toolTipProps={{
+              'data-test-subj': 'tooltip',
+            }}
+          />
+        );
+        fireEvent.mouseOver(getByTestSubject('trigger'));
+        await waitForEuiToolTipVisible();
+        expect(getByTestSubject('tooltip')).toBeInTheDocument();
+      });
+    });
   });
 
   test('renders a disabled button even if provided an href', () => {
diff --git a/src/components/list_group/list_group_item.tsx b/src/components/list_group/list_group_item.tsx
index 581585b8572..cab136d1ed5 100644
--- a/src/components/list_group/list_group_item.tsx
+++ b/src/components/list_group/list_group_item.tsx
@@ -19,7 +19,7 @@ import React, {
 import classNames from 'classnames';
 
 import { EuiIcon, IconType, EuiIconProps } from '../icon';
-import { EuiToolTip } from '../tool_tip';
+import { EuiToolTip, EuiToolTipProps } from '../tool_tip';
 import { useInnerText } from '../inner_text';
 import { ExclusiveUnion, CommonProps } from '../common';
 import {
@@ -144,6 +144,12 @@ export type EuiListGroupItemProps = CommonProps &
      * By default the text will be same as the label text.
      */
     toolTipText?: string;
+
+    /**
+     * Allows customizing the tooltip shown when `showToolTip` is true.
+     * Accepts any props that [EuiToolTip](/#/display/tooltip) accepts.
+     */
+    toolTipProps?: Partial<EuiToolTipProps>;
   };
 
 export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps> = ({
@@ -166,6 +172,7 @@ export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps> = ({
   wrapText,
   buttonRef,
   toolTipText,
+  toolTipProps,
   ...rest
 }) => {
   const isClickable = !!(href || onClick);
@@ -320,16 +327,30 @@ export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps> = ({
 
   if (showToolTip) {
     const tooltipStyles = euiListGroupItemTooltipStyles();
-    const cssTooltipStyles = [tooltipStyles.euiListGroupItem__tooltip];
+    const cssTooltipStyles = [
+      tooltipStyles.euiListGroupItem__tooltip,
+      toolTipProps?.anchorProps?.css,
+    ];
+
+    const anchorClasses = classNames(
+      'euiListGroupItem__tooltip',
+      toolTipProps?.anchorClassName
+    );
+
+    const anchorPropsAndCss = {
+      ...toolTipProps?.anchorProps,
+      css: cssTooltipStyles,
+    };
 
     itemContent = (
       <li className={classes} css={cssStyles}>
         <EuiToolTip
-          anchorClassName="euiListGroupItem__tooltip"
-          anchorProps={{ css: cssTooltipStyles }}
           content={toolTipText ?? label}
           position="right"
           delay="long"
+          {...toolTipProps}
+          anchorClassName={anchorClasses}
+          anchorProps={anchorPropsAndCss}
         >
           {itemContent}
         </EuiToolTip>
diff --git a/src/components/tool_tip/tool_tip.tsx b/src/components/tool_tip/tool_tip.tsx
index 98e39faee29..121b339ce4d 100644
--- a/src/components/tool_tip/tool_tip.tsx
+++ b/src/components/tool_tip/tool_tip.tsx
@@ -68,7 +68,7 @@ const DEFAULT_TOOLTIP_STYLES: ToolTipStyles = {
   visibility: 'hidden',
 };
 
-export interface EuiToolTipProps {
+export interface EuiToolTipProps extends CommonProps {
   /**
    * Passes onto the span wrapping the trigger.
    */
diff --git a/upcoming_changelogs/7018.md b/upcoming_changelogs/7018.md
new file mode 100644
index 00000000000..ee25d5c5e0e
--- /dev/null
+++ b/upcoming_changelogs/7018.md
@@ -0,0 +1 @@
+- Added `toolTipProps` to `EuiListGroupItem` that allows customizing item tooltips.