chore: Adjust Collapse header style (#32492)

* chore: Adjust collapse header style for align

* chore: replace variable

* test: Update snapshot

components/collapse/Collapse.tsx

@@ -70,9 +70,14 @@ const Collapse: CollapseInterface = props => {
       )
     ) as React.ReactNode;
 
-    return cloneElement(icon, () => ({
+    return (
-      className: classNames((icon as any).props.className, `${prefixCls}-arrow`),
+      // Create additional div here to make arrow align to center of first line
-    }));
+      <div>
+        {cloneElement(icon, () => ({
+          className: classNames((icon as any).props.className, `${prefixCls}-arrow`),
+        }))}
+      </div>
+    );
   };
 
   const iconPosition = getIconPosition();

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

@@ -13,26 +13,28 @@ exports[`Collapse could override default openMotion 1`] = `
       role="button"
       tabindex="0"
     >
-      <span
+      <div>
-        aria-label="right"
+        <span
-        class="anticon anticon-right ant-collapse-arrow"
+          aria-label="right"
-        role="img"
+          class="anticon anticon-right ant-collapse-arrow"
-      >
+          role="img"
-        <svg
-          aria-hidden="true"
-          data-icon="right"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          style="transform: rotate(90deg);"
-          viewBox="64 64 896 896"
-          width="1em"
         >
-          <path
+          <svg
-            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            aria-hidden="true"
-          />
+            data-icon="right"
-        </svg>
+            fill="currentColor"
-      </span>
+            focusable="false"
+            height="1em"
+            style="transform: rotate(90deg);"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </div>
       This is panel header 1
     </div>
     <div
@@ -61,25 +63,27 @@ exports[`Collapse should render extra node of panel 1`] = `
       role="button"
       tabindex="0"
     >
-      <span
+      <div>
-        aria-label="right"
+        <span
-        class="anticon anticon-right ant-collapse-arrow"
+          aria-label="right"
-        role="img"
+          class="anticon anticon-right ant-collapse-arrow"
-      >
+          role="img"
-        <svg
-          aria-hidden="true"
-          data-icon="right"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
         >
-          <path
+          <svg
-            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            aria-hidden="true"
-          />
+            data-icon="right"
-        </svg>
+            fill="currentColor"
-      </span>
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </div>
       header
       <div
         class="ant-collapse-extra"
@@ -101,25 +105,27 @@ exports[`Collapse should render extra node of panel 1`] = `
       role="button"
       tabindex="0"
     >
-      <span
+      <div>
-        aria-label="right"
+        <span
-        class="anticon anticon-right ant-collapse-arrow"
+          aria-label="right"
-        role="img"
+          class="anticon anticon-right ant-collapse-arrow"
-      >
+          role="img"
-        <svg
-          aria-hidden="true"
-          data-icon="right"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
         >
-          <path
+          <svg
-            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            aria-hidden="true"
-          />
+            data-icon="right"
-        </svg>
+            fill="currentColor"
-      </span>
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </div>
       header
       <div
         class="ant-collapse-extra"
@@ -148,6 +154,7 @@ exports[`Collapse should support remove expandIcon 1`] = `
       role="button"
       tabindex="0"
     >
+      <div />
       header
     </div>
   </div>

components/collapse/style/index.less

@@ -22,17 +22,18 @@
     }
 
     > .@{collapse-prefix-cls}-header {
-      position: relative;
+      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 +43,7 @@
       }
 
       .@{collapse-prefix-cls}-extra {
-        float: right;
+        margin-left: auto;
       }
 
       &:focus {
@@ -59,7 +60,7 @@
 
     &.@{collapse-prefix-cls}-no-arrow {
       > .@{collapse-prefix-cls}-header {
-        padding-left: 12px;
+        padding-left: @padding-sm;
       }
     }
   }

components/collapse/style/rtl.less

@@ -18,7 +18,7 @@
       .@{collapse-prefix-cls}-arrow {
         .@{collapse-prefix-cls}-rtl& {
           margin-right: 0;
-          margin-left: 12px;
+          margin-left: @margin-sm;
         }
 
         & svg {
@@ -30,7 +30,8 @@
 
       .@{collapse-prefix-cls}-extra {
         .@{collapse-prefix-cls}-rtl& {
-          float: left;
+          margin-right: auto;
+          margin-left: 0;
         }
       }
     }
@@ -38,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;
         }
       }

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -10465,25 +10465,27 @@ exports[`ConfigProvider components Collapse configProvider 1`] = `
       role="button"
       tabindex="0"
     >
-      <span
+      <div>
-        aria-label="right"
+        <span
-        class="anticon anticon-right config-collapse-arrow"
+          aria-label="right"
-        role="img"
+          class="anticon anticon-right config-collapse-arrow"
-      >
+          role="img"
-        <svg
-          aria-hidden="true"
-          data-icon="right"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
         >
-          <path
+          <svg
-            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            aria-hidden="true"
-          />
+            data-icon="right"
-        </svg>
+            fill="currentColor"
-      </span>
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </div>
       Bamboo
     </div>
   </div>
@@ -10503,25 +10505,27 @@ exports[`ConfigProvider components Collapse configProvider componentSize large 1
       role="button"
       tabindex="0"
     >
-      <span
+      <div>
-        aria-label="right"
+        <span
-        class="anticon anticon-right config-collapse-arrow"
+          aria-label="right"
-        role="img"
+          class="anticon anticon-right config-collapse-arrow"
-      >
+          role="img"
-        <svg
-          aria-hidden="true"
-          data-icon="right"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
         >
-          <path
+          <svg
-            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            aria-hidden="true"
-          />
+            data-icon="right"
-        </svg>
+            fill="currentColor"
-      </span>
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </div>
       Bamboo
     </div>
   </div>
@@ -10541,25 +10545,27 @@ exports[`ConfigProvider components Collapse configProvider componentSize middle
       role="button"
       tabindex="0"
     >
-      <span
+      <div>
-        aria-label="right"
+        <span
-        class="anticon anticon-right config-collapse-arrow"
+          aria-label="right"
-        role="img"
+          class="anticon anticon-right config-collapse-arrow"
-      >
+          role="img"
-        <svg
-          aria-hidden="true"
-          data-icon="right"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
         >
-          <path
+          <svg
-            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            aria-hidden="true"
-          />
+            data-icon="right"
-        </svg>
+            fill="currentColor"
-      </span>
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </div>
       Bamboo
     </div>
   </div>
@@ -10579,25 +10585,27 @@ exports[`ConfigProvider components Collapse configProvider virtual and dropdownM
       role="button"
       tabindex="0"
     >
-      <span
+      <div>
-        aria-label="right"
+        <span
-        class="anticon anticon-right ant-collapse-arrow"
+          aria-label="right"
-        role="img"
+          class="anticon anticon-right ant-collapse-arrow"
-      >
+          role="img"
-        <svg
-          aria-hidden="true"
-          data-icon="right"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
         >
-          <path
+          <svg
-            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            aria-hidden="true"
-          />
+            data-icon="right"
-        </svg>
+            fill="currentColor"
-      </span>
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </div>
       Bamboo
     </div>
   </div>
@@ -10617,25 +10625,27 @@ exports[`ConfigProvider components Collapse normal 1`] = `
       role="button"
       tabindex="0"
     >
-      <span
+      <div>
-        aria-label="right"
+        <span
-        class="anticon anticon-right ant-collapse-arrow"
+          aria-label="right"
-        role="img"
+          class="anticon anticon-right ant-collapse-arrow"
-      >
+          role="img"
-        <svg
-          aria-hidden="true"
-          data-icon="right"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
         >
-          <path
+          <svg
-            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            aria-hidden="true"
-          />
+            data-icon="right"
-        </svg>
+            fill="currentColor"
-      </span>
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </div>
       Bamboo
     </div>
   </div>
@@ -10655,25 +10665,27 @@ exports[`ConfigProvider components Collapse prefixCls 1`] = `
       role="button"
       tabindex="0"
     >
-      <span
+      <div>
-        aria-label="right"
+        <span
-        class="anticon anticon-right prefix-Collapse-arrow"
+          aria-label="right"
-        role="img"
+          class="anticon anticon-right prefix-Collapse-arrow"
-      >
+          role="img"
-        <svg
-          aria-hidden="true"
-          data-icon="right"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
         >
-          <path
+          <svg
-            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            aria-hidden="true"
-          />
+            data-icon="right"
-        </svg>
+            fill="currentColor"
-      </span>
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </div>
       Bamboo
     </div>
   </div>