Put extra action button inside EuiToolTip

elastic · Sep 6, 2023 · 6e46fb7 · 6e46fb7
1 parent d41c55f
commit 6e46fb7
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 14 deletions.
diff --git a/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap b/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
@@ -145,19 +145,19 @@ exports[`EuiListGroupItem props extraAction is rendered with showToolTip 1`] = `
         Label
       </span>
     </span>
+    <button
+      aria-label="label"
+      class="euiButtonIcon euiListGroupItemExtraAction emotion-euiButtonIcon-xs-empty-text-euiListGroupItemExtraAction-alwaysShow"
+      type="button"
+    >
+      <span
+        aria-hidden="true"
+        class="euiButtonIcon__icon"
+        color="inherit"
+        data-euiicon-type="empty"
+      />
+    </button>
   </span>
-  <button
-    aria-label="label"
-    class="euiButtonIcon euiListGroupItemExtraAction emotion-euiButtonIcon-xs-empty-text-euiListGroupItemExtraAction-alwaysShow"
-    type="button"
-  >
-    <span
-      aria-hidden="true"
-      class="euiButtonIcon__icon"
-      color="inherit"
-      data-euiicon-type="empty"
-    />
-  </button>
 </li>
 `;
 

diff --git a/src/components/list_group/list_group_item.tsx b/src/components/list_group/list_group_item.tsx
@@ -352,9 +352,11 @@ export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps> = ({
           anchorClassName={anchorClasses}
           anchorProps={anchorPropsAndCss}
         >
-          {itemContent}
+          <>
+            {itemContent}
+            {extraActionNode}
+          </>
         </EuiToolTip>
-        {extraActionNode}
       </li>
     );
   } else {