mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 12:39:49 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

chore: Adjust Collapse header style (#32492)

Browse Source 
* chore: Adjust collapse header style for align

* chore: replace variable

* test: Update snapshot
This commit is contained in:
二货机器人 2021-10-14 17:16:38 +08:00 committed by GitHub
parent 0163fdf6fc
commit 7c330b77d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 687 additions and 613 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/collapse/Collapse.tsx
View File

@ -70,9 +70,14 @@ const Collapse: CollapseInterface = props => {
)
) as React.ReactNode;
return cloneElement(icon, () => ({
return (
// 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();

48
components/collapse/__tests__/__snapshots__/demo.test.js.snap
View File

@ -14,6 +14,7 @@ exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
role="tab"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
@ -33,6 +34,7 @@ exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
/>
</svg>
</span>
</div>
This is panel header 1
</div>
</div>
@ -45,6 +47,7 @@ exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
role="tab"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
@ -64,6 +67,7 @@ exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
/>
</svg>
</span>
</div>
This is panel header 2
</div>
</div>
@ -76,6 +80,7 @@ exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
role="tab"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
@ -95,6 +100,7 @@ exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
/>
</svg>
</span>
</div>
This is panel header 3
</div>
</div>
@ -114,6 +120,7 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
role="button"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
@ -134,6 +141,7 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
/>
</svg>
</span>
</div>
This is panel header 1
</div>
<div
@ -161,6 +169,7 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
role="button"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
@ -180,6 +189,7 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
/>
</svg>
</span>
</div>
This is panel header 2
</div>
</div>
@ -192,6 +202,7 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
role="button"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
@ -211,6 +222,7 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
/>
</svg>
</span>
</div>
This is panel header 3
</div>
</div>
@ -230,6 +242,7 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
role="button"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
@ -250,6 +263,7 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
/>
</svg>
</span>
</div>
This is panel header 1
</div>
<div
@ -275,6 +289,7 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
role="button"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
@ -294,6 +309,7 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
/>
</svg>
</span>
</div>
This is panel header 2
</div>
</div>
@ -306,6 +322,7 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
role="button"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
@ -325,6 +342,7 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
/>
</svg>
</span>
</div>
This is panel header 3
</div>
</div>
@ -351,6 +369,7 @@ exports[`renders ./components/collapse/demo/collapsible.md correctly 1`] = `
role="button"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
@ -371,6 +390,7 @@ exports[`renders ./components/collapse/demo/collapsible.md correctly 1`] = `
/>
</svg>
</span>
</div>
<span
class="ant-collapse-header-text"
>
@ -410,6 +430,7 @@ exports[`renders ./components/collapse/demo/collapsible.md correctly 1`] = `
role="button"
tabindex="-1"
>
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
@ -429,6 +450,7 @@ exports[`renders ./components/collapse/demo/collapsible.md correctly 1`] = `
/>
</svg>
</span>
</div>
This panel can't be collapsed
</div>
</div>
@ -450,6 +472,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
role="button"
tabindex="0"
>
<div>
<span
aria-label="caret-right"
class="anticon anticon-caret-right ant-collapse-arrow"
@ -470,6 +493,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
/>
</svg>
</span>
</div>
This is panel header 1
</div>
<div
@ -497,6 +521,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
role="button"
tabindex="0"
>
<div>
<span
aria-label="caret-right"
class="anticon anticon-caret-right ant-collapse-arrow"
@ -516,6 +541,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
/>
</svg>
</span>
</div>
This is panel header 2
</div>
</div>
@ -528,6 +554,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
role="button"
tabindex="0"
>
<div>
<span
aria-label="caret-right"
class="anticon anticon-caret-right ant-collapse-arrow"
@ -547,6 +574,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
/>
</svg>
</span>
</div>
This is panel header 3
</div>
</div>
@ -567,6 +595,7 @@ Array [
role="button"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
@ -587,6 +616,7 @@ Array [
/>
</svg>
</span>
</div>
This is panel header 1
<div
class="ant-collapse-extra"
@ -638,6 +668,7 @@ Array [
role="button"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
@ -657,6 +688,7 @@ Array [
/>
</svg>
</span>
</div>
This is panel header 2
<div
class="ant-collapse-extra"
@ -693,6 +725,7 @@ Array [
role="button"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
@ -712,6 +745,7 @@ Array [
/>
</svg>
</span>
</div>
This is panel header 3
<div
class="ant-collapse-extra"
@ -820,6 +854,7 @@ exports[`renders ./components/collapse/demo/ghost.md correctly 1`] = `
role="button"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
@ -840,6 +875,7 @@ exports[`renders ./components/collapse/demo/ghost.md correctly 1`] = `
/>
</svg>
</span>
</div>
This is panel header 1
</div>
<div
@ -867,6 +903,7 @@ exports[`renders ./components/collapse/demo/ghost.md correctly 1`] = `
role="button"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
@ -886,6 +923,7 @@ exports[`renders ./components/collapse/demo/ghost.md correctly 1`] = `
/>
</svg>
</span>
</div>
This is panel header 2
</div>
</div>
@ -898,6 +936,7 @@ exports[`renders ./components/collapse/demo/ghost.md correctly 1`] = `
role="button"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
@ -917,6 +956,7 @@ exports[`renders ./components/collapse/demo/ghost.md correctly 1`] = `
/>
</svg>
</span>
</div>
This is panel header 3
</div>
</div>
@ -936,6 +976,7 @@ exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
role="button"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
@ -955,6 +996,7 @@ exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
/>
</svg>
</span>
</div>
This is panel header 1
</div>
</div>
@ -967,6 +1009,7 @@ exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
role="button"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
@ -986,6 +1029,7 @@ exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
/>
</svg>
</span>
</div>
This is panel header 2
</div>
</div>
@ -998,6 +1042,7 @@ exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
role="button"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
@ -1017,6 +1062,7 @@ exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
/>
</svg>
</span>
</div>
This is panel header 3
</div>
</div>
@ -1036,6 +1082,7 @@ exports[`renders ./components/collapse/demo/noarrow.md correctly 1`] = `
role="button"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
@ -1056,6 +1103,7 @@ exports[`renders ./components/collapse/demo/noarrow.md correctly 1`] = `
/>
</svg>
</span>
</div>
This is panel header with arrow icon
</div>
<div

7
components/collapse/__tests__/__snapshots__/index.test.js.snap
View File

@ -13,6 +13,7 @@ exports[`Collapse could override default openMotion 1`] = `
role="button"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
@ -33,6 +34,7 @@ exports[`Collapse could override default openMotion 1`] = `
/>
</svg>
</span>
</div>
This is panel header 1
</div>
<div
@ -61,6 +63,7 @@ exports[`Collapse should render extra node of panel 1`] = `
role="button"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
@ -80,6 +83,7 @@ exports[`Collapse should render extra node of panel 1`] = `
/>
</svg>
</span>
</div>
header
<div
class="ant-collapse-extra"
@ -101,6 +105,7 @@ exports[`Collapse should render extra node of panel 1`] = `
role="button"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
@ -120,6 +125,7 @@ exports[`Collapse should render extra node of panel 1`] = `
/>
</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>

11
components/collapse/style/index.less
View File

@ -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;
}
}
}

7
components/collapse/style/rtl.less
View File

@ -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;
}
}

12
components/config-provider/__tests__/__snapshots__/components.test.js.snap
View File

@ -10465,6 +10465,7 @@ exports[`ConfigProvider components Collapse configProvider 1`] = `
role="button"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right config-collapse-arrow"
@ -10484,6 +10485,7 @@ exports[`ConfigProvider components Collapse configProvider 1`] = `
/>
</svg>
</span>
</div>
Bamboo
</div>
</div>
@ -10503,6 +10505,7 @@ exports[`ConfigProvider components Collapse configProvider componentSize large 1
role="button"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right config-collapse-arrow"
@ -10522,6 +10525,7 @@ exports[`ConfigProvider components Collapse configProvider componentSize large 1
/>
</svg>
</span>
</div>
Bamboo
</div>
</div>
@ -10541,6 +10545,7 @@ exports[`ConfigProvider components Collapse configProvider componentSize middle
role="button"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right config-collapse-arrow"
@ -10560,6 +10565,7 @@ exports[`ConfigProvider components Collapse configProvider componentSize middle
/>
</svg>
</span>
</div>
Bamboo
</div>
</div>
@ -10579,6 +10585,7 @@ exports[`ConfigProvider components Collapse configProvider virtual and dropdownM
role="button"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
@ -10598,6 +10605,7 @@ exports[`ConfigProvider components Collapse configProvider virtual and dropdownM
/>
</svg>
</span>
</div>
Bamboo
</div>
</div>
@ -10617,6 +10625,7 @@ exports[`ConfigProvider components Collapse normal 1`] = `
role="button"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
@ -10636,6 +10645,7 @@ exports[`ConfigProvider components Collapse normal 1`] = `
/>
</svg>
</span>
</div>
Bamboo
</div>
</div>
@ -10655,6 +10665,7 @@ exports[`ConfigProvider components Collapse prefixCls 1`] = `
role="button"
tabindex="0"
>
<div>
<span
aria-label="right"
class="anticon anticon-right prefix-Collapse-arrow"
@ -10674,6 +10685,7 @@ exports[`ConfigProvider components Collapse prefixCls 1`] = `
/>
</svg>
</span>
</div>
Bamboo
</div>
</div>