Fixed bug in EuiBasicTable to handle dynamic icon value properly in collapsed actions

CHANGELOG.md

@@ -9,6 +9,7 @@
 **Bug Fixes**
 
 - Fixed bug in `EuiAccordion` to adjust to the correct height when content height changes ([#3160](https://github.com/elastic/eui/pull/3160))
+- Fixed bug in `EuiBasicTable` to handle dynamic icon value properly in collapsed actions ([#3145](https://github.com/elastic/eui/pull/3145))
 
 ## [`22.2.0`](https://github.com/elastic/eui/tree/v22.2.0)
 

src-docs/src/views/tables/basic/props_info.js

@@ -430,12 +430,18 @@ export const propsInfo = {
         icon: {
           description: 'Associates an icon with the button',
           required: false,
-          type: { name: 'string (must be one of the supported icon types)' },
+          type: {
+            name:
+              'string | (item) => string (must be one of the supported icon types)',
+          },
         },
         color: {
           description: 'Defines the color of the button',
           required: false,
-          type: { name: 'string (must be one of the supported button colors)' },
+          type: {
+            name:
+              'string | (item) => string (must be one of the supported button colors)',
+          },
         },
         'data-test-subj': {
           description:

src/components/basic_table/collapsed_item_actions.tsx

@@ -1,15 +1,11 @@
 import React, { Component, FocusEvent, ReactNode, ReactElement } from 'react';
+import { isString } from '../../services/predicate';
 import { EuiContextMenuItem, EuiContextMenuPanel } from '../context_menu';
 import { EuiPopover } from '../popover';
 import { EuiButtonIcon } from '../button';
 import { EuiToolTip } from '../tool_tip';
 import { EuiI18n } from '../i18n';
-import {
-  Action,
-  CustomItemAction,
-  DefaultItemIconButtonAction,
-} from './action_types';
-import { EuiIconType } from '../icon/icon';
+import { Action, CustomItemAction } from './action_types';
 import { ItemIdResolved } from './table_types';
 
 export interface CollapsedItemActionsProps<T> {
@@ -123,13 +119,18 @@ export class CollapsedItemActions<T> extends Component<
           );
         } else {
           const { onClick, name, 'data-test-subj': dataTestSubj } = action;
+
+          const buttonIcon = action.icon;
+          let icon;
+          if (buttonIcon) {
+            icon = isString(buttonIcon) ? buttonIcon : buttonIcon(item);
+          }
+
           controls.push(
             <EuiContextMenuItem
               key={key}
               disabled={!enabled}
-              icon={
-                (action as DefaultItemIconButtonAction<T>).icon as EuiIconType
-              }
+              icon={icon}
               data-test-subj={dataTestSubj}
               onClick={this.onClickItem.bind(
                 null,

src/components/basic_table/default_item_action.tsx

@@ -1,11 +1,13 @@
 import React, { ReactElement } from 'react';
 import { isString } from '../../services/predicate';
-import { EuiButtonEmpty, EuiButtonIcon, EuiButtonEmptyColor } from '../button';
-import { EuiToolTip } from '../tool_tip';
 import {
-  DefaultItemAction as Action,
-  DefaultItemIconButtonAction as IconButtonAction,
-} from './action_types';
+  EuiButtonEmpty,
+  EuiButtonIcon,
+  EuiButtonEmptyColor,
+  EuiButtonIconColor,
+} from '../button';
+import { EuiToolTip } from '../tool_tip';
+import { DefaultItemAction as Action } from './action_types';
 
 export interface DefaultItemActionProps<T> {
   action: Action<T>;
@@ -32,14 +34,17 @@ export const DefaultItemAction = <T extends {}>({
 
   const onClick = action.onClick ? () => action.onClick!(item) : undefined;
 
-  const resolveActionColor = (action: Action<T>) =>
-    isString(action.color) ? action.color : action.color!(item);
-  const color = action.color ? resolveActionColor(action) : 'primary';
+  const buttonColor = action.color;
+  let color: EuiButtonIconColor = 'primary';
+  if (buttonColor) {
+    color = isString(buttonColor) ? buttonColor : buttonColor(item);
+  }
 
-  const { icon: buttonIcon } = action as IconButtonAction<T>;
-  const resolveActionIcon = (action: Action<T>) =>
-    isString(action.icon) ? action.icon : action.icon!(item);
-  const icon = buttonIcon ? resolveActionIcon(action) : undefined;
+  const buttonIcon = action.icon;
+  let icon;
+  if (buttonIcon) {
+    icon = isString(buttonIcon) ? buttonIcon : buttonIcon(item);
+  }
 
   let button;
   if (action.type === 'icon') {