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

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

* fix(collapsibleactionitems): remove data-testid

Author: LuckyFBB

src/collapsibleActionItems/__tests__/index.test.tsx

@@ -37,13 +37,13 @@ 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);
     });
 
     test('should render link button when item count more than maxCount', () => {
-        const { container, getByTestId } = render(
+        const { container } = render(
             <CollapsibleActionItems
                 actionItems={items}
                 maxCount={2}
@@ -53,13 +53,13 @@ describe('test CollapsibleActionItems', () => {
                 dropdownProps={{ trigger: ['click'] }}
             />
         );
-        const btns = container.querySelectorAll('.dtc-action-btn-wrapper');
-        const dropdownEl = getByTestId('action-dropdown-link');
+        const btns = container.querySelectorAll('.dtc-collapsibleActionItems__btn');
+        const icon = container.querySelectorAll('.dtc-collapsibleActionItems__icon')[0];
         expect(btns).toHaveLength(1);
-        expect(dropdownEl).toBeInTheDocument();
+        expect(icon).toBeInTheDocument();
 
         act(() => {
-            fireEvent.click(dropdownEl);
+            fireEvent.click(icon);
         });
 
         const dropdownMenuItems = container.querySelectorAll(

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,7 @@ const CollapsibleActionItems: React.FC<ICollapsibleActionItems> = (props) => {
                     getPopupContainer={(triggerNode) => triggerNode.parentElement ?? document.body}
                     {...dropdownProps}
                 >
-                    <a data-testid="action-dropdown-link">{collapseIcon}</a>
+                    <a 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;
+    }
+}