Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiListGroupItem] Adding a toolTipProps spread operator to allow tooltip customization #7018

Merged
merged 10 commits into from
Aug 4, 2023
4 changes: 4 additions & 0 deletions src-docs/src/views/list_group/list_group_example.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 />,
Expand Down
7 changes: 6 additions & 1 deletion src-docs/src/views/list_group/list_group_extra.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
40 changes: 39 additions & 1 deletion src/components/list_group/list_group_item.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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(
Expand Down Expand Up @@ -206,6 +223,27 @@ 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={{
anchorProps: {
'data-test-subj': 'tooltip-anchor',
},
1Copenut marked this conversation as resolved.
Show resolved Hide resolved
}}
/>
);
fireEvent.mouseOver(getByTestSubject('trigger'));
await waitForEuiToolTipVisible();
expect(getByTestSubject('tooltip-anchor')).toBeInTheDocument();
1Copenut marked this conversation as resolved.
Show resolved Hide resolved
});
});
});

test('renders a disabled button even if provided an href', () => {
Expand Down
29 changes: 25 additions & 4 deletions src/components/list_group/list_group_item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -144,6 +144,12 @@ export type EuiListGroupItemProps = CommonProps &
* By default the text will be same as the label text.
*/
toolTipText?: string;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[not a change request, just me thinking out loud] I wonder if we should consider deprecating this prop in favor of telling consumers to use toolTipProps.content 🤔 Probably not since this is a nicer API, but wanted to throw that out there

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I lean toward keeping it. Agree with you it's a nice API and saves a few keystrokes if folks want to just add a custom string the tooltip than string plus N number more change.


/**
* 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> = ({
Expand All @@ -166,6 +172,7 @@ export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps> = ({
wrapText,
buttonRef,
toolTipText,
toolTipProps,
...rest
}) => {
const isClickable = !!(href || onClick);
Expand Down Expand Up @@ -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}
1Copenut marked this conversation as resolved.
Show resolved Hide resolved
anchorClassName={anchorClasses}
anchorProps={anchorPropsAndCss}
>
{itemContent}
</EuiToolTip>
Expand Down
1 change: 1 addition & 0 deletions upcoming_changelogs/7018.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- Added `toolTipProps` to `EuiListGroupItem` that allows customizing item tooltips.