feat: collapse

components/collapse/Collapse.tsx

@@ -71,15 +71,19 @@ export default defineComponent({
         <RightOutlined rotate={panelProps.isActive ? 90 : undefined} />
       );
 
-      return isValidElement(Array.isArray(expandIcon) ? icon[0] : icon)
+      return (
-        ? cloneElement(
+        <div>
-            icon,
+          {isValidElement(Array.isArray(expandIcon) ? icon[0] : icon)
-            {
+            ? cloneElement(
-              class: `${prefixCls.value}-arrow`,
+                icon,
-            },
+                {
-            false,
+                  class: `${prefixCls.value}-arrow`,
-          )
+                },
-        : icon;
+                false,
+              )
+            : icon}
+        </div>
+      );
     };
     const setActiveKey = (activeKey: Key[]) => {
       if (props.activeKey === undefined) {

components/collapse/__tests__/__snapshots__/index.test.js.snap

@@ -4,7 +4,9 @@ exports[`Collapse should support remove expandIcon 1`] = `
 <div class="ant-collapse ant-collapse-icon-position-left">
   <div class="ant-collapse-item">
     <div class="ant-collapse-header" role="button" tabindex="0" aria-expanded="false">
-      <!---->header
+      <div>
+        <!---->
+      </div>header
       <!---->
     </div>
     <!---->

components/collapse/style/index.less

@@ -22,17 +22,19 @@
     }
 
     > .@{collapse-prefix-cls}-header {
-      position: relative;
+      position: relative; // Compatible with old version of antd, should remove in next version
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: flex-start;
       padding: @collapse-header-padding;
       color: @heading-color;
       line-height: @line-height-base;
       cursor: pointer;
       transition: all 0.3s, visibility 0s;
-      .clearfix();
 
       .@{collapse-prefix-cls}-arrow {
         display: inline-block;
-        margin-right: 12px;
+        margin-right: @margin-sm;
         font-size: @font-size-sm;
         vertical-align: -1px;
 
@@ -42,7 +44,7 @@
       }
 
       .@{collapse-prefix-cls}-extra {
-        float: right;
+        margin-left: auto;
       }
 
       &:focus {
@@ -59,7 +61,7 @@
 
     &.@{collapse-prefix-cls}-no-arrow {
       > .@{collapse-prefix-cls}-header {
-        padding-left: 12px;
+        padding-left: @padding-sm;
       }
     }
   }
@@ -68,6 +70,7 @@
   &-icon-position-right {
     & > .@{collapse-prefix-cls}-item {
       > .@{collapse-prefix-cls}-header {
+        position: relative;
         padding: @collapse-header-padding;
         padding-right: @collapse-header-padding-extra;
 

components/collapse/style/rtl.less

@@ -16,6 +16,11 @@
       }
 
       .@{collapse-prefix-cls}-arrow {
+        .@{collapse-prefix-cls}-rtl& {
+          margin-right: 0;
+          margin-left: @margin-sm;
+        }
+
         & svg {
           .@{collapse-prefix-cls}-rtl& {
             transform: rotate(180deg);
@@ -25,7 +30,8 @@
 
       .@{collapse-prefix-cls}-extra {
         .@{collapse-prefix-cls}-rtl& {
-          float: left;
+          margin-right: auto;
+          margin-left: 0;
         }
       }
     }
@@ -33,7 +39,7 @@
     &.@{collapse-prefix-cls}-no-arrow {
       > .@{collapse-prefix-cls}-header {
         .@{collapse-prefix-cls}-rtl& {
-          padding-right: 12px;
+          padding-right: @padding-sm;
           padding-left: 0;
         }
       }