mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +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

11
components/collapse/Collapse.tsx
View File

@ -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
<div>
{cloneElement(icon, () => ({
className: classNames((icon as any).props.className, `${prefixCls}-arrow`),
}))}
</div>
);
};
const iconPosition = getIconPosition();

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

File diff suppressed because it is too large Load Diff

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

@ -13,26 +13,28 @@ exports[`Collapse could override default openMotion 1`] = `
role="button"
tabindex="0"
>
<span
aria-label="right"
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"
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
role="img"
>
<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>
<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
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
aria-label="right"
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"
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
role="img"
>
<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>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
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
aria-label="right"
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"
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
role="img"
>
<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>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
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>

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

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

@ -10465,25 +10465,27 @@ exports[`ConfigProvider components Collapse configProvider 1`] = `
role="button"
tabindex="0"
>
<span
aria-label="right"
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"
<div>
<span
aria-label="right"
class="anticon anticon-right config-collapse-arrow"
role="img"
>
<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>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
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
aria-label="right"
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"
<div>
<span
aria-label="right"
class="anticon anticon-right config-collapse-arrow"
role="img"
>
<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>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
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
aria-label="right"
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"
<div>
<span
aria-label="right"
class="anticon anticon-right config-collapse-arrow"
role="img"
>
<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>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
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
aria-label="right"
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"
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
role="img"
>
<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>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
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
aria-label="right"
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"
<div>
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
role="img"
>
<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>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
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
aria-label="right"
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"
<div>
<span
aria-label="right"
class="anticon anticon-right prefix-Collapse-arrow"
role="img"
>
<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>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
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>