From cab6ff9c0a399fe644030c02657c1aec31c0485e Mon Sep 17 00:00:00 2001
From: LuckyFBB <976060700@qq.com>
Date: Sun, 29 Sep 2024 19:41:41 +0800
Subject: [PATCH 1/2] fix(collapsibleactionitems): change icon size and add
 classname/style

---
 .../__tests__/index.test.tsx                    |  4 ++--
 src/collapsibleActionItems/index.tsx            | 17 +++++++++++++----
 src/collapsibleActionItems/style.scss           |  7 +++++++
 3 files changed, 22 insertions(+), 6 deletions(-)
 create mode 100644 src/collapsibleActionItems/style.scss

diff --git a/src/collapsibleActionItems/__tests__/index.test.tsx b/src/collapsibleActionItems/__tests__/index.test.tsx
index 72bc71a18..8095a3ec7 100644
--- a/src/collapsibleActionItems/__tests__/index.test.tsx
+++ b/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();
diff --git a/src/collapsibleActionItems/index.tsx b/src/collapsibleActionItems/index.tsx
index 971535350..4f1270e30 100644
--- a/src/collapsibleActionItems/index.tsx
+++ b/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>
diff --git a/src/collapsibleActionItems/style.scss b/src/collapsibleActionItems/style.scss
new file mode 100644
index 000000000..5f23de6d9
--- /dev/null
+++ b/src/collapsibleActionItems/style.scss
@@ -0,0 +1,7 @@
+$card_prefix: "dtc-collapsibleActionItems";
+
+.#{$card_prefix} {
+    &__icon {
+        font-size: 16px;
+    }
+}

From 6b5acd280c9c991b33ec904c2337307af5d06352 Mon Sep 17 00:00:00 2001
From: LuckyFBB <976060700@qq.com>
Date: Fri, 25 Oct 2024 15:36:18 +0800
Subject: [PATCH 2/2] fix(collapsibleactionitems): remove data-testid

---
 src/collapsibleActionItems/__tests__/index.test.tsx | 8 ++++----
 src/collapsibleActionItems/index.tsx                | 7 +------
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/collapsibleActionItems/__tests__/index.test.tsx b/src/collapsibleActionItems/__tests__/index.test.tsx
index 8095a3ec7..7b3afe9fe 100644
--- a/src/collapsibleActionItems/__tests__/index.test.tsx
+++ b/src/collapsibleActionItems/__tests__/index.test.tsx
@@ -43,7 +43,7 @@ describe('test CollapsibleActionItems', () => {
     });
 
     test('should render link button when item count more than maxCount', () => {
-        const { container, getByTestId } = render(
+        const { container } = render(
             <CollapsibleActionItems
                 actionItems={items}
                 maxCount={2}
@@ -54,12 +54,12 @@ describe('test CollapsibleActionItems', () => {
             />
         );
         const btns = container.querySelectorAll('.dtc-collapsibleActionItems__btn');
-        const dropdownEl = getByTestId('action-dropdown-link');
+        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(
diff --git a/src/collapsibleActionItems/index.tsx b/src/collapsibleActionItems/index.tsx
index 4f1270e30..5bb0b561e 100644
--- a/src/collapsibleActionItems/index.tsx
+++ b/src/collapsibleActionItems/index.tsx
@@ -90,12 +90,7 @@ const CollapsibleActionItems: React.FC<ICollapsibleActionItems> = (props) => {
                     getPopupContainer={(triggerNode) => triggerNode.parentElement ?? document.body}
                     {...dropdownProps}
                 >
-                    <a
-                        data-testid="action-dropdown-link"
-                        className="dtc-collapsibleActionItems__icon"
-                    >
-                        {collapseIcon}
-                    </a>
+                    <a className="dtc-collapsibleActionItems__icon">{collapseIcon}</a>
                 </Dropdown>
             )}
         </div>