From 22521e6ff42506d8173f34f08ddcb1383eb5a6d1 Mon Sep 17 00:00:00 2001 From: Shakti Date: Thu, 25 Aug 2022 08:51:53 +0530 Subject: [PATCH 1/5] Added tooltip text in listGroupItem --- src-docs/src/views/list_group/list_group_extra.js | 6 +++++- src/components/list_group/list_group_item.tsx | 9 ++++++++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/list_group/list_group_extra.js b/src-docs/src/views/list_group/list_group_extra.js index 0da3516bd3e..3c474d3c8bf 100644 --- a/src-docs/src/views/list_group/list_group_extra.js +++ b/src-docs/src/views/list_group/list_group_extra.js @@ -4,7 +4,11 @@ import { EuiListGroup, EuiListGroupItem } from '../../../../src/components'; export default () => ( - {}} label="First item" /> + {}} + label="First item" + toolTipText="This is first item" + /> {}} label="Second item" /> diff --git a/src/components/list_group/list_group_item.tsx b/src/components/list_group/list_group_item.tsx index 72938cb611e..de9f00f23f0 100644 --- a/src/components/list_group/list_group_item.tsx +++ b/src/components/list_group/list_group_item.tsx @@ -137,6 +137,12 @@ export type EuiListGroupItemProps = CommonProps & * instances where the item content is rendered as a `button` */ buttonRef?: React.Ref; + + /** + * Text to be displayed in the tooltip when `showToolTip` is true. + * By default the text will be same as the label text. + */ + toolTipText?: string; }; export const EuiListGroupItem: FunctionComponent = ({ @@ -157,6 +163,7 @@ export const EuiListGroupItem: FunctionComponent = ({ showToolTip = false, wrapText, buttonRef, + toolTipText, ...rest }) => { const isHrefValid = !href || validateHref(href); @@ -291,7 +298,7 @@ export const EuiListGroupItem: FunctionComponent = ({
  • From a05ab09b3696d9599f81545bc37979537d6f83ef Mon Sep 17 00:00:00 2001 From: Shakti Date: Fri, 26 Aug 2022 08:59:52 +0530 Subject: [PATCH 2/5] Updated src-doc for euiListGroupItem --- .../views/list_group/list_group_example.js | 19 +++++++++++++------ .../src/views/list_group/list_group_extra.js | 2 +- upcoming_changelogs/6114.md | 1 + 3 files changed, 15 insertions(+), 7 deletions(-) create mode 100644 upcoming_changelogs/6114.md 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 15420936580..3ad8a4a0c79 100644 --- a/src-docs/src/views/list_group/list_group_example.js +++ b/src-docs/src/views/list_group/list_group_example.js @@ -139,12 +139,19 @@ export const ListGroupExample = { }, ], text: ( -

    - Optional props showToolTip and{' '} - wrapLines can be used to augment the display of - list items. Use these when lists are inside small containers where it - is likely that the content will be truncated. -

    + <> +

    + Optional props showToolTip and{' '} + wrapLines can be used to augment the display of + list items. Use these when lists are inside small containers where + it is likely that the content will be truncated. +

    +

    + In addtion to that, optional prop toolTipText can + be also used to provide tooltip text. By default, the tooltip will + have the text same as label text. +

    + ), demo: , snippet: ` diff --git a/src-docs/src/views/list_group/list_group_extra.js b/src-docs/src/views/list_group/list_group_extra.js index 3c474d3c8bf..56535d1ced9 100644 --- a/src-docs/src/views/list_group/list_group_extra.js +++ b/src-docs/src/views/list_group/list_group_extra.js @@ -7,7 +7,7 @@ export default () => ( {}} label="First item" - toolTipText="This is first item" + toolTipText="This is tooltip text" /> {}} label="Second item" /> diff --git a/upcoming_changelogs/6114.md b/upcoming_changelogs/6114.md new file mode 100644 index 00000000000..09a3abc1f78 --- /dev/null +++ b/upcoming_changelogs/6114.md @@ -0,0 +1 @@ +- Added `tooltipText` as an optional prop on `EuiListGroupItem` \ No newline at end of file From 0e64407dbfb232f5e6a44d6c9f2e70d184abf83c Mon Sep 17 00:00:00 2001 From: Shakti Date: Sat, 27 Aug 2022 09:36:34 +0530 Subject: [PATCH 3/5] Added changelog entry --- upcoming_changelogs/{6114.md => 6186.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename upcoming_changelogs/{6114.md => 6186.md} (100%) diff --git a/upcoming_changelogs/6114.md b/upcoming_changelogs/6186.md similarity index 100% rename from upcoming_changelogs/6114.md rename to upcoming_changelogs/6186.md From 057f388dc3d7ec5325c5f0cb5fc3a77936dc6d0e Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Mon, 29 Aug 2022 14:15:07 -0500 Subject: [PATCH 4/5] Update src-docs/src/views/list_group/list_group_example.js --- src-docs/src/views/list_group/list_group_example.js | 7 +++---- 1 file changed, 3 insertions(+), 4 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 index 3ad8a4a0c79..b762b869e7f 100644 --- a/src-docs/src/views/list_group/list_group_example.js +++ b/src-docs/src/views/list_group/list_group_example.js @@ -141,10 +141,9 @@ export const ListGroupExample = { text: ( <>

    - Optional props showToolTip and{' '} - wrapLines can be used to augment the display of - list items. Use these when lists are inside small containers where - it is likely that the content will be truncated. + Similarly, toolTipText can be used to provide + tooltip text. By default, the tooltip will have the text same as{' '} + label text.

    In addtion to that, optional prop toolTipText can From 90e6f6bd3faef0c6145cde8f2a136fef6739ed48 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Mon, 29 Aug 2022 14:59:17 -0500 Subject: [PATCH 5/5] Update src-docs/src/views/list_group/list_group_example.js --- src-docs/src/views/list_group/list_group_example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 b762b869e7f..ee8ec417879 100644 --- a/src-docs/src/views/list_group/list_group_example.js +++ b/src-docs/src/views/list_group/list_group_example.js @@ -141,7 +141,7 @@ export const ListGroupExample = { text: ( <>

    - Similarly, toolTipText can be used to provide + Similarly, toolTipText can be used to provide tooltip text. By default, the tooltip will have the text same as{' '} label text.