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.

Sign up for GitHub

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
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9b5d2ca
Spreading toolTipProps into EuiListGroupItem for more customization.
1Copenut Aug 1, 2023
35aed30
Adding CHANGELOG for iPR 7018.
1Copenut Aug 1, 2023
73fbd9a
Merge branch 'main' into feature/7000-euiListItem-propSpread
1Copenut Aug 1, 2023
e426c3a
Fixed className to point to child anchor class(es).
1Copenut Aug 1, 2023
ba277cd
Merge branch 'main' into feature/7000-euiListItem-propSpread
1Copenut Aug 4, 2023
9c741d7
Refactoring tests to include a check for toolTipProps.
1Copenut Aug 4, 2023
1c9d522
Update src/components/list_group/list_group_item.test.tsx
1Copenut Aug 4, 2023
3f9b318
Update src/components/list_group/list_group_item.test.tsx
1Copenut Aug 4, 2023
0c98496
Added data-test-subj to toolTipProps.
1Copenut Aug 4, 2023
15c4c7d
Making the EuiToolTipProps simpler extensions of CommonProps.
1Copenut Aug 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions src/components/list_group/list_group.test.tsx
View file
Open in desktop
cee-chen marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,6 @@ const someListItems: EuiListGroupItemProps[] = [
onClick: (e) => {
console.log('Visualize clicked', e);
},
toolTipProps: {
delay: 'regular',
position: 'top',
title: 'Title of record',
},
},
{
label: 'Active link',
Expand Down
23 changes: 22 additions & 1 deletion src/components/list_group/list_group_item.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +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, waitForEuiToolTipVisible } from '../../test/rtl';
import { fireEvent } from '@testing-library/react';

import { EuiListGroupItem, SIZES, COLORS } from './list_group_item';

Expand Down Expand Up @@ -223,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
3 changes: 2 additions & 1 deletion src/components/list_group/list_group_item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,8 @@ export type EuiListGroupItemProps = CommonProps &
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.


/**
* Props can be passed to nested `EuiToolTip`.
* Allows customizing the tooltip shown when `showToolTip` is true.
* Accepts any props that [EuiToolTip](/#/display/tooltip) accepts.
*/
toolTipProps?: Partial<EuiToolTipProps>;
};
Expand Down
2 changes: 1 addition & 1 deletion upcoming_changelogs/7018.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
- Added `toolTipProps` to `EuiListGroupItem` to customize nested tooltips.
- Added `toolTipProps` to `EuiListGroupItem` that allows customizing item tooltips.