Fixed className to point to child anchor class(es).

elastic · Aug 2, 2023 · e426c3a · e426c3a
1 parent 73fbd9a
commit e426c3a
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 24 deletions.
diff --git a/src-docs/src/views/list_group/list_group_example.js b/src-docs/src/views/list_group/list_group_example.js
@@ -159,8 +159,8 @@ export const ListGroupExample = {
             <EuiCode>label</EuiCode>.
           </p>
           <p>
-            Use <EuiCode>toolTipProps</EuiCode> to customize tooltip placement,
-            title, and other behaviors.
+            You can also use <EuiCode>toolTipProps</EuiCode> to customize
+            tooltip placement, title, and other behaviors.
           </p>
         </>
       ),

diff --git a/src-docs/src/views/list_group/list_group_extra.tsx b/src-docs/src/views/list_group/list_group_extra.tsx
@@ -1,18 +1,6 @@
 import React from 'react';
 
-import {
-  EuiListGroup,
-  EuiListGroupItem,
-  EuiToolTipProps,
-} from '../../../../src/components';
-
-const myToolTipProps: EuiToolTipProps = {
-  children: <span />,
-  delay: 'regular',
-  id: '12345',
-  position: 'top',
-  title: 'Title of record',
-};
+import { EuiListGroup, EuiListGroupItem } from '../../../../src/components';
 
 export default () => (
   <EuiListGroup showToolTips>
@@ -38,7 +26,11 @@ export default () => (
       onClick={() => {}}
       wrapText
       label="Fourth very long item with wrapping enabled, custom props, and will not force truncation."
-      toolTipProps={myToolTipProps}
+      toolTipProps={{
+        delay: 'regular',
+        position: 'top',
+        title: 'Title of record',
+      }}
     />
   </EuiListGroup>
 );
diff --git a/src/components/list_group/list_group.test.tsx b/src/components/list_group/list_group.test.tsx
@@ -33,9 +33,7 @@ const someListItems: EuiListGroupItemProps[] = [
       console.log('Visualize clicked', e);
     },
     toolTipProps: {
-      children: <button />,
       delay: 'regular',
-      id: '12345',
       position: 'top',
       title: 'Title of record',
     },

diff --git a/src/components/list_group/list_group_item.test.tsx b/src/components/list_group/list_group_item.test.tsx
@@ -9,7 +9,8 @@
 import React from 'react';
 import { shouldRenderCustomStyles } from '../../test/internal';
 import { requiredProps } from '../../test/required_props';
-import { render } from '../../test/rtl';
+import { render, waitForEuiToolTipVisible } from '../../test/rtl';
+import { fireEvent } from '@testing-library/react';
 
 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(

diff --git a/src/components/list_group/list_group_item.tsx b/src/components/list_group/list_group_item.tsx
@@ -146,9 +146,9 @@ export type EuiListGroupItemProps = CommonProps &
     toolTipText?: string;
 
     /**
-     * Props can be passed to nested`EuiToolTip`.
+     * Props can be passed to nested `EuiToolTip`.
      */
-    toolTipProps?: EuiToolTipProps;
+    toolTipProps?: Partial<EuiToolTipProps>;
   };
 
 export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps> = ({
@@ -326,17 +326,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>