mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 02:59:04 +08:00
feat(collapse): migrate less to token (#42938)
* feat(collapse): migrate less to token * docs: add component token demo * test: update snapshot * chore: update snapshot * chore: code clean * chore: code clean * chore: update * chore: update demo * chore: style * chore: fix lint --------- Co-authored-by: MadCcc <1075746765@qq.com>
This commit is contained in:
红
GitHub
parent
6a6f1b741f
commit
1b479c4b45
@ -595,6 +595,135 @@ exports[`renders components/collapse/demo/collapsible.tsx extend context correct
|
||||
|
||||
exports[`renders components/collapse/demo/collapsible.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/collapse/demo/component-token.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-collapse ant-collapse-icon-position-start"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse-item"
|
||||
>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-expanded="false"
|
||||
class="ant-collapse-header"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse-expand-icon"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<span
|
||||
class="ant-collapse-header-text"
|
||||
>
|
||||
This is panel header 1, (Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! )
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-collapse-item"
|
||||
>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-expanded="false"
|
||||
class="ant-collapse-header"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse-expand-icon"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<span
|
||||
class="ant-collapse-header-text"
|
||||
>
|
||||
This is panel header 2, (Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! )
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-collapse-item"
|
||||
>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-expanded="false"
|
||||
class="ant-collapse-header"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse-expand-icon"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<span
|
||||
class="ant-collapse-header-text"
|
||||
>
|
||||
This is panel header 3, (Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! )
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/collapse/demo/component-token.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/collapse/demo/custom.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-collapse ant-collapse-icon-position-start ant-collapse-borderless"
|
||||
|
||||
@ -587,6 +587,133 @@ exports[`renders components/collapse/demo/collapsible.tsx correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/collapse/demo/component-token.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-collapse ant-collapse-icon-position-start"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse-item"
|
||||
>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-expanded="false"
|
||||
class="ant-collapse-header"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse-expand-icon"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<span
|
||||
class="ant-collapse-header-text"
|
||||
>
|
||||
This is panel header 1, (Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! )
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-collapse-item"
|
||||
>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-expanded="false"
|
||||
class="ant-collapse-header"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse-expand-icon"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<span
|
||||
class="ant-collapse-header-text"
|
||||
>
|
||||
This is panel header 2, (Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! )
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-collapse-item"
|
||||
>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-expanded="false"
|
||||
class="ant-collapse-header"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse-expand-icon"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<span
|
||||
class="ant-collapse-header-text"
|
||||
>
|
||||
This is panel header 3, (Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! )
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/collapse/demo/custom.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-collapse ant-collapse-icon-position-start ant-collapse-borderless"
|
||||
|
||||
7
components/collapse/demo/component-token.md
Normal file
7
components/collapse/demo/component-token.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
Component Token Debug.
|
||||
|
||||
## en-US
|
||||
|
||||
Component Token Debug
|
||||
30
components/collapse/demo/component-token.tsx
Normal file
30
components/collapse/demo/component-token.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
import { Collapse, ConfigProvider } from 'antd';
|
||||
|
||||
/** Test usage. Do not use in your production. */
|
||||
import type { CollapseProps } from 'antd';
|
||||
|
||||
const text = `Ant Design! `.repeat(26);
|
||||
|
||||
const items: CollapseProps['items'] = [
|
||||
{ key: '1', label: `This is panel header 1, (${text})`, children: text },
|
||||
{ key: '2', label: `This is panel header 2, (${text})`, children: text },
|
||||
{ key: '3', label: `This is panel header 3, (${text})`, children: text },
|
||||
];
|
||||
|
||||
export default () => (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Collapse: {
|
||||
headerPadding: '0px 10px 20px 30px',
|
||||
headerBg: '#eaeeff',
|
||||
contentPadding: '0px 10px 20px 30px',
|
||||
contentBg: '#e6f7ff',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Collapse items={items} />
|
||||
</ConfigProvider>
|
||||
);
|
||||
@ -69,6 +69,7 @@ const items: CollapseProps['items'] = [
|
||||
<code src="./demo/extra.tsx">Extra node</code>
|
||||
<code src="./demo/ghost.tsx">Ghost Collapse</code>
|
||||
<code src="./demo/collapsible.tsx">Collapsible</code>
|
||||
<code src="./demo/component-token.tsx" debug>Component Token</code>
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -70,6 +70,7 @@ const items: CollapseProps['items'] = [
|
||||
<code src="./demo/extra.tsx">额外节点</code>
|
||||
<code src="./demo/ghost.tsx">幽灵折叠面板</code>
|
||||
<code src="./demo/collapsible.tsx">可折叠触发区域</code>
|
||||
<code src="./demo/component-token.tsx" debug>组件 Token</code>
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -1,28 +1,31 @@
|
||||
import type { CSSProperties } from 'react';
|
||||
import { resetComponent, resetIcon } from '../../style';
|
||||
import { genCollapseMotion } from '../../style/motion';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {}
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
export interface ComponentToken {
|
||||
// Component token here
|
||||
headerPadding: CSSProperties['padding'];
|
||||
headerBg: string;
|
||||
contentPadding: CSSProperties['padding'];
|
||||
contentBg: string;
|
||||
}
|
||||
|
||||
type CollapseToken = FullToken<'Collapse'> & {
|
||||
collapseContentBg: string;
|
||||
collapseHeaderBg: string;
|
||||
collapseHeaderPadding: string;
|
||||
collapseHeaderPaddingSM: string;
|
||||
collapseHeaderPaddingLG: string;
|
||||
collapsePanelBorderRadius: number;
|
||||
collapseContentPaddingHorizontal: number;
|
||||
};
|
||||
|
||||
export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
|
||||
const {
|
||||
componentCls,
|
||||
collapseContentBg,
|
||||
contentBg,
|
||||
padding,
|
||||
collapseContentPaddingHorizontal,
|
||||
collapseHeaderBg,
|
||||
collapseHeaderPadding,
|
||||
headerBg,
|
||||
headerPadding,
|
||||
collapseHeaderPaddingSM,
|
||||
collapseHeaderPaddingLG,
|
||||
collapsePanelBorderRadius,
|
||||
@ -42,6 +45,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
|
||||
paddingXS,
|
||||
motionDurationSlow,
|
||||
fontSizeIcon,
|
||||
contentPadding,
|
||||
} = token;
|
||||
|
||||
const borderBase = `${lineWidth}px ${lineType} ${colorBorder}`;
|
||||
@ -49,7 +53,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
|
||||
return {
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
backgroundColor: collapseHeaderBg,
|
||||
backgroundColor: headerBg,
|
||||
border: borderBase,
|
||||
borderBottom: 0,
|
||||
borderRadius: `${collapsePanelBorderRadius}px`,
|
||||
@ -73,8 +77,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
|
||||
display: 'flex',
|
||||
flexWrap: 'nowrap',
|
||||
alignItems: 'flex-start',
|
||||
padding: collapseHeaderPadding,
|
||||
paddingInlineStart: paddingSM,
|
||||
padding: headerPadding,
|
||||
color: colorTextHeading,
|
||||
lineHeight,
|
||||
cursor: 'pointer',
|
||||
@ -94,8 +97,6 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
paddingInlineEnd: marginSM,
|
||||
// Arrow offset
|
||||
marginInlineStart: padding - paddingSM,
|
||||
},
|
||||
|
||||
[`${componentCls}-arrow`]: {
|
||||
@ -133,11 +134,11 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
|
||||
|
||||
[`${componentCls}-content`]: {
|
||||
color: colorText,
|
||||
backgroundColor: collapseContentBg,
|
||||
backgroundColor: contentBg,
|
||||
borderTop: borderBase,
|
||||
|
||||
[`& > ${componentCls}-content-box`]: {
|
||||
padding: `${padding}px ${collapseContentPaddingHorizontal}px`,
|
||||
padding: contentPadding,
|
||||
},
|
||||
|
||||
[`&-hidden`]: {
|
||||
@ -231,7 +232,7 @@ const genArrowStyle: GenerateStyle<CollapseToken> = (token) => {
|
||||
const genBorderlessStyle: GenerateStyle<CollapseToken> = (token) => {
|
||||
const {
|
||||
componentCls,
|
||||
collapseHeaderBg,
|
||||
headerBg,
|
||||
paddingXXS,
|
||||
|
||||
colorBorder,
|
||||
@ -239,7 +240,7 @@ const genBorderlessStyle: GenerateStyle<CollapseToken> = (token) => {
|
||||
|
||||
return {
|
||||
[`${componentCls}-borderless`]: {
|
||||
backgroundColor: collapseHeaderBg,
|
||||
backgroundColor: headerBg,
|
||||
border: 0,
|
||||
|
||||
[`> ${componentCls}-item`]: {
|
||||
@ -290,15 +291,13 @@ const genGhostStyle: GenerateStyle<CollapseToken> = (token) => {
|
||||
};
|
||||
};
|
||||
|
||||
export default genComponentStyleHook('Collapse', (token) => {
|
||||
export default genComponentStyleHook(
|
||||
'Collapse',
|
||||
(token) => {
|
||||
const collapseToken = mergeToken<CollapseToken>(token, {
|
||||
collapseContentBg: token.colorBgContainer,
|
||||
collapseHeaderBg: token.colorFillAlter,
|
||||
collapseHeaderPadding: `${token.paddingSM}px ${token.padding}px`,
|
||||
collapseHeaderPaddingSM: `${token.paddingXS}px ${token.paddingSM}px`,
|
||||
collapseHeaderPaddingLG: `${token.padding}px ${token.paddingLG}px`,
|
||||
collapsePanelBorderRadius: token.borderRadiusLG,
|
||||
collapseContentPaddingHorizontal: 16, // Fixed value
|
||||
});
|
||||
|
||||
return [
|
||||
@ -308,4 +307,11 @@ export default genComponentStyleHook('Collapse', (token) => {
|
||||
genArrowStyle(collapseToken),
|
||||
genCollapseMotion(collapseToken),
|
||||
];
|
||||
});
|
||||
},
|
||||
(token) => ({
|
||||
headerPadding: `${token.paddingSM}px ${token.padding}px`,
|
||||
headerBg: token.colorFillAlter,
|
||||
contentPadding: `${token.padding}px 16px`, // Fixed Value
|
||||
contentBg: token.colorBgContainer,
|
||||
}),
|
||||
);
|
||||
|
||||
@ -216,7 +216,17 @@ export default App;
|
||||
| `@checkbox-border-radius` | `borderRadiusSM` | - |
|
||||
| `@checkbox-group-item-margin-right` | - | Deprecated for style change |
|
||||
|
||||
<!-- ### Collapse -->
|
||||
### Collapse
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| Less variables | Component Token | Note |
|
||||
| --- | --- | --- |
|
||||
| `@collapse-header-padding` | `headerPadding` | - |
|
||||
| `@collapse-header-padding-extra` | - | Depreacated |
|
||||
| `@collapse-header-bg` | `headerBg` | - |
|
||||
| `@collapse-content-padding` | `contentPadding` | - |
|
||||
| `@collapse-content-bg` | `contentBg` | - |
|
||||
| `@collapse-header-arrow-left` | - | Deprecated |
|
||||
|
||||
### Descriptions
|
||||
|
||||
|
||||
@ -214,7 +214,17 @@ export default App;
|
||||
| `@checkbox-border-radius` | `borderRadiusSM` | - |
|
||||
| `@checkbox-group-item-margin-right` | - | 由于样式变化已废弃 |
|
||||
|
||||
<!-- ### Collapse 折叠面板 -->
|
||||
### Collapse 折叠面板
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| Less 变量 | Component Token | 备注 |
|
||||
| --- | --- | --- |
|
||||
| `@collapse-header-padding` | `headerPadding` | - |
|
||||
| `@collapse-header-padding-extra` | - | 已废弃 |
|
||||
| `@collapse-header-bg` | `headerBg` | - |
|
||||
| `@collapse-content-padding` | `contentPadding` | - |
|
||||
| `@collapse-content-bg` | `contentBg` | - |
|
||||
| `@collapse-header-arrow-left` | - | 已废弃 |
|
||||
|
||||
### Descriptions 描述列表
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user