diff --git a/CHANGELOG.md b/CHANGELOG.md index 1993da80d47..b6733031b3f 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/src-docs/src/views/tables/basic/props_info.js b/src-docs/src/views/tables/basic/props_info.js index a7315397d9b..03db2e95c3b 100644 --- a/src-docs/src/views/tables/basic/props_info.js +++ b/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: diff --git a/src/components/basic_table/collapsed_item_actions.tsx b/src/components/basic_table/collapsed_item_actions.tsx index 70142c69070..503d623a91b 100644 --- a/src/components/basic_table/collapsed_item_actions.tsx +++ b/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 { @@ -123,13 +119,18 @@ export class CollapsedItemActions 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( ).icon as EuiIconType - } + icon={icon} data-test-subj={dataTestSubj} onClick={this.onClickItem.bind( null, diff --git a/src/components/basic_table/default_item_action.tsx b/src/components/basic_table/default_item_action.tsx index 21718e7d22a..10ed4bce304 100644 --- a/src/components/basic_table/default_item_action.tsx +++ b/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 { action: Action; @@ -32,14 +34,17 @@ export const DefaultItemAction = ({ const onClick = action.onClick ? () => action.onClick!(item) : undefined; - const resolveActionColor = (action: Action) => - 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; - const resolveActionIcon = (action: Action) => - 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') {