[EuiBasicTable] Fix row heights jumping when actions are disabled

elastic · Jan 19, 2023 · 6bd050f · 6bd050f
1 parent 0a86e46
commit 6bd050f
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 2 deletions.
diff --git a/src/components/basic_table/basic_table.styles.ts b/src/components/basic_table/basic_table.styles.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+// Unsets the extra height caused by tooltip wrappers around table action buttons
+// Without this, the row height jumps whenever actions are disabled
+export const euiBasicTableActionsToolTipWrapper = css`
+  line-height: 1;
+`;
diff --git a/src/components/basic_table/collapsed_item_actions.tsx b/src/components/basic_table/collapsed_item_actions.tsx
@@ -14,6 +14,7 @@ import { EuiButtonIcon } from '../button';
 import { EuiToolTip } from '../tool_tip';
 import { EuiI18n } from '../i18n';
 import { Action, CustomItemAction } from './action_types';
+import { euiBasicTableActionsToolTipWrapper } from './basic_table.styles';
 import { ItemIdResolved } from './table_types';
 
 export interface CollapsedItemActionsProps<T> {
@@ -186,7 +187,11 @@ export class CollapsedItemActions<T> extends Component<
     const withTooltip = !allDisabled && (
       <EuiI18n token="euiCollapsedItemActions.allActions" default="All actions">
         {(allActions: ReactNode) => (
-          <EuiToolTip content={allActions} delay="long">
+          <EuiToolTip
+            content={allActions}
+            delay="long"
+            anchorProps={{ css: euiBasicTableActionsToolTipWrapper }}
+          >
             {popoverButton}
           </EuiToolTip>
         )}

diff --git a/src/components/basic_table/default_item_action.tsx b/src/components/basic_table/default_item_action.tsx
@@ -16,6 +16,7 @@ import {
 } from '../button';
 import { EuiToolTip } from '../tool_tip';
 import { DefaultItemAction as Action } from './action_types';
+import { euiBasicTableActionsToolTipWrapper } from './basic_table.styles';
 import { useGeneratedHtmlId } from '../../services/accessibility';
 import { EuiScreenReaderOnly } from '../accessibility';
 
@@ -102,7 +103,11 @@ export const DefaultItemAction = <T extends {}>({
   }
 
   return enabled && action.description ? (
-    <EuiToolTip content={action.description} delay="long">
+    <EuiToolTip
+      content={action.description}
+      delay="long"
+      anchorProps={{ css: euiBasicTableActionsToolTipWrapper }}
+    >
       {button}
     </EuiToolTip>
   ) : (