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{' '} label.

+

+ You can also use toolTipProps to customize + tooltip placement, title, and other behaviors. +

), demo: , 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 () => ( {}} 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', + }} /> ); 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( + , + { + 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( + + ); + 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; }; export const EuiListGroupItem: FunctionComponent = ({ @@ -166,6 +172,7 @@ export const EuiListGroupItem: FunctionComponent = ({ wrapText, buttonRef, toolTipText, + toolTipProps, ...rest }) => { const isClickable = !!(href || onClick); @@ -320,16 +327,30 @@ export const EuiListGroupItem: FunctionComponent = ({ 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 = (
  • {itemContent} 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.