diff --git a/src/components/Table/README.md b/src/components/Table/README.md index 1a63cfcd8..7de7e32ea 100644 --- a/src/components/Table/README.md +++ b/src/components/Table/README.md @@ -151,6 +151,10 @@ interface Props { * Array of action configs for each row. */ getRowActions: (item: any, index: number) => TableActionConfig[]; + /** + * Size of actions button and popup menu items. + */ + rowActionsSize?: 's' | 'm' | 'l' | 'xl'; } ``` diff --git a/src/components/Table/hoc/withTableActions/withTableActions.tsx b/src/components/Table/hoc/withTableActions/withTableActions.tsx index 3d4f10b61..81202f445 100644 --- a/src/components/Table/hoc/withTableActions/withTableActions.tsx +++ b/src/components/Table/hoc/withTableActions/withTableActions.tsx @@ -3,7 +3,7 @@ import _memoize from 'lodash/memoize'; import {block} from '../../../utils/cn'; import {getComponentName} from '../../../utils/getComponentName'; import {Icon} from '../../../Icon'; -import {Button} from '../../../Button'; +import {Button, ButtonSize} from '../../../Button'; import {Popup} from '../../../Popup'; import {Menu, MenuItemProps} from '../../../Menu'; import {DotsIcon} from '../../../icons/DotsIcon'; @@ -54,6 +54,7 @@ export type TableActionConfig = TableAction | TableActionGroup; export interface WithTableActionsProps { getRowActions: (item: I, index: number) => TableActionConfig[]; + rowActionsSize?: ButtonSize; } interface WithTableActionsState { @@ -105,7 +106,7 @@ export function withTableActions( } private renderBodyCell = (item: I, index: number) => { - const {isRowDisabled, getRowActions} = this.props; + const {isRowDisabled, getRowActions, rowActionsSize} = this.props; const actions = getRowActions(item, index); if (actions.length === 0) { @@ -121,6 +122,7 @@ export function withTableActions( disabled={disabled} className={BUTTON_CLASSNAME} onClick={this.handleActionsButtonClick.bind(this, {item, index})} + size={rowActionsSize} > @@ -129,7 +131,7 @@ export function withTableActions( }; private renderPopup() { - const {getRowActions} = this.props; + const {getRowActions, rowActionsSize} = this.props; const {popupOpen, popupData} = this.state; if (!popupData) { @@ -145,7 +147,9 @@ export function withTableActions( placement={['bottom-end', 'top-end']} onClose={this.handlePopupClose} > - {actions.map(this.renderPopupMenuItem)} + + {actions.map(this.renderPopupMenuItem)} + ); }