[EuiListGroupItem] Adding a toolTipProps spread operator to allow t…

…ooltip customization (#7018)

Co-authored-by: Cee Chen <[email protected]>

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 />,

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>
 );

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', () => {

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>

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.
    */

upcoming_changelogs/7018.md

@@ -0,0 +1 @@
+- Added `toolTipProps` to `EuiListGroupItem` that allows customizing item tooltips.