diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx
index 141391504a..68d3dc8f57 100644
--- a/components/collapse/Collapse.tsx
+++ b/components/collapse/Collapse.tsx
@@ -70,9 +70,14 @@ const Collapse: CollapseInterface = props => {
)
) as React.ReactNode;
- return cloneElement(icon, () => ({
- className: classNames((icon as any).props.className, `${prefixCls}-arrow`),
- }));
+ return (
+ // Create additional div here to make arrow align to center of first line
+
+ {cloneElement(icon, () => ({
+ className: classNames((icon as any).props.className, `${prefixCls}-arrow`),
+ }))}
+
+ );
};
const iconPosition = getIconPosition();
diff --git a/components/collapse/__tests__/__snapshots__/demo.test.js.snap b/components/collapse/__tests__/__snapshots__/demo.test.js.snap
index cb0997640c..326c9cd548 100644
--- a/components/collapse/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/collapse/__tests__/__snapshots__/demo.test.js.snap
@@ -14,25 +14,27 @@ exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
role="tab"
tabindex="0"
>
-
-
+
-
-
-
+
+
+
+
+
This is panel header 1
@@ -45,25 +47,27 @@ exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
role="tab"
tabindex="0"
>
-
-
+
-
-
-
+
+
+
+
+
This is panel header 2
@@ -76,25 +80,27 @@ exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
role="tab"
tabindex="0"
>
-
-
+
-
-
-
+
+
+
+
+
This is panel header 3
@@ -114,26 +120,28 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
role="button"
tabindex="0"
>
-
-
+
-
-
-
+
+
+
+
+
This is panel header 1
This is panel header 2
@@ -192,25 +202,27 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
role="button"
tabindex="0"
>
-
-
+
-
-
-
+
+
+
+
+
This is panel header 3
@@ -230,26 +242,28 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
role="button"
tabindex="0"
>
-
-
+
-
-
-
+
+
+
+
+
This is panel header 1
This is panel header 2
@@ -306,25 +322,27 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
role="button"
tabindex="0"
>
-
-
+
-
-
-
+
+
+
+
+
This is panel header 3
@@ -351,26 +369,28 @@ exports[`renders ./components/collapse/demo/collapsible.md correctly 1`] = `
role="button"
tabindex="0"
>
-
-
+
-
-
-
+
+
+
+
+
+
This panel can't be collapsed
@@ -450,26 +472,28 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
role="button"
tabindex="0"
>
-
-
+
-
-
-
+
+
+
+
+
This is panel header 1
This is panel header 2
@@ -528,25 +554,27 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
role="button"
tabindex="0"
>
-
-
+
-
-
-
+
+
+
+
+
This is panel header 3
@@ -567,26 +595,28 @@ Array [
role="button"
tabindex="0"
>
-
-
+
-
-
-
+
+
+
+
+
This is panel header 1
This is panel header 2
This is panel header 3
This is panel header 1
This is panel header 2
@@ -898,25 +936,27 @@ exports[`renders ./components/collapse/demo/ghost.md correctly 1`] = `
role="button"
tabindex="0"
>
-
-
+
-
-
-
+
+
+
+
+
This is panel header 3
@@ -936,25 +976,27 @@ exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
role="button"
tabindex="0"
>
-
-
+
-
-
-
+
+
+
+
+
This is panel header 1
@@ -967,25 +1009,27 @@ exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
role="button"
tabindex="0"
>
-
-
+
-
-
-
+
+
+
+
+
This is panel header 2
@@ -998,25 +1042,27 @@ exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
role="button"
tabindex="0"
>
-
-
+
-
-
-
+
+
+
+
+
This is panel header 3
@@ -1036,26 +1082,28 @@ exports[`renders ./components/collapse/demo/noarrow.md correctly 1`] = `
role="button"
tabindex="0"
>
-
-
+
-
-
-
+
+
+
+
+
This is panel header with arrow icon
This is panel header 1
header
header
diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less
index 58008356da..32da8ab7e5 100644
--- a/components/collapse/style/index.less
+++ b/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;
}
}
}
diff --git a/components/collapse/style/rtl.less b/components/collapse/style/rtl.less
index ed1a1a61ae..559a922de2 100644
--- a/components/collapse/style/rtl.less
+++ b/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;
}
}
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
index c13cc06965..94da15ca09 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
@@ -10465,25 +10465,27 @@ exports[`ConfigProvider components Collapse configProvider 1`] = `
role="button"
tabindex="0"
>
-
-
+
-
-
-
+
+
+
+
+
Bamboo
@@ -10503,25 +10505,27 @@ exports[`ConfigProvider components Collapse configProvider componentSize large 1
role="button"
tabindex="0"
>
-
-
+
-
-
-
+
+
+
+
+
Bamboo
@@ -10541,25 +10545,27 @@ exports[`ConfigProvider components Collapse configProvider componentSize middle
role="button"
tabindex="0"
>
-
-
+
-
-
-
+
+
+
+
+
Bamboo
@@ -10579,25 +10585,27 @@ exports[`ConfigProvider components Collapse configProvider virtual and dropdownM
role="button"
tabindex="0"
>
-
-
+
-
-
-
+
+
+
+
+
Bamboo
@@ -10617,25 +10625,27 @@ exports[`ConfigProvider components Collapse normal 1`] = `
role="button"
tabindex="0"
>
-
-
+
-
-
-
+
+
+
+
+
Bamboo
@@ -10655,25 +10665,27 @@ exports[`ConfigProvider components Collapse prefixCls 1`] = `
role="button"
tabindex="0"
>
-
-
+
-
-
-
+
+
+
+
+
Bamboo