feat(Table): add row actions size control prop (#557)

gravity-ui · Mar 3, 2023 · a045e12 · a045e12
1 parent 9e25c8b
commit a045e12
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git 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
@@ -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<I> = TableAction<I> | TableActionGroup<I>;
 
 export interface WithTableActionsProps<I> {
     getRowActions: (item: I, index: number) => TableActionConfig<I>[];
+    rowActionsSize?: ButtonSize;
 }
 
 interface WithTableActionsState<I> {
@@ -105,7 +106,7 @@ export function withTableActions<I extends TableDataItem, E extends {} = {}>(
         }
 
         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<I extends TableDataItem, E extends {} = {}>(
                         disabled={disabled}
                         className={BUTTON_CLASSNAME}
                         onClick={this.handleActionsButtonClick.bind(this, {item, index})}
+                        size={rowActionsSize}
                     >
                         <Icon data={DotsIcon} />
                     </Button>
@@ -129,7 +131,7 @@ export function withTableActions<I extends TableDataItem, E extends {} = {}>(
         };
 
         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<I extends TableDataItem, E extends {} = {}>(
                     placement={['bottom-end', 'top-end']}
                     onClose={this.handlePopupClose}
                 >
-                    <Menu className={bPopup('menu')}>{actions.map(this.renderPopupMenuItem)}</Menu>
+                    <Menu className={bPopup('menu')} size={rowActionsSize}>
+                        {actions.map(this.renderPopupMenuItem)}
+                    </Menu>
                 </Popup>
             );
         }