[EuiListGroupItem] Add Tooltip text prop (#6186)

* Added tooltip text in listGroupItem

* Updated src-doc for euiListGroupItem

* Added changelog entry

* Update src-docs/src/views/list_group/list_group_example.js

Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>

src-docs/src/views/list_group/list_group_example.js

@@ -139,12 +139,18 @@ export const ListGroupExample = {
         },
       ],
       text: (
-        <p>
-          Optional props <EuiCode>showToolTip</EuiCode> and{' '}
-          <EuiCode>wrapLines</EuiCode> 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.
-        </p>
+        <>
+          <p>
+            Similarly, <EuiCode>toolTipText</EuiCode> can be used to provide
+            tooltip text. By default, the tooltip will have the text same as{' '}
+            <EuiCode>label</EuiCode> text.
+          </p>
+          <p>
+            In addtion to that, optional prop <EuiCode>toolTipText</EuiCode> can
+            be also used to provide tooltip text. By default, the tooltip will
+            have the text same as <EuiCode>label</EuiCode> text.
+          </p>
+        </>
       ),
       demo: <ListGroupExtra />,
       snippet: `<EuiListGroup showToolTips>

src-docs/src/views/list_group/list_group_extra.js

@@ -4,7 +4,11 @@ import { EuiListGroup, EuiListGroupItem } from '../../../../src/components';
 
 export default () => (
   <EuiListGroup showToolTips>
-    <EuiListGroupItem onClick={() => {}} label="First item" />
+    <EuiListGroupItem
+      onClick={() => {}}
+      label="First item"
+      toolTipText="This is tooltip text"
+    />
 
     <EuiListGroupItem onClick={() => {}} label="Second item" />
 

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<HTMLButtonElement>;
+
+    /**
+     * 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<EuiListGroupItemProps> = ({
@@ -157,6 +163,7 @@ export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps> = ({
   showToolTip = false,
   wrapText,
   buttonRef,
+  toolTipText,
   ...rest
 }) => {
   const isHrefValid = !href || validateHref(href);
@@ -291,7 +298,7 @@ export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps> = ({
       <li className={classes}>
         <EuiToolTip
           anchorClassName="euiListGroupItem__tooltip"
-          content={label}
+          content={toolTipText ?? label}
           position="right"
           delay="long"
         >

upcoming_changelogs/6186.md

@@ -0,0 +1 @@
+- Added `tooltipText` as an optional prop on `EuiListGroupItem`