From 68b4c97b44a08037a46597614340ab37cb8e6f48 Mon Sep 17 00:00:00 2001
From: calaquend1 <t4rg4rnen@gmail.com>
Date: Fri, 3 Mar 2023 13:00:21 +0400
Subject: [PATCH 1/6] feat: add actions button size control prop

---
 src/components/Table/__stories__/Table.stories.tsx          | 2 +-
 .../Table/hoc/withTableActions/withTableActions.tsx         | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Table/__stories__/Table.stories.tsx b/src/components/Table/__stories__/Table.stories.tsx
index c4f871a4d..f7127d1dc 100644
--- a/src/components/Table/__stories__/Table.stories.tsx
+++ b/src/components/Table/__stories__/Table.stories.tsx
@@ -112,7 +112,7 @@ const WithTableActionsTemplate: Story<TableProps<DataItem>> = (args) => {
             },
         },
     ];
-    return <TableWithAction {...args} getRowActions={getRowActions} />;
+    return <TableWithAction {...args} actionsButtonSize="m" getRowActions={getRowActions} />;
 };
 export const HOCWithTableActions = WithTableActionsTemplate.bind({});
 
diff --git a/src/components/Table/hoc/withTableActions/withTableActions.tsx b/src/components/Table/hoc/withTableActions/withTableActions.tsx
index 3d4f10b61..ab71e0510 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<I> = TableAction<I> | TableActionGroup<I>;
 
 export interface WithTableActionsProps<I> {
     getRowActions: (item: I, index: number) => TableActionConfig<I>[];
+    actionsButtonSize?: 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, actionsButtonSize} = 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={actionsButtonSize}
                     >
                         <Icon data={DotsIcon} />
                     </Button>

From 65e446c70df32960ee12b55154f9c13adc6af0c0 Mon Sep 17 00:00:00 2001
From: calaquend1 <t4rg4rnen@gmail.com>
Date: Fri, 3 Mar 2023 15:03:18 +0400
Subject: [PATCH 2/6] feat: add dropdown menu rowactionssize prop

---
 src/components/DropdownMenu/DropdownMenu.tsx       |  6 ++++--
 .../__stories__/DropdownMenu.stories.tsx           | 14 +++++++-------
 src/components/Table/__stories__/Table.stories.tsx |  2 +-
 .../hoc/withTableActions/withTableActions.tsx      |  6 +++---
 4 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/DropdownMenu/DropdownMenu.tsx b/src/components/DropdownMenu/DropdownMenu.tsx
index 3f08ea1c1..52eac565b 100644
--- a/src/components/DropdownMenu/DropdownMenu.tsx
+++ b/src/components/DropdownMenu/DropdownMenu.tsx
@@ -2,7 +2,7 @@ import React, {useRef, useMemo} from 'react';
 import type {ReactNode, MouseEventHandler, Dispatch, SetStateAction} from 'react';
 
 import type {PopupProps} from '../Popup';
-import {Button} from '../Button';
+import {Button, ButtonSize} from '../Button';
 import type {ButtonProps} from '../Button';
 import {Icon} from '../Icon';
 import {DotsIcon} from '../icons';
@@ -72,6 +72,7 @@ export type DropdownMenuProps<T> = {
      * Overrides the default dropdown popup props.
      */
     popupProps?: Partial<PopupProps>;
+    rowActionsSize?: ButtonSize;
     /**
      * Custom content inside the menu popup.
      */
@@ -100,6 +101,7 @@ const DropdownMenu = <T,>({
     menuProps,
     popupProps,
     children,
+    rowActionsSize,
 }: DropdownMenuProps<T> | ControlledDropdownMenuProps<T>) => {
     const anchorRef = useRef<HTMLDivElement | null>(null);
 
@@ -144,7 +146,7 @@ const DropdownMenu = <T,>({
                 {switcher || (
                     <Button
                         view="flat"
-                        size={size}
+                        size={rowActionsSize || size}
                         {...defaultSwitcherProps}
                         className={cnDropdownMenu('switcher-button', defaultSwitcherClassName)}
                         disabled={disabled}
diff --git a/src/components/DropdownMenu/__stories__/DropdownMenu.stories.tsx b/src/components/DropdownMenu/__stories__/DropdownMenu.stories.tsx
index ad7a8dd1d..52da6a174 100644
--- a/src/components/DropdownMenu/__stories__/DropdownMenu.stories.tsx
+++ b/src/components/DropdownMenu/__stories__/DropdownMenu.stories.tsx
@@ -16,7 +16,7 @@ export default {
     args: {},
 } as Meta;
 
-const DefaultTemplate: Story = (args) => <DropdownMenu {...args} />;
+const DefaultTemplate: Story = (args) => <DropdownMenu {...args} rowActionsSize="xl" />;
 export const Default = DefaultTemplate.bind({});
 Default.args = {
     items: options,
@@ -31,14 +31,14 @@ Default.args = {
 // WithIcons.storyName = 'Options with icons';
 
 // ----------------------------------------
-const WithGroupsTemplate: Story = (args) => <DropdownMenu {...args} />;
+const WithGroupsTemplate: Story = (args) => <DropdownMenu {...args} rowActionsSize="l" />;
 export const WithGroups = WithGroupsTemplate.bind({});
 WithGroups.args = {
     items: optionsWithGroups,
 };
 WithGroups.storyName = 'Options with groups';
 
-const WithSubmenuTemplate: Story = (args) => <DropdownMenu {...args} />;
+const WithSubmenuTemplate: Story = (args) => <DropdownMenu {...args} rowActionsSize="m" />;
 export const WithSubmenu = WithSubmenuTemplate.bind({});
 WithSubmenu.args = {
     items: optionsWithSubItems,
@@ -46,7 +46,7 @@ WithSubmenu.args = {
 WithSubmenu.storyName = 'Submenu';
 
 // ----------------------------------------
-const AssortedTemplate: Story = (args) => <DropdownMenu {...args} />;
+const AssortedTemplate: Story = (args) => <DropdownMenu {...args} rowActionsSize="s" />;
 export const Assorted = AssortedTemplate.bind({});
 Assorted.args = {
     items: optionsAssorted,
@@ -54,7 +54,7 @@ Assorted.args = {
 Assorted.storyName = 'Different options for each action';
 
 // ----------------------------------------
-const DisabledTemplate: Story = (args) => <DropdownMenu {...args} />;
+const DisabledTemplate: Story = (args) => <DropdownMenu {...args} rowActionsSize="m" />;
 export const Disabled = DisabledTemplate.bind({});
 Disabled.args = {
     items: options,
@@ -62,7 +62,7 @@ Disabled.args = {
 };
 
 // ----------------------------------------
-const CustomIconTemplate: Story = (args) => <DropdownMenu {...args} />;
+const CustomIconTemplate: Story = (args) => <DropdownMenu {...args} rowActionsSize="l" />;
 export const CustomIcon = CustomIconTemplate.bind({});
 CustomIcon.args = {
     items: options,
@@ -71,7 +71,7 @@ CustomIcon.args = {
 CustomIcon.storyName = 'Non-standard icon';
 
 // ----------------------------------------
-const SwitcherThemeTemplate: Story = (args) => <DropdownMenu {...args} />;
+const SwitcherThemeTemplate: Story = (args) => <DropdownMenu {...args} rowActionsSize="xl" />;
 export const SwitcherTheme = SwitcherThemeTemplate.bind({});
 SwitcherTheme.args = {
     items: options,
diff --git a/src/components/Table/__stories__/Table.stories.tsx b/src/components/Table/__stories__/Table.stories.tsx
index f7127d1dc..19ae765b0 100644
--- a/src/components/Table/__stories__/Table.stories.tsx
+++ b/src/components/Table/__stories__/Table.stories.tsx
@@ -112,7 +112,7 @@ const WithTableActionsTemplate: Story<TableProps<DataItem>> = (args) => {
             },
         },
     ];
-    return <TableWithAction {...args} actionsButtonSize="m" getRowActions={getRowActions} />;
+    return <TableWithAction {...args} rowActionsSize="m" getRowActions={getRowActions} />;
 };
 export const HOCWithTableActions = WithTableActionsTemplate.bind({});
 
diff --git a/src/components/Table/hoc/withTableActions/withTableActions.tsx b/src/components/Table/hoc/withTableActions/withTableActions.tsx
index ab71e0510..52567e75b 100644
--- a/src/components/Table/hoc/withTableActions/withTableActions.tsx
+++ b/src/components/Table/hoc/withTableActions/withTableActions.tsx
@@ -54,7 +54,7 @@ export type TableActionConfig<I> = TableAction<I> | TableActionGroup<I>;
 
 export interface WithTableActionsProps<I> {
     getRowActions: (item: I, index: number) => TableActionConfig<I>[];
-    actionsButtonSize?: ButtonSize;
+    rowActionsSize?: ButtonSize;
 }
 
 interface WithTableActionsState<I> {
@@ -106,7 +106,7 @@ export function withTableActions<I extends TableDataItem, E extends {} = {}>(
         }
 
         private renderBodyCell = (item: I, index: number) => {
-            const {isRowDisabled, getRowActions, actionsButtonSize} = this.props;
+            const {isRowDisabled, getRowActions, rowActionsSize} = this.props;
             const actions = getRowActions(item, index);
 
             if (actions.length === 0) {
@@ -122,7 +122,7 @@ export function withTableActions<I extends TableDataItem, E extends {} = {}>(
                         disabled={disabled}
                         className={BUTTON_CLASSNAME}
                         onClick={this.handleActionsButtonClick.bind(this, {item, index})}
-                        size={actionsButtonSize}
+                        size={rowActionsSize}
                     >
                         <Icon data={DotsIcon} />
                     </Button>

From 8d7f27106f6cc4450138941015a8390175485865 Mon Sep 17 00:00:00 2001
From: calaquend1 <t4rg4rnen@gmail.com>
Date: Fri, 3 Mar 2023 15:59:20 +0400
Subject: [PATCH 3/6] feat: remove size from dropdown menu, add size to menu in
 popup

---
 src/components/DropdownMenu/DropdownMenu.tsx       |  6 ++----
 .../__stories__/DropdownMenu.stories.tsx           | 14 +++++++-------
 src/components/Table/__stories__/Table.stories.tsx |  2 +-
 .../hoc/withTableActions/withTableActions.tsx      |  6 ++++--
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/DropdownMenu/DropdownMenu.tsx b/src/components/DropdownMenu/DropdownMenu.tsx
index 52eac565b..3f08ea1c1 100644
--- a/src/components/DropdownMenu/DropdownMenu.tsx
+++ b/src/components/DropdownMenu/DropdownMenu.tsx
@@ -2,7 +2,7 @@ import React, {useRef, useMemo} from 'react';
 import type {ReactNode, MouseEventHandler, Dispatch, SetStateAction} from 'react';
 
 import type {PopupProps} from '../Popup';
-import {Button, ButtonSize} from '../Button';
+import {Button} from '../Button';
 import type {ButtonProps} from '../Button';
 import {Icon} from '../Icon';
 import {DotsIcon} from '../icons';
@@ -72,7 +72,6 @@ export type DropdownMenuProps<T> = {
      * Overrides the default dropdown popup props.
      */
     popupProps?: Partial<PopupProps>;
-    rowActionsSize?: ButtonSize;
     /**
      * Custom content inside the menu popup.
      */
@@ -101,7 +100,6 @@ const DropdownMenu = <T,>({
     menuProps,
     popupProps,
     children,
-    rowActionsSize,
 }: DropdownMenuProps<T> | ControlledDropdownMenuProps<T>) => {
     const anchorRef = useRef<HTMLDivElement | null>(null);
 
@@ -146,7 +144,7 @@ const DropdownMenu = <T,>({
                 {switcher || (
                     <Button
                         view="flat"
-                        size={rowActionsSize || size}
+                        size={size}
                         {...defaultSwitcherProps}
                         className={cnDropdownMenu('switcher-button', defaultSwitcherClassName)}
                         disabled={disabled}
diff --git a/src/components/DropdownMenu/__stories__/DropdownMenu.stories.tsx b/src/components/DropdownMenu/__stories__/DropdownMenu.stories.tsx
index 52da6a174..ad7a8dd1d 100644
--- a/src/components/DropdownMenu/__stories__/DropdownMenu.stories.tsx
+++ b/src/components/DropdownMenu/__stories__/DropdownMenu.stories.tsx
@@ -16,7 +16,7 @@ export default {
     args: {},
 } as Meta;
 
-const DefaultTemplate: Story = (args) => <DropdownMenu {...args} rowActionsSize="xl" />;
+const DefaultTemplate: Story = (args) => <DropdownMenu {...args} />;
 export const Default = DefaultTemplate.bind({});
 Default.args = {
     items: options,
@@ -31,14 +31,14 @@ Default.args = {
 // WithIcons.storyName = 'Options with icons';
 
 // ----------------------------------------
-const WithGroupsTemplate: Story = (args) => <DropdownMenu {...args} rowActionsSize="l" />;
+const WithGroupsTemplate: Story = (args) => <DropdownMenu {...args} />;
 export const WithGroups = WithGroupsTemplate.bind({});
 WithGroups.args = {
     items: optionsWithGroups,
 };
 WithGroups.storyName = 'Options with groups';
 
-const WithSubmenuTemplate: Story = (args) => <DropdownMenu {...args} rowActionsSize="m" />;
+const WithSubmenuTemplate: Story = (args) => <DropdownMenu {...args} />;
 export const WithSubmenu = WithSubmenuTemplate.bind({});
 WithSubmenu.args = {
     items: optionsWithSubItems,
@@ -46,7 +46,7 @@ WithSubmenu.args = {
 WithSubmenu.storyName = 'Submenu';
 
 // ----------------------------------------
-const AssortedTemplate: Story = (args) => <DropdownMenu {...args} rowActionsSize="s" />;
+const AssortedTemplate: Story = (args) => <DropdownMenu {...args} />;
 export const Assorted = AssortedTemplate.bind({});
 Assorted.args = {
     items: optionsAssorted,
@@ -54,7 +54,7 @@ Assorted.args = {
 Assorted.storyName = 'Different options for each action';
 
 // ----------------------------------------
-const DisabledTemplate: Story = (args) => <DropdownMenu {...args} rowActionsSize="m" />;
+const DisabledTemplate: Story = (args) => <DropdownMenu {...args} />;
 export const Disabled = DisabledTemplate.bind({});
 Disabled.args = {
     items: options,
@@ -62,7 +62,7 @@ Disabled.args = {
 };
 
 // ----------------------------------------
-const CustomIconTemplate: Story = (args) => <DropdownMenu {...args} rowActionsSize="l" />;
+const CustomIconTemplate: Story = (args) => <DropdownMenu {...args} />;
 export const CustomIcon = CustomIconTemplate.bind({});
 CustomIcon.args = {
     items: options,
@@ -71,7 +71,7 @@ CustomIcon.args = {
 CustomIcon.storyName = 'Non-standard icon';
 
 // ----------------------------------------
-const SwitcherThemeTemplate: Story = (args) => <DropdownMenu {...args} rowActionsSize="xl" />;
+const SwitcherThemeTemplate: Story = (args) => <DropdownMenu {...args} />;
 export const SwitcherTheme = SwitcherThemeTemplate.bind({});
 SwitcherTheme.args = {
     items: options,
diff --git a/src/components/Table/__stories__/Table.stories.tsx b/src/components/Table/__stories__/Table.stories.tsx
index 19ae765b0..b96ffeeb4 100644
--- a/src/components/Table/__stories__/Table.stories.tsx
+++ b/src/components/Table/__stories__/Table.stories.tsx
@@ -112,7 +112,7 @@ const WithTableActionsTemplate: Story<TableProps<DataItem>> = (args) => {
             },
         },
     ];
-    return <TableWithAction {...args} rowActionsSize="m" getRowActions={getRowActions} />;
+    return <TableWithAction {...args} rowActionsSize="l" getRowActions={getRowActions} />;
 };
 export const HOCWithTableActions = WithTableActionsTemplate.bind({});
 
diff --git a/src/components/Table/hoc/withTableActions/withTableActions.tsx b/src/components/Table/hoc/withTableActions/withTableActions.tsx
index 52567e75b..81202f445 100644
--- a/src/components/Table/hoc/withTableActions/withTableActions.tsx
+++ b/src/components/Table/hoc/withTableActions/withTableActions.tsx
@@ -131,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) {
@@ -147,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>
             );
         }

From 7cf59cb5fd13707d64daacace4159ff7a82f8bdf Mon Sep 17 00:00:00 2001
From: calaquend1 <t4rg4rnen@gmail.com>
Date: Fri, 3 Mar 2023 18:42:30 +0400
Subject: [PATCH 4/6] feat: add readme description for rowactionssize

---
 src/components/Table/README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/Table/README.md b/src/components/Table/README.md
index 1a63cfcd8..d0a872436 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';
 }
 ```
 

From c6a89ac9b2d3f2137f29fce0adb77e613525e6bf Mon Sep 17 00:00:00 2001
From: calaquend1 <t4rg4rnen@gmail.com>
Date: Fri, 3 Mar 2023 18:45:21 +0400
Subject: [PATCH 5/6] feat: optional prop row actions size

---
 src/components/Table/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Table/README.md b/src/components/Table/README.md
index d0a872436..7de7e32ea 100644
--- a/src/components/Table/README.md
+++ b/src/components/Table/README.md
@@ -154,7 +154,7 @@ interface Props {
   /**
    * Size of actions button and popup menu items.
    */
-  rowActionsSize: 's' | 'm' | 'l' | 'xl';
+  rowActionsSize?: 's' | 'm' | 'l' | 'xl';
 }
 ```
 

From 1b97dd08198478d4888fcfaac435b1ec96d73679 Mon Sep 17 00:00:00 2001
From: calaquend1 <t4rg4rnen@gmail.com>
Date: Fri, 3 Mar 2023 18:56:12 +0400
Subject: [PATCH 6/6] feat: keep default row actions size in table stories

---
 src/components/Table/__stories__/Table.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Table/__stories__/Table.stories.tsx b/src/components/Table/__stories__/Table.stories.tsx
index b96ffeeb4..c4f871a4d 100644
--- a/src/components/Table/__stories__/Table.stories.tsx
+++ b/src/components/Table/__stories__/Table.stories.tsx
@@ -112,7 +112,7 @@ const WithTableActionsTemplate: Story<TableProps<DataItem>> = (args) => {
             },
         },
     ];
-    return <TableWithAction {...args} rowActionsSize="l" getRowActions={getRowActions} />;
+    return <TableWithAction {...args} getRowActions={getRowActions} />;
 };
 export const HOCWithTableActions = WithTableActionsTemplate.bind({});