`;
+exports[`renders components/skeleton/demo/componentToken.tsx correctly 1`] = `
+
+`;
+
exports[`renders components/skeleton/demo/element.tsx correctly 1`] = `
Array [
(
+
+
+
+);
+
+export default App;
diff --git a/components/skeleton/index.en-US.md b/components/skeleton/index.en-US.md
index b3a6c59c41..7e460f6b0a 100644
--- a/components/skeleton/index.en-US.md
+++ b/components/skeleton/index.en-US.md
@@ -24,6 +24,7 @@ Provide a placeholder while you wait for content to load, or to visualize conten
Button/Avatar/Input/Image/Node
Contains sub component
List
+Custom component token
## API
diff --git a/components/skeleton/index.zh-CN.md b/components/skeleton/index.zh-CN.md
index 35e67be85b..c3fbd913a8 100644
--- a/components/skeleton/index.zh-CN.md
+++ b/components/skeleton/index.zh-CN.md
@@ -25,6 +25,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VcjGQLSrYdcAAA
按钮/头像/输入框/图像/自定义节点
包含子组件
列表
+自定义组件 Token
## API
diff --git a/components/skeleton/style/index.tsx b/components/skeleton/style/index.tsx
index 251f253e47..0cca735dd2 100644
--- a/components/skeleton/style/index.tsx
+++ b/components/skeleton/style/index.tsx
@@ -4,8 +4,16 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
export type ComponentToken = {
+ /** @deprecated use gradientFromColor instead. */
color: string;
+ /** @deprecated use gradientToColor instead. */
colorGradientEnd: string;
+ gradientFromColor: string;
+ gradientToColor: string;
+ titleHeight: number;
+ blockRadius: number;
+ paragraphMarginTop: number;
+ paragraphLiHeight: number;
};
const skeletonClsLoading = new Keyframes(`ant-skeleton-loading`, {
@@ -25,10 +33,6 @@ interface SkeletonToken extends FullToken<'Skeleton'> {
skeletonInputCls: string;
skeletonImageCls: string;
imageSizeBase: number;
- skeletonTitleHeight: number;
- skeletonBlockRadius: number;
- skeletonParagraphLineHeight: number;
- skeletonParagraphMarginTop: number;
skeletonLoadingBackground: string;
skeletonLoadingMotionDuration: string;
borderRadius: number;
@@ -60,12 +64,13 @@ const genSkeletonElementInputSize = (size: number): CSSObject => ({
});
const genSkeletonElementAvatar = (token: SkeletonToken): CSSObject => {
- const { skeletonAvatarCls, color, controlHeight, controlHeightLG, controlHeightSM } = token;
+ const { skeletonAvatarCls, gradientFromColor, controlHeight, controlHeightLG, controlHeightSM } =
+ token;
return {
[`${skeletonAvatarCls}`]: {
display: 'inline-block',
verticalAlign: 'top',
- background: color,
+ background: gradientFromColor,
...genSkeletonElementAvatarSize(controlHeight),
},
[`${skeletonAvatarCls}${skeletonAvatarCls}-circle`]: {
@@ -87,13 +92,13 @@ const genSkeletonElementInput = (token: SkeletonToken): CSSObject => {
skeletonInputCls,
controlHeightLG,
controlHeightSM,
- color,
+ gradientFromColor,
} = token;
return {
[`${skeletonInputCls}`]: {
display: 'inline-block',
verticalAlign: 'top',
- background: color,
+ background: gradientFromColor,
borderRadius: borderRadiusSM,
...genSkeletonElementInputSize(controlHeight),
},
@@ -114,14 +119,14 @@ const genSkeletonElementImageSize = (size: number): CSSObject => ({
});
const genSkeletonElementImage = (token: SkeletonToken): CSSObject => {
- const { skeletonImageCls, imageSizeBase, color, borderRadiusSM } = token;
+ const { skeletonImageCls, imageSizeBase, gradientFromColor, borderRadiusSM } = token;
return {
[`${skeletonImageCls}`]: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
verticalAlign: 'top',
- background: color,
+ background: gradientFromColor,
borderRadius: borderRadiusSM,
...genSkeletonElementImageSize(imageSizeBase * 2),
[`${skeletonImageCls}-path`]: {
@@ -172,13 +177,13 @@ const genSkeletonElementButton = (token: SkeletonToken): CSSObject => {
controlHeight,
controlHeightLG,
controlHeightSM,
- color,
+ gradientFromColor,
} = token;
return {
[`${skeletonButtonCls}`]: {
display: 'inline-block',
verticalAlign: 'top',
- background: color,
+ background: gradientFromColor,
borderRadius: borderRadiusSM,
width: controlHeight * 2,
minWidth: controlHeight * 2,
@@ -211,15 +216,15 @@ const genBaseStyle: GenerateStyle = (token: SkeletonToken) => {
controlHeight,
controlHeightLG,
controlHeightSM,
- color,
+ gradientFromColor,
padding,
marginSM,
borderRadius,
- skeletonTitleHeight,
- skeletonBlockRadius,
- skeletonParagraphLineHeight,
+ titleHeight,
+ blockRadius,
+ paragraphLiHeight,
controlHeightXS,
- skeletonParagraphMarginTop,
+ paragraphMarginTop,
} = token;
return {
@@ -236,7 +241,7 @@ const genBaseStyle: GenerateStyle = (token: SkeletonToken) => {
[`${skeletonAvatarCls}`]: {
display: 'inline-block',
verticalAlign: 'top',
- background: color,
+ background: gradientFromColor,
...genSkeletonElementAvatarSize(controlHeight),
},
[`${skeletonAvatarCls}-circle`]: {
@@ -257,9 +262,9 @@ const genBaseStyle: GenerateStyle = (token: SkeletonToken) => {
// Title
[`${skeletonTitleCls}`]: {
width: '100%',
- height: skeletonTitleHeight,
- background: color,
- borderRadius: skeletonBlockRadius,
+ height: titleHeight,
+ background: gradientFromColor,
+ borderRadius: blockRadius,
[`+ ${skeletonParagraphCls}`]: {
marginBlockStart: controlHeightSM,
},
@@ -270,10 +275,10 @@ const genBaseStyle: GenerateStyle = (token: SkeletonToken) => {
padding: 0,
'> li': {
width: '100%',
- height: skeletonParagraphLineHeight,
+ height: paragraphLiHeight,
listStyle: 'none',
- background: color,
- borderRadius: skeletonBlockRadius,
+ background: gradientFromColor,
+ borderRadius: blockRadius,
'+ li': {
marginBlockStart: controlHeightXS,
},
@@ -297,7 +302,7 @@ const genBaseStyle: GenerateStyle = (token: SkeletonToken) => {
marginBlockStart: marginSM,
[`+ ${skeletonParagraphCls}`]: {
- marginBlockStart: skeletonParagraphMarginTop,
+ marginBlockStart: paragraphMarginTop,
},
},
},
@@ -353,22 +358,31 @@ export default genComponentStyleHook(
skeletonInputCls: `${componentCls}-input`,
skeletonImageCls: `${componentCls}-image`,
imageSizeBase: token.controlHeight * 1.5,
- skeletonTitleHeight: token.controlHeight / 2,
- skeletonBlockRadius: token.borderRadiusSM,
- skeletonParagraphLineHeight: token.controlHeight / 2,
- skeletonParagraphMarginTop: token.marginLG + token.marginXXS,
borderRadius: 100, // Large number to make capsule shape
- skeletonLoadingBackground: `linear-gradient(90deg, ${token.color} 25%, ${token.colorGradientEnd} 37%, ${token.color} 63%)`,
+ skeletonLoadingBackground: `linear-gradient(90deg, ${token.gradientFromColor} 25%, ${token.gradientToColor} 37%, ${token.gradientFromColor} 63%)`,
skeletonLoadingMotionDuration: '1.4s',
});
return [genBaseStyle(skeletonToken)];
},
(token) => {
const { colorFillContent, colorFill } = token;
-
+ const gradientFromColor = colorFillContent;
+ const gradientToColor = colorFill;
return {
- color: colorFillContent,
- colorGradientEnd: colorFill,
+ color: gradientFromColor,
+ colorGradientEnd: gradientToColor,
+ gradientFromColor,
+ gradientToColor,
+ titleHeight: token.controlHeight / 2,
+ blockRadius: token.borderRadiusSM,
+ paragraphMarginTop: token.marginLG + token.marginXXS,
+ paragraphLiHeight: token.controlHeight / 2,
};
},
+ {
+ deprecatedTokens: [
+ ['color', 'gradientFromColor'],
+ ['colorGradientEnd', 'gradientToColor'],
+ ],
+ },
);
diff --git a/components/theme/util/genComponentStyleHook.ts b/components/theme/util/genComponentStyleHook.ts
index e3f2666297..eb78e1ab85 100644
--- a/components/theme/util/genComponentStyleHook.ts
+++ b/components/theme/util/genComponentStyleHook.ts
@@ -1,6 +1,7 @@
/* eslint-disable no-redeclare */
import type { CSSInterpolation } from '@ant-design/cssinjs';
import { useStyleRegister } from '@ant-design/cssinjs';
+import { warning } from 'rc-util';
import { useContext } from 'react';
import { ConfigContext } from '../../config-provider/context';
import { genCommonStyle, genLinkStyle } from '../../style';
@@ -13,6 +14,13 @@ export type OverrideComponent = keyof OverrideTokenWithoutDerivative;
export type GlobalTokenWithComponent = GlobalToken &
ComponentTokenMap[ComponentName];
+type ComponentToken = Exclude<
+ OverrideTokenWithoutDerivative[ComponentName],
+ undefined
+>;
+type ComponentTokenKey =
+ keyof ComponentToken;
+
export interface StyleInfo {
hashId: string;
prefixCls: string;
@@ -43,6 +51,8 @@ export default function genComponentStyleHook OverrideTokenWithoutDerivative[ComponentName]),
options?: {
resetStyle?: boolean;
+ // Deprecated token key map [["oldTokenKey", "newTokenKey"], ["oldTokenKey", "newTokenKey"]]
+ deprecatedTokens?: [ComponentTokenKey, ComponentTokenKey][];
},
) {
return (prefixCls: string): UseComponentStyleResult => {
@@ -72,7 +82,27 @@ export default function genComponentStyleHook;
+ const mergedComponentToken = { ...defaultComponentToken, ...customComponentToken };
+
+ if (options?.deprecatedTokens) {
+ const { deprecatedTokens } = options;
+ deprecatedTokens.forEach(([oldTokenKey, newTokenKey]) => {
+ if (process.env.NODE_ENV !== 'production') {
+ warning(
+ !customComponentToken?.[oldTokenKey],
+ `The token '${String(oldTokenKey)}' of ${component} had deprecated, use '${String(
+ newTokenKey,
+ )}' instead.`,
+ );
+ }
+
+ mergedComponentToken[newTokenKey] =
+ customComponentToken?.[newTokenKey] ||
+ customComponentToken?.[oldTokenKey] ||
+ defaultComponentToken[newTokenKey];
+ });
+ }
const componentCls = `.${prefixCls}`;
const mergedToken = mergeToken<
diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md
index 178586cf7b..9189f8250e 100644
--- a/docs/react/migrate-less-variables.en-US.md
+++ b/docs/react/migrate-less-variables.en-US.md
@@ -185,7 +185,18 @@ This document contains the correspondence between all the less variables related
-
+### Skeleton
+
+
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@skeleton-block-radius` | `blockRadius` | - |
+| `@skeleton-title-height` | `titleHeight` | - |
+| `@skeleton-color` | `gradientFromColor` | - |
+| `@skeleton-to-color` | `gradientToColor` | - |
+| `@skeleton-paragraph-margin-top` | `paragraphMarginTop` | - |
+| `@skeleton-paragraph-li-height` | `paragraphLiHeight` | - |
+| `@skeleton-paragraph-li-margin-top` | - | 由于样式变化已废弃 |
diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md
index 0c1ca98018..f89f4100b0 100644
--- a/docs/react/migrate-less-variables.zh-CN.md
+++ b/docs/react/migrate-less-variables.zh-CN.md
@@ -185,7 +185,18 @@ title: Less 变量迁移 Design Token
-
+### Skeleton 骨架屏
+
+
+| Less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@skeleton-block-radius` | `blockRadius` | - |
+| `@skeleton-title-height` | `titleHeight` | - |
+| `@skeleton-color` | `gradientFromColor` | - |
+| `@skeleton-to-color` | `gradientToColor` | - |
+| `@skeleton-paragraph-margin-top` | `paragraphMarginTop` | - |
+| `@skeleton-paragraph-li-height` | `paragraphLiHeight` | - |
+| `@skeleton-paragraph-li-margin-top` | - | 由于样式变化已废弃 |