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
Prev Previous commit
Next Next commit
Fixed className to point to child anchor class(es).
  • Loading branch information
@1Copenut
1Copenut committed Aug 2, 2023
commit e426c3a14ae11bc39ca88953652acfafe3f9c70e
4 changes: 2 additions & 2 deletions src-docs/src/views/list_group/list_group_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
),
Expand Down
20 changes: 6 additions & 14 deletions src-docs/src/views/list_group/list_group_extra.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
);
2 changes: 0 additions & 2 deletions src/components/list_group/list_group.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
Expand Down
19 changes: 18 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 @@ -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';

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
23 changes: 18 additions & 5 deletions 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,9 +146,9 @@ 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`.
* Props can be passed to nested `EuiToolTip`.
*/
toolTipProps?: EuiToolTipProps;
toolTipProps?: Partial<EuiToolTipProps>;
};

export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps> = ({
Expand Down Expand Up @@ -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>
Expand Down