fix: keep className given to expandIcon in Collapse component (#19160)

ant-design · Oct 11, 2019 · 3ac716d · 3ac716d
1 parent 78b1f90
commit 3ac716d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx
@@ -45,14 +45,15 @@ export default class Collapse extends React.Component<CollapseProps, any> {
 
   renderExpandIcon = (panelProps: PanelProps = {}, prefixCls: string) => {
     const { expandIcon } = this.props;
-    const icon = expandIcon ? (
+    const icon = (expandIcon ? (
       expandIcon(panelProps)
     ) : (
       <Icon type="right" rotate={panelProps.isActive ? 90 : undefined} />
-    );
+    )) as React.ReactNode;
+
     return React.isValidElement(icon)
       ? React.cloneElement(icon as any, {
-          className: `${prefixCls}-arrow`,
+          className: classNames(icon.props.className, `${prefixCls}-arrow`),
         })
       : icon;
   };

diff --git a/components/collapse/__tests__/index.test.js b/components/collapse/__tests__/index.test.js
@@ -27,6 +27,22 @@ describe('Collapse', () => {
     expect(wrapper.render()).toMatchSnapshot();
   });
 
+  it('should keep the className of the expandIcon', () => {
+    const wrapper = mount(
+      <Collapse
+        expandIcon={() => (
+          <button type="button" className="custom-expandicon-classname">
+            action
+          </button>
+        )}
+      >
+        <Collapse.Panel header="header" />
+      </Collapse>,
+    );
+
+    expect(wrapper.find('.custom-expandicon-classname').exists()).toBe(true);
+  });
+
   it('should render extra node of panel', () => {
     const wrapper = mount(
       <Collapse>