fix(collapsibleactionitems): change icon size and add classname/style

src/collapsibleActionItems/__tests__/index.test.tsx

@@ -37,7 +37,7 @@ describe('test CollapsibleActionItems', () => {
                 }}
             />
         );
-        const btns = container.querySelectorAll('.dtc-action-btn-wrapper');
+        const btns = container.querySelectorAll('.dtc-collapsibleActionItems__btn');
         expect(btns).toHaveLength(3);
         btns.forEach(testClick);
     });
@@ -53,7 +53,7 @@ describe('test CollapsibleActionItems', () => {
                 dropdownProps={{ trigger: ['click'] }}
             />
         );
-        const btns = container.querySelectorAll('.dtc-action-btn-wrapper');
+        const btns = container.querySelectorAll('.dtc-collapsibleActionItems__btn');
         const dropdownEl = getByTestId('action-dropdown-link');
         expect(btns).toHaveLength(1);
         expect(dropdownEl).toBeInTheDocument();

src/collapsibleActionItems/index.tsx

@@ -1,13 +1,15 @@
 import React, { ReactNode } from 'react';
 import { EllipsisOutlined } from '@ant-design/icons';
 import { Button, ButtonProps, Divider, Dropdown, DropDownProps, Menu } from 'antd';
+import classNames from 'classnames';
+
+import './style.scss';
 
 type ActionItem = {
     key: React.Key;
     name: ReactNode;
     disabled?: boolean;
     render?: () => ReactNode;
-    [propName: string]: any;
 };
 
 interface ICollapsibleActionItems {
@@ -18,6 +20,7 @@ interface ICollapsibleActionItems {
     collapseIcon?: ReactNode; // 折叠菜单图标
     dropdownProps?: Partial<DropDownProps>;
     buttonProps?: Partial<ButtonProps>;
+    style?: React.CSSProperties;
     onItemClick?(key: React.Key): void;
 }
 
@@ -30,6 +33,7 @@ const CollapsibleActionItems: React.FC<ICollapsibleActionItems> = (props) => {
         collapseIcon = <EllipsisOutlined />,
         dropdownProps,
         buttonProps,
+        style,
         onItemClick,
     } = props;
     const isOverMaxCount = actionItems.length > maxCount;
@@ -38,7 +42,7 @@ const CollapsibleActionItems: React.FC<ICollapsibleActionItems> = (props) => {
         if (!isCollapse)
             return (
                 <span
-                    className="dtc-action-btn-wrapper"
+                    className="dtc-collapsibleActionItems__btn"
                     key={item.key}
                     onClick={() => !item.disabled && onItemClick?.(item.key)}
                 >
@@ -70,7 +74,7 @@ const CollapsibleActionItems: React.FC<ICollapsibleActionItems> = (props) => {
     ) : null;
 
     return (
-        <div className={className}>
+        <div className={classNames('dtc-collapsibleActionItems', className)} style={style}>
             {displayAction.map((actionItem, index) => {
                 const showDivider = index < actionItems.length - 1;
                 return (
@@ -86,7 +90,12 @@ const CollapsibleActionItems: React.FC<ICollapsibleActionItems> = (props) => {
                     getPopupContainer={(triggerNode) => triggerNode.parentElement ?? document.body}
                     {...dropdownProps}
                 >
-                    <a data-testid="action-dropdown-link">{collapseIcon}</a>
+                    <a
+                        data-testid="action-dropdown-link"
+                        className="dtc-collapsibleActionItems__icon"
+                    >
+                        {collapseIcon}
+                    </a>
                 </Dropdown>
             )}
         </div>

src/collapsibleActionItems/style.scss

@@ -0,0 +1,7 @@
+$card_prefix: "dtc-collapsibleActionItems";
+
+.#{$card_prefix} {
+    &__icon {
+        font-size: 16px;
+    }
+}