From ae45d29974dc040fcd1ae35cf70e69d8e2b97cf2 Mon Sep 17 00:00:00 2001 From: ZhouWei <1244620067@qq.com> Date: Fri, 26 Apr 2024 21:23:35 +0800 Subject: [PATCH] feat: update stpes style --- .../__tests__/__snapshots__/demo.test.js.snap | 216 +++++++++-------- components/steps/style/custom-icon.ts | 12 +- components/steps/style/horizontal.ts | 18 ++ components/steps/style/index.tsx | 228 ++++++++++++------ components/steps/style/label-placement.ts | 8 +- components/steps/style/nav.ts | 17 +- components/steps/style/progress-dot.ts | 50 ++-- components/steps/style/progress.ts | 57 +++-- components/steps/style/small.ts | 20 +- components/steps/style/vertical.ts | 14 +- components/theme/internal.ts | 11 + components/vc-steps/Step.tsx | 2 +- components/vc-steps/Steps.tsx | 4 +- 13 files changed, 401 insertions(+), 256 deletions(-) create mode 100644 components/steps/style/horizontal.ts diff --git a/components/steps/__tests__/__snapshots__/demo.test.js.snap b/components/steps/__tests__/__snapshots__/demo.test.js.snap index f5f6904964..1f76411b15 100644 --- a/components/steps/__tests__/__snapshots__/demo.test.js.snap +++ b/components/steps/__tests__/__snapshots__/demo.test.js.snap @@ -4,7 +4,7 @@ exports[`renders ./components/steps/demo/clickable.vue correctly 1`] = `
-
+
@@ -18,7 +18,7 @@ exports[`renders ./components/steps/demo/clickable.vue correctly 1`] = `
-
+
@@ -32,7 +32,7 @@ exports[`renders ./components/steps/demo/clickable.vue correctly 1`] = `
-
+
@@ -51,7 +51,7 @@ exports[`renders ./components/steps/demo/clickable.vue correctly 1`] = `
-
+
@@ -65,7 +65,7 @@ exports[`renders ./components/steps/demo/clickable.vue correctly 1`] = `
-
+
@@ -79,7 +79,7 @@ exports[`renders ./components/steps/demo/clickable.vue correctly 1`] = `
-
+
@@ -100,11 +100,13 @@ exports[`renders ./components/steps/demo/customized-progress-dot.vue correctly 1
-
+
-
+
+ +
Finished @@ -114,11 +116,13 @@ exports[`renders ./components/steps/demo/customized-progress-dot.vue correctly 1
-
+
-
+
+ +
In Progress @@ -128,11 +132,13 @@ exports[`renders ./components/steps/demo/customized-progress-dot.vue correctly 1
-
+
-
+
+ +
Waiting @@ -142,11 +148,13 @@ exports[`renders ./components/steps/demo/customized-progress-dot.vue correctly 1
-
+
-
+
+ +
Waiting @@ -162,11 +170,11 @@ exports[`renders ./components/steps/demo/customized-progress-dot.vue correctly 1 exports[`renders ./components/steps/demo/error.vue correctly 1`] = `
-
+
-
+
Finished @@ -176,11 +184,11 @@ exports[`renders ./components/steps/demo/error.vue correctly 1`] = `
-
+
-
+
In Process @@ -190,7 +198,7 @@ exports[`renders ./components/steps/demo/error.vue correctly 1`] = `
-
+
@@ -209,11 +217,11 @@ exports[`renders ./components/steps/demo/error.vue correctly 1`] = ` exports[`renders ./components/steps/demo/icon.vue correctly 1`] = `
-
+
-
+
Login @@ -223,11 +231,11 @@ exports[`renders ./components/steps/demo/icon.vue correctly 1`] = `
-
+
-
+
Verification @@ -237,11 +245,11 @@ exports[`renders ./components/steps/demo/icon.vue correctly 1`] = `
-
+
-
+
Pay @@ -251,11 +259,11 @@ exports[`renders ./components/steps/demo/icon.vue correctly 1`] = `
-
+
-
+
Done @@ -284,9 +292,8 @@ exports[`renders ./components/steps/demo/inline.vue correctly 1`] = `
-
-
+
@@ -301,7 +308,7 @@ exports[`renders ./components/steps/demo/inline.vue correctly 1`] = `
-
+
@@ -316,7 +323,7 @@ exports[`renders ./components/steps/demo/inline.vue correctly 1`] = `
-
+
@@ -329,6 +336,7 @@ exports[`renders ./components/steps/demo/inline.vue correctly 1`] = `
+
@@ -342,9 +350,8 @@ exports[`renders ./components/steps/demo/inline.vue correctly 1`] = `
-
-
+
@@ -359,7 +366,7 @@ exports[`renders ./components/steps/demo/inline.vue correctly 1`] = `
-
+
@@ -374,7 +381,7 @@ exports[`renders ./components/steps/demo/inline.vue correctly 1`] = `
-
+
@@ -387,6 +394,7 @@ exports[`renders ./components/steps/demo/inline.vue correctly 1`] = `
+
@@ -400,9 +408,8 @@ exports[`renders ./components/steps/demo/inline.vue correctly 1`] = `
-
-
+
@@ -417,7 +424,7 @@ exports[`renders ./components/steps/demo/inline.vue correctly 1`] = `
-
+
@@ -432,7 +439,7 @@ exports[`renders ./components/steps/demo/inline.vue correctly 1`] = `
-
+
@@ -445,6 +452,7 @@ exports[`renders ./components/steps/demo/inline.vue correctly 1`] = `
+
@@ -458,9 +466,8 @@ exports[`renders ./components/steps/demo/inline.vue correctly 1`] = `
-
-
+
@@ -475,7 +482,7 @@ exports[`renders ./components/steps/demo/inline.vue correctly 1`] = `
-
+
@@ -490,7 +497,7 @@ exports[`renders ./components/steps/demo/inline.vue correctly 1`] = `
-
+
@@ -503,6 +510,7 @@ exports[`renders ./components/steps/demo/inline.vue correctly 1`] = `
+
@@ -519,11 +527,11 @@ exports[`renders ./components/steps/demo/label-placement.vue correctly 1`] = `
-
+
-
+
Finished @@ -533,7 +541,7 @@ exports[`renders ./components/steps/demo/label-placement.vue correctly 1`] = `
-
+
@@ -547,7 +555,7 @@ exports[`renders ./components/steps/demo/label-placement.vue correctly 1`] = `
-
+
@@ -563,11 +571,11 @@ exports[`renders ./components/steps/demo/label-placement.vue correctly 1`] = `

-
+
-
+
Finished @@ -577,7 +585,7 @@ exports[`renders ./components/steps/demo/label-placement.vue correctly 1`] = `
-
+
@@ -608,7 +616,7 @@ exports[`renders ./components/steps/demo/label-placement.vue correctly 1`] = `
-
+
@@ -624,11 +632,11 @@ exports[`renders ./components/steps/demo/label-placement.vue correctly 1`] = `

-
+
-
+
Finished @@ -638,7 +646,7 @@ exports[`renders ./components/steps/demo/label-placement.vue correctly 1`] = `
-
+
@@ -652,7 +660,7 @@ exports[`renders ./components/steps/demo/label-placement.vue correctly 1`] = `
-
+
@@ -673,11 +681,11 @@ exports[`renders ./components/steps/demo/nav.vue correctly 1`] = `
-
+
-
+
Step 1
00:00:05
@@ -686,7 +694,7 @@ exports[`renders ./components/steps/demo/nav.vue correctly 1`] = `
-
+
@@ -699,7 +707,7 @@ exports[`renders ./components/steps/demo/nav.vue correctly 1`] = `
-
+
@@ -714,11 +722,11 @@ exports[`renders ./components/steps/demo/nav.vue correctly 1`] = `
-
+
-
+
Step 1 @@ -728,7 +736,7 @@ exports[`renders ./components/steps/demo/nav.vue correctly 1`] = `
-
+
@@ -742,7 +750,7 @@ exports[`renders ./components/steps/demo/nav.vue correctly 1`] = `
-
+
@@ -756,7 +764,7 @@ exports[`renders ./components/steps/demo/nav.vue correctly 1`] = `
-
+
@@ -772,11 +780,11 @@ exports[`renders ./components/steps/demo/nav.vue correctly 1`] = `
-
+
-
+
finish 1 @@ -786,11 +794,11 @@ exports[`renders ./components/steps/demo/nav.vue correctly 1`] = `
-
+
-
+
finish 2 @@ -800,7 +808,7 @@ exports[`renders ./components/steps/demo/nav.vue correctly 1`] = `
-
+
@@ -834,11 +842,11 @@ exports[`renders ./components/steps/demo/nav.vue correctly 1`] = ` exports[`renders ./components/steps/demo/progress.vue correctly 1`] = `
-
+
-
+
Finished @@ -848,7 +856,7 @@ exports[`renders ./components/steps/demo/progress.vue correctly 1`] = `
-
+
@@ -878,7 +886,7 @@ exports[`renders ./components/steps/demo/progress.vue correctly 1`] = `
-
+
@@ -894,11 +902,11 @@ exports[`renders ./components/steps/demo/progress.vue correctly 1`] = `
-
+
-
+
Finished @@ -908,7 +916,7 @@ exports[`renders ./components/steps/demo/progress.vue correctly 1`] = `
-
+
@@ -938,7 +946,7 @@ exports[`renders ./components/steps/demo/progress.vue correctly 1`] = `
-
+
@@ -958,7 +966,7 @@ exports[`renders ./components/steps/demo/progress-dot.vue correctly 1`] = `
-
+
@@ -972,7 +980,7 @@ exports[`renders ./components/steps/demo/progress-dot.vue correctly 1`] = `
-
+
@@ -986,7 +994,7 @@ exports[`renders ./components/steps/demo/progress-dot.vue correctly 1`] = `
-
+
@@ -1005,7 +1013,7 @@ exports[`renders ./components/steps/demo/progress-dot.vue correctly 1`] = `
-
+
@@ -1019,7 +1027,7 @@ exports[`renders ./components/steps/demo/progress-dot.vue correctly 1`] = `
-
+
@@ -1033,7 +1041,7 @@ exports[`renders ./components/steps/demo/progress-dot.vue correctly 1`] = `
-
+
@@ -1047,7 +1055,7 @@ exports[`renders ./components/steps/demo/progress-dot.vue correctly 1`] = `
-
+
@@ -1061,7 +1069,7 @@ exports[`renders ./components/steps/demo/progress-dot.vue correctly 1`] = `
-
+
@@ -1081,11 +1089,11 @@ exports[`renders ./components/steps/demo/progress-dot.vue correctly 1`] = ` exports[`renders ./components/steps/demo/simple.vue correctly 1`] = `
-
+
-
+
Finished @@ -1095,7 +1103,7 @@ exports[`renders ./components/steps/demo/simple.vue correctly 1`] = `
-
+
@@ -1108,7 +1116,7 @@ exports[`renders ./components/steps/demo/simple.vue correctly 1`] = `
-
+
@@ -1127,11 +1135,11 @@ exports[`renders ./components/steps/demo/simple.vue correctly 1`] = ` exports[`renders ./components/steps/demo/small-size.vue correctly 1`] = `
-
+
-
+
Finished @@ -1141,7 +1149,7 @@ exports[`renders ./components/steps/demo/small-size.vue correctly 1`] = `
-
+
@@ -1155,7 +1163,7 @@ exports[`renders ./components/steps/demo/small-size.vue correctly 1`] = `
-
+
@@ -1175,7 +1183,7 @@ exports[`renders ./components/steps/demo/step-next.vue correctly 1`] = `
-
+
@@ -1189,7 +1197,7 @@ exports[`renders ./components/steps/demo/step-next.vue correctly 1`] = `
-
+
@@ -1203,7 +1211,7 @@ exports[`renders ./components/steps/demo/step-next.vue correctly 1`] = `
-
+
@@ -1230,11 +1238,11 @@ exports[`renders ./components/steps/demo/step-next.vue correctly 1`] = ` exports[`renders ./components/steps/demo/vertical.vue correctly 1`] = `
-
+
-
+
Finished @@ -1244,7 +1252,7 @@ exports[`renders ./components/steps/demo/vertical.vue correctly 1`] = `
-
+
@@ -1258,7 +1266,7 @@ exports[`renders ./components/steps/demo/vertical.vue correctly 1`] = `
-
+
@@ -1277,11 +1285,11 @@ exports[`renders ./components/steps/demo/vertical.vue correctly 1`] = ` exports[`renders ./components/steps/demo/vertical-small.vue correctly 1`] = `
-
+
-
+
Finished @@ -1291,7 +1299,7 @@ exports[`renders ./components/steps/demo/vertical-small.vue correctly 1`] = `
-
+
@@ -1305,7 +1313,7 @@ exports[`renders ./components/steps/demo/vertical-small.vue correctly 1`] = `
-
+
diff --git a/components/steps/style/custom-icon.ts b/components/steps/style/custom-icon.ts index 8d6be83706..126e492f57 100644 --- a/components/steps/style/custom-icon.ts +++ b/components/steps/style/custom-icon.ts @@ -3,7 +3,7 @@ import type { StepsToken } from '.'; import type { GenerateStyle } from '../../theme/internal'; const genStepsCustomIconStyle: GenerateStyle = token => { - const { componentCls, stepsIconCustomTop, stepsIconCustomSize, stepsIconCustomFontSize } = token; + const { componentCls, customIconTop, customIconSize, customIconFontSize } = token; return { [`${componentCls}-item-custom`]: { @@ -12,11 +12,11 @@ const genStepsCustomIconStyle: GenerateStyle = token => { background: 'none', border: 0, [`> ${componentCls}-icon`]: { - top: stepsIconCustomTop, - width: stepsIconCustomSize, - height: stepsIconCustomSize, - fontSize: stepsIconCustomFontSize, - lineHeight: `${stepsIconCustomSize}px`, + top: customIconTop, + width: customIconSize, + height: customIconSize, + fontSize: customIconFontSize, + lineHeight: `${customIconFontSize}px`, }, }, }, diff --git a/components/steps/style/horizontal.ts b/components/steps/style/horizontal.ts new file mode 100644 index 0000000000..c57e313830 --- /dev/null +++ b/components/steps/style/horizontal.ts @@ -0,0 +1,18 @@ +import type { CSSObject } from '../../_util/cssinjs'; +import type { StepsToken } from '.'; +import type { GenerateStyle } from '../../theme/internal'; + +const genHorizontalStyle: GenerateStyle = token => { + const { componentCls } = token; + const stepsItemCls = `${componentCls}-item`; // .ant-steps-item + + return { + [`${componentCls}-horizontal`]: { + [`${stepsItemCls}-tail`]: { + transform: 'translateY(-50%)', + }, + }, + }; +}; + +export default genHorizontalStyle; diff --git a/components/steps/style/index.tsx b/components/steps/style/index.tsx index 14d907eb8c..f9331f61f3 100644 --- a/components/steps/style/index.tsx +++ b/components/steps/style/index.tsx @@ -1,7 +1,9 @@ +import type { CSSProperties } from 'vue'; import type { CSSObject } from '../../_util/cssinjs'; -import type { FullToken, GenerateStyle } from '../../theme/internal'; +import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import genStepsCustomIconStyle from './custom-icon'; +import genStepsHorizontalStyle from './horizontal'; import genStepsLabelPlacementStyle from './label-placement'; import genStepsNavStyle from './nav'; import genStepsProgressStyle from './progress'; @@ -10,27 +12,99 @@ import genStepsRTLStyle from './rtl'; import genStepsSmallStyle from './small'; import genStepsVerticalStyle from './vertical'; import genStepsInlineStyle from './inline'; -import { resetComponent } from '../../style'; +import { genFocusOutline, resetComponent } from '../../style'; export interface ComponentToken { - descriptionWidth: number; + /** + * @desc 描述区域最大宽度 + * @descEN Max width of description area + */ + descriptionMaxWidth: number; + /** + * @desc 自定义图标容器尺寸 + * @descEN Size of custom icon container + */ + customIconSize: number; + /** + * @desc 自定义图标 top + * @descEN Top of custom icon + */ + customIconTop: number; + /** + * @desc 自定义图标大小 + * @descEN Font size of custom icon + */ + customIconFontSize: number; + /** + * @desc 图标容器尺寸 + * @descEN Size of icon container + */ + iconSize: number; + /** + * @desc 图标 top + * @descEN Top of icon + */ + iconTop: number; + /** + * @desc 图标大小 + * @descEN Size of icon + */ + iconFontSize: number; + /** + * @desc 点状步骤点大小 + * @descEN Size of dot + */ + dotSize: number; + /** + * @desc 点状步骤点当前大小 + * @descEN Current size of dot + */ + dotCurrentSize: number; + /** + * @desc 可跳转步骤条箭头颜色 + * @descEN Color of arrow in nav + */ + navArrowColor: string; + /** + * @desc 可跳转步骤条内容最大宽度 + * @descEN Max width of nav content + */ + navContentMaxWidth: CSSProperties['maxWidth']; + /** + * @desc 小号步骤条图标大小 + * @descEN Size of small steps icon + */ + iconSizeSM: number; + /** + * @desc 标题行高 + * @descEN Line height of title + */ + titleLineHeight: number; + /** + * @internal + */ + waitIconColor: string; + /** + * @internal + */ + waitIconBgColor: string; + /** + * @internal + */ + waitIconBorderColor: string; + /** + * @internal + */ + finishIconBgColor: string; + /** + * @Internal + */ + finishIconBorderColor: string; } export interface StepsToken extends FullToken<'Steps'> { // Steps variable default.less processTailColor: string; - stepsNavArrowColor: string; - stepsIconSize: number; - stepsIconCustomSize: number; - stepsIconCustomTop: number; - stepsIconCustomFontSize: number; - stepsIconTop: number; - stepsIconFontSize: number; - stepsTitleLineHeight: number; - stepsSmallIconSize: number; - stepsDotSize: number; - stepsCurrentDotSize: number; - stepsNavContentMaxWidth: string; // Steps component less variable processIconColor: string; processTitleColor: string; @@ -38,19 +112,14 @@ export interface StepsToken extends FullToken<'Steps'> { processIconBgColor: string; processIconBorderColor: string; processDotColor: string; - waitIconColor: string; waitTitleColor: string; waitDescriptionColor: string; waitTailColor: string; - waitIconBgColor: string; - waitIconBorderColor: string; waitDotColor: string; finishIconColor: string; finishTitleColor: string; finishDescriptionColor: string; finishTailColor: string; - finishIconBgColor: string; - finishIconBorderColor: string; finishDotColor: string; errorIconColor: string; errorTitleColor: string; @@ -67,14 +136,18 @@ export interface StepsToken extends FullToken<'Steps'> { inlineTailColor: string; } -enum StepItemStatusEnum { - wait = 'wait', - process = 'process', - finish = 'finish', - error = 'error', -} +const STEP_ITEM_STATUS_WAIT = 'wait'; +const STEP_ITEM_STATUS_PROCESS = 'process'; +const STEP_ITEM_STATUS_FINISH = 'finish'; +const STEP_ITEM_STATUS_ERROR = 'error'; -const genStepsItemStatusStyle = (status: StepItemStatusEnum, token: StepsToken): CSSObject => { +type StepItemStatus = + | typeof STEP_ITEM_STATUS_WAIT + | typeof STEP_ITEM_STATUS_PROCESS + | typeof STEP_ITEM_STATUS_FINISH + | typeof STEP_ITEM_STATUS_ERROR; + +const genStepsItemStatusStyle = (status: StepItemStatus, token: StepsToken): CSSObject => { const prefix = `${token.componentCls}-item`; const iconColorKey: keyof StepsToken = `${status}IconColor`; const titleColorKey: keyof StepsToken = `${status}TitleColor`; @@ -118,6 +191,7 @@ const genStepsItemStatusStyle = (status: StepItemStatusEnum, token: StepsToken): const genStepsItemStyle: GenerateStyle = token => { const { componentCls, motionDurationSlow } = token; const stepsItemCls = `${componentCls}-item`; // .ant-steps-item + const stepItemIconCls = `${stepsItemCls}-icon`; return { [stepsItemCls]: { @@ -136,35 +210,41 @@ const genStepsItemStyle: GenerateStyle = token => { }, [`${stepsItemCls}-container`]: { outline: 'none', + + [`&:focus-visible`]: { + [stepItemIconCls]: { + ...genFocusOutline(token), + }, + }, }, - [`${stepsItemCls}-icon, ${stepsItemCls}-content`]: { + [`${stepItemIconCls}, ${stepsItemCls}-content`]: { display: 'inline-block', verticalAlign: 'top', }, - [`${stepsItemCls}-icon`]: { - width: token.stepsIconSize, - height: token.stepsIconSize, + [stepItemIconCls]: { + width: token.iconSize, + height: token.iconSize, marginTop: 0, marginBottom: 0, marginInlineStart: 0, marginInlineEnd: token.marginXS, - fontSize: token.stepsIconFontSize, + fontSize: token.iconFontSize, fontFamily: token.fontFamily, - lineHeight: `${token.stepsIconSize}px`, + lineHeight: `${token.iconSize}px`, textAlign: 'center', - borderRadius: token.stepsIconSize, + borderRadius: token.iconSize, border: `${token.lineWidth}px ${token.lineType} transparent`, transition: `background-color ${motionDurationSlow}, border-color ${motionDurationSlow}`, [`${componentCls}-icon`]: { position: 'relative', - top: token.stepsIconTop, + top: token.iconTop, color: token.colorPrimary, lineHeight: 1, }, }, [`${stepsItemCls}-tail`]: { position: 'absolute', - top: token.stepsIconSize / 2 - token.paddingXXS, + top: token.iconSize / 2 - token.paddingXXS, insetInlineStart: 0, width: '100%', @@ -184,11 +264,11 @@ const genStepsItemStyle: GenerateStyle = token => { paddingInlineEnd: token.padding, color: token.colorText, fontSize: token.fontSizeLG, - lineHeight: `${token.stepsTitleLineHeight}px`, + lineHeight: `${token.titleLineHeight}px`, '&::after': { position: 'absolute', - top: token.stepsTitleLineHeight / 2, + top: token.titleLineHeight / 2, insetInlineStart: '100%', display: 'block', width: 9999, @@ -208,13 +288,13 @@ const genStepsItemStyle: GenerateStyle = token => { color: token.colorTextDescription, fontSize: token.fontSize, }, - ...genStepsItemStatusStyle(StepItemStatusEnum.wait, token), - ...genStepsItemStatusStyle(StepItemStatusEnum.process, token), + ...genStepsItemStatusStyle(STEP_ITEM_STATUS_WAIT, token), + ...genStepsItemStatusStyle(STEP_ITEM_STATUS_PROCESS, token), [`${stepsItemCls}-process > ${stepsItemCls}-container > ${stepsItemCls}-title`]: { fontWeight: token.fontWeightStrong, }, - ...genStepsItemStatusStyle(StepItemStatusEnum.finish, token), - ...genStepsItemStatusStyle(StepItemStatusEnum.error, token), + ...genStepsItemStatusStyle(STEP_ITEM_STATUS_FINISH, token), + ...genStepsItemStatusStyle(STEP_ITEM_STATUS_ERROR, token), [`${stepsItemCls}${componentCls}-next-error > ${componentCls}-item-title::after`]: { background: token.colorError, }, @@ -278,7 +358,7 @@ const genStepsClickableStyle: GenerateStyle = token => { display: 'none', }, '&-description': { - maxWidth: token.descriptionWidth, + maxWidth: token.descriptionMaxWidth, whiteSpace: 'normal', }, }, @@ -306,6 +386,8 @@ const genStepsStyle: GenerateStyle = token => { ...genStepsSmallStyle(token), // vertical ...genStepsVerticalStyle(token), + // horizontal + ...genStepsHorizontalStyle(token), // label-placement ...genStepsLabelPlacementStyle(token), // progress-dot @@ -323,47 +405,43 @@ const genStepsStyle: GenerateStyle = token => { }; // ============================== Export ============================== +export const prepareComponentToken: GetDefaultToken<'Steps'> = token => ({ + titleLineHeight: token.controlHeight, + customIconSize: token.controlHeight, + customIconTop: 0, + customIconFontSize: token.controlHeightSM, + iconSize: token.controlHeight, + iconTop: -0.5, // magic for ui experience + iconFontSize: token.fontSize, + iconSizeSM: token.fontSizeHeading3, + dotSize: token.controlHeight / 4, + dotCurrentSize: token.controlHeightLG / 4, + navArrowColor: token.colorTextDisabled, + navContentMaxWidth: 'auto', + descriptionMaxWidth: 140, + waitIconColor: token.wireframe ? token.colorTextDisabled : token.colorTextLabel, + waitIconBgColor: token.wireframe ? token.colorBgContainer : token.colorFillContent, + waitIconBorderColor: token.wireframe ? token.colorTextDisabled : 'transparent', + finishIconBgColor: token.wireframe ? token.colorBgContainer : token.controlItemBgActive, + finishIconBorderColor: token.wireframe ? token.colorPrimary : token.controlItemBgActive, +}); export default genComponentStyleHook( 'Steps', token => { const { - wireframe, colorTextDisabled, - fontSizeHeading3, - fontSize, - controlHeight, controlHeightLG, colorTextLightSolid, colorText, colorPrimary, - colorTextLabel, colorTextDescription, colorTextQuaternary, - colorFillContent, - controlItemBgActive, colorError, - colorBgContainer, colorBorderSecondary, + colorSplit, } = token; - const stepsIconSize = token.controlHeight; - const processTailColor = token.colorSplit; - const stepsToken = mergeToken(token, { - // Steps variable default.less - processTailColor, - stepsNavArrowColor: colorTextDisabled, - stepsIconSize, - stepsIconCustomSize: stepsIconSize, - stepsIconCustomTop: 0, - stepsIconCustomFontSize: controlHeightLG / 2, - stepsIconTop: -0.5, // magic for ui experience - stepsIconFontSize: fontSize, - stepsTitleLineHeight: controlHeight, - stepsSmallIconSize: fontSizeHeading3, - stepsDotSize: controlHeight / 4, - stepsCurrentDotSize: controlHeightLG / 4, - stepsNavContentMaxWidth: 'auto', // Steps component less variable processIconColor: colorTextLightSolid, processTitleColor: colorText, @@ -371,24 +449,20 @@ export default genComponentStyleHook( processIconBgColor: colorPrimary, processIconBorderColor: colorPrimary, processDotColor: colorPrimary, - waitIconColor: wireframe ? colorTextDisabled : colorTextLabel, + processTailColor: colorSplit, waitTitleColor: colorTextDescription, waitDescriptionColor: colorTextDescription, - waitTailColor: processTailColor, - waitIconBgColor: wireframe ? colorBgContainer : colorFillContent, - waitIconBorderColor: wireframe ? colorTextDisabled : 'transparent', + waitTailColor: colorSplit, waitDotColor: colorTextDisabled, finishIconColor: colorPrimary, finishTitleColor: colorText, finishDescriptionColor: colorTextDescription, finishTailColor: colorPrimary, - finishIconBgColor: wireframe ? colorBgContainer : controlItemBgActive, - finishIconBorderColor: wireframe ? colorPrimary : controlItemBgActive, finishDotColor: colorPrimary, errorIconColor: colorTextLightSolid, errorTitleColor: colorError, errorDescriptionColor: colorError, - errorTailColor: processTailColor, + errorTailColor: colorSplit, errorIconBgColor: colorError, errorIconBorderColor: colorError, errorDotColor: colorError, @@ -402,7 +476,5 @@ export default genComponentStyleHook( return [genStepsStyle(stepsToken)]; }, - { - descriptionWidth: 140, - }, + prepareComponentToken, ); diff --git a/components/steps/style/label-placement.ts b/components/steps/style/label-placement.ts index 0f4d8c8f7f..0a83e2d79f 100644 --- a/components/steps/style/label-placement.ts +++ b/components/steps/style/label-placement.ts @@ -3,7 +3,7 @@ import type { StepsToken } from '.'; import type { GenerateStyle } from '../../theme/internal'; const genStepsLabelPlacementStyle: GenerateStyle = token => { - const { componentCls, stepsIconSize, lineHeight, stepsSmallIconSize } = token; + const { componentCls, iconSize, lineHeight, iconSizeSM } = token; return { [`&${componentCls}-label-vertical`]: { @@ -11,13 +11,13 @@ const genStepsLabelPlacementStyle: GenerateStyle = token overflow: 'visible', '&-tail': { - marginInlineStart: stepsIconSize / 2 + token.controlHeightLG, + marginInlineStart: iconSize / 2 + token.controlHeightLG, padding: `${token.paddingXXS}px ${token.paddingLG}px`, }, '&-content': { display: 'block', - width: (stepsIconSize / 2 + token.controlHeightLG) * 2, + width: (iconSize / 2 + token.controlHeightLG) * 2, marginTop: token.marginSM, textAlign: 'center', }, @@ -46,7 +46,7 @@ const genStepsLabelPlacementStyle: GenerateStyle = token [`&${componentCls}-small:not(${componentCls}-dot)`]: { [`${componentCls}-item`]: { '&-icon': { - marginInlineStart: token.controlHeightLG + (stepsIconSize - stepsSmallIconSize) / 2, + marginInlineStart: token.controlHeightLG + (iconSize - iconSizeSM) / 2, }, }, }, diff --git a/components/steps/style/nav.ts b/components/steps/style/nav.ts index 741ed3f768..9650b516e9 100644 --- a/components/steps/style/nav.ts +++ b/components/steps/style/nav.ts @@ -6,8 +6,8 @@ import type { GenerateStyle } from '../../theme/internal'; const genStepsNavStyle: GenerateStyle = token => { const { componentCls, - stepsNavContentMaxWidth, - stepsNavArrowColor, + navContentMaxWidth, + navArrowColor, stepsNavActiveColor, motionDurationSlow, } = token; @@ -37,7 +37,7 @@ const genStepsNavStyle: GenerateStyle = token => { transition: `opacity ${motionDurationSlow}`, [`${componentCls}-item-content`]: { - maxWidth: stepsNavContentMaxWidth, + maxWidth: navContentMaxWidth, }, [`${componentCls}-item-title`]: { @@ -76,10 +76,10 @@ const genStepsNavStyle: GenerateStyle = token => { display: 'inline-block', width: token.fontSizeIcon, height: token.fontSizeIcon, - borderTop: `${token.lineWidth}px ${token.lineType} ${stepsNavArrowColor}`, + borderTop: `${token.lineWidth}px ${token.lineType} ${navArrowColor}`, borderBottom: 'none', borderInlineStart: 'none', - borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${stepsNavArrowColor}`, + borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${navArrowColor}`, transform: 'translateY(-50%) translateX(-50%) rotate(45deg)', content: '""', }, @@ -130,6 +130,13 @@ const genStepsNavStyle: GenerateStyle = token => { textAlign: 'center', transform: 'translateY(-50%) translateX(-50%) rotate(135deg)', }, + + '&:last-child': { + '&::after': { + display: 'none', + }, + }, + [`> ${componentCls}-item-container > ${componentCls}-item-tail`]: { visibility: 'hidden', }, diff --git a/components/steps/style/progress-dot.ts b/components/steps/style/progress-dot.ts index 61275cad85..a3fc52ba67 100644 --- a/components/steps/style/progress-dot.ts +++ b/components/steps/style/progress-dot.ts @@ -5,10 +5,10 @@ import type { GenerateStyle } from '../../theme/internal'; const genStepsProgressDotStyle: GenerateStyle = token => { const { componentCls, - descriptionWidth, + descriptionMaxWidth, lineHeight, - stepsCurrentDotSize, - stepsDotSize, + dotCurrentSize, + dotSize, motionDurationSlow, } = token; @@ -20,11 +20,11 @@ const genStepsProgressDotStyle: GenerateStyle = token => }, '&-tail': { - top: Math.floor((token.stepsDotSize - token.lineWidth * 3) / 2), + top: Math.floor((token.dotSize - token.lineWidth * 3) / 2), width: '100%', marginTop: 0, marginBottom: 0, - marginInline: `${descriptionWidth / 2}px 0`, + marginInline: `${descriptionMaxWidth / 2}px 0`, padding: 0, '&::after': { @@ -34,11 +34,11 @@ const genStepsProgressDotStyle: GenerateStyle = token => }, }, '&-icon': { - width: stepsDotSize, - height: stepsDotSize, - marginInlineStart: (token.descriptionWidth - stepsDotSize) / 2, + width: dotSize, + height: dotSize, + marginInlineStart: (token.descriptionMaxWidth - dotSize) / 2, paddingInlineEnd: 0, - lineHeight: `${stepsDotSize}px`, + lineHeight: `${dotSize}px`, background: 'transparent', border: 0, @@ -54,7 +54,7 @@ const genStepsProgressDotStyle: GenerateStyle = token => '&::after': { position: 'absolute', top: -token.marginSM, - insetInlineStart: (stepsDotSize - token.controlHeightLG * 1.5) / 2, + insetInlineStart: (dotSize - token.controlHeightLG * 1.5) / 2, width: token.controlHeightLG * 1.5, height: token.controlHeight, background: 'transparent', @@ -64,16 +64,16 @@ const genStepsProgressDotStyle: GenerateStyle = token => }, '&-content': { - width: descriptionWidth, + width: descriptionMaxWidth, }, [`&-process ${componentCls}-item-icon`]: { position: 'relative', - top: (stepsDotSize - stepsCurrentDotSize) / 2, - width: stepsCurrentDotSize, - height: stepsCurrentDotSize, - lineHeight: `${stepsCurrentDotSize}px`, + top: (dotSize - dotCurrentSize) / 2, + width: dotCurrentSize, + height: dotCurrentSize, + lineHeight: `${dotCurrentSize}px`, background: 'none', - marginInlineStart: (token.descriptionWidth - stepsCurrentDotSize) / 2, + marginInlineStart: (token.descriptionMaxWidth - dotCurrentSize) / 2, }, [`&-process ${componentCls}-icon`]: { [`&:first-child ${componentCls}-icon-dot`]: { @@ -84,39 +84,39 @@ const genStepsProgressDotStyle: GenerateStyle = token => }, [`&${componentCls}-vertical${componentCls}-dot`]: { [`${componentCls}-item-icon`]: { - marginTop: (token.controlHeight - stepsDotSize) / 2, + marginTop: (token.controlHeight - dotSize) / 2, marginInlineStart: 0, background: 'none', }, [`${componentCls}-item-process ${componentCls}-item-icon`]: { - marginTop: (token.controlHeight - stepsCurrentDotSize) / 2, + marginTop: (token.controlHeight - dotCurrentSize) / 2, top: 0, - insetInlineStart: (stepsDotSize - stepsCurrentDotSize) / 2, + insetInlineStart: (dotSize - dotCurrentSize) / 2, marginInlineStart: 0, }, // https://github.com/ant-design/ant-design/issues/18354 [`${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: { - top: (token.controlHeight - stepsDotSize) / 2, + top: (token.controlHeight - dotSize) / 2, insetInlineStart: 0, margin: 0, - padding: `${stepsDotSize + token.paddingXS}px 0 ${token.paddingXS}px`, + padding: `${dotSize + token.paddingXS}px 0 ${token.paddingXS}px`, '&::after': { - marginInlineStart: (stepsDotSize - token.lineWidth) / 2, + marginInlineStart: (dotSize - token.lineWidth) / 2, }, }, [`&${componentCls}-small`]: { [`${componentCls}-item-icon`]: { - marginTop: (token.controlHeightSM - stepsDotSize) / 2, + marginTop: (token.controlHeightSM - dotSize) / 2, }, [`${componentCls}-item-process ${componentCls}-item-icon`]: { - marginTop: (token.controlHeightSM - stepsCurrentDotSize) / 2, + marginTop: (token.controlHeightSM - dotCurrentSize) / 2, }, [`${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: { - top: (token.controlHeightSM - stepsDotSize) / 2, + top: (token.controlHeightSM - dotSize) / 2, }, }, diff --git a/components/steps/style/progress.ts b/components/steps/style/progress.ts index 6939dbafdf..f21a750978 100644 --- a/components/steps/style/progress.ts +++ b/components/steps/style/progress.ts @@ -3,42 +3,55 @@ import type { StepsToken } from '.'; import type { GenerateStyle } from '../../theme/internal'; const genStepsProgressStyle: GenerateStyle = token => { - const { antCls, componentCls } = token; + const { + antCls, + componentCls, + iconSize, + iconSizeSM, + processIconColor, + marginXXS, + lineWidthBold, + lineWidth, + paddingXXS, + } = token; + + const progressSize = iconSize + lineWidthBold * 4; + const progressSizeSM = iconSizeSM + lineWidth * 4; return { [`&${componentCls}-with-progress`]: { [`${componentCls}-item`]: { - paddingTop: token.paddingXXS, + paddingTop: paddingXXS, [`&-process ${componentCls}-item-container ${componentCls}-item-icon ${componentCls}-icon`]: { - color: token.processIconColor, + color: processIconColor, }, }, [`&${componentCls}-vertical > ${componentCls}-item `]: { - paddingInlineStart: token.paddingXXS, + paddingInlineStart: paddingXXS, [`> ${componentCls}-item-container > ${componentCls}-item-tail`]: { - top: token.marginXXS, - insetInlineStart: token.stepsIconSize / 2 - token.lineWidth + token.paddingXXS, + top: marginXXS, + insetInlineStart: iconSize / 2 - lineWidth + paddingXXS, }, }, [`&, &${componentCls}-small`]: { [`&${componentCls}-horizontal ${componentCls}-item:first-child`]: { - paddingBottom: token.paddingXXS, - paddingInlineStart: token.paddingXXS, + paddingBottom: paddingXXS, + paddingInlineStart: paddingXXS, }, }, [`&${componentCls}-small${componentCls}-vertical > ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: { - insetInlineStart: token.stepsSmallIconSize / 2 - token.lineWidth + token.paddingXXS, + insetInlineStart: iconSizeSM / 2 - lineWidth + paddingXXS, }, [`&${componentCls}-label-vertical`]: { [`${componentCls}-item ${componentCls}-item-tail`]: { - top: token.margin - 2 * token.lineWidth, + top: iconSize / 2 + paddingXXS, }, }, @@ -47,10 +60,26 @@ const genStepsProgressStyle: GenerateStyle = token => { [`${antCls}-progress`]: { position: 'absolute', - insetBlockStart: - (token.stepsIconSize - token.stepsProgressSize - token.lineWidth * 2) / 2, - insetInlineStart: - (token.stepsIconSize - token.stepsProgressSize - token.lineWidth * 2) / 2, + insetInlineStart: '50%', + top: '50%', + transform: 'translate(-50%, -50%)', + + '&-inner': { + width: `${progressSize}px !important`, + height: `${progressSize}px !important`, + }, + }, + }, + + // ============================== Small size ============================== + [`&${componentCls}-small`]: { + [`&${componentCls}-label-vertical ${componentCls}-item ${componentCls}-item-tail`]: { + top: iconSizeSM / 2 + paddingXXS, + }, + + [`${componentCls}-item-icon ${antCls}-progress-inner`]: { + width: `${progressSizeSM}px !important`, + height: `${progressSizeSM}px !important`, }, }, }, diff --git a/components/steps/style/small.ts b/components/steps/style/small.ts index ce1c5ea730..c93c2aefbc 100644 --- a/components/steps/style/small.ts +++ b/components/steps/style/small.ts @@ -5,7 +5,7 @@ import type { GenerateStyle } from '../../theme/internal'; const genStepsSmallStyle: GenerateStyle = token => { const { componentCls, - stepsSmallIconSize, + iconSizeSM, // stepsSmallIconMargin, fontSizeSM, fontSize, @@ -22,24 +22,24 @@ const genStepsSmallStyle: GenerateStyle = token => { }, [`${componentCls}-item-icon`]: { - width: stepsSmallIconSize, - height: stepsSmallIconSize, + width: iconSizeSM, + height: iconSizeSM, // margin: stepsSmallIconMargin, marginTop: 0, marginBottom: 0, marginInline: `0 ${token.marginXS}px`, fontSize: fontSizeSM, - lineHeight: `${stepsSmallIconSize}px`, + lineHeight: `${iconSizeSM}px`, textAlign: 'center', - borderRadius: stepsSmallIconSize, + borderRadius: iconSizeSM, }, [`${componentCls}-item-title`]: { paddingInlineEnd: token.paddingSM, fontSize, - lineHeight: `${stepsSmallIconSize}px`, + lineHeight: `${iconSizeSM}px`, '&::after': { - top: stepsSmallIconSize / 2, + top: iconSizeSM / 2, }, }, [`${componentCls}-item-description`]: { @@ -47,7 +47,7 @@ const genStepsSmallStyle: GenerateStyle = token => { fontSize, }, [`${componentCls}-item-tail`]: { - top: stepsSmallIconSize / 2 - token.paddingXXS, + top: iconSizeSM / 2 - token.paddingXXS, }, [`${componentCls}-item-custom ${componentCls}-item-icon`]: { width: 'inherit', @@ -57,8 +57,8 @@ const genStepsSmallStyle: GenerateStyle = token => { border: 0, borderRadius: 0, [`> ${componentCls}-icon`]: { - fontSize: stepsSmallIconSize, - lineHeight: `${stepsSmallIconSize}px`, + fontSize: iconSizeSM, + lineHeight: `${iconSizeSM}px`, transform: 'none', }, }, diff --git a/components/steps/style/vertical.ts b/components/steps/style/vertical.ts index 91c0bcbceb..a2f644ee85 100644 --- a/components/steps/style/vertical.ts +++ b/components/steps/style/vertical.ts @@ -3,7 +3,7 @@ import type { StepsToken } from '.'; import type { GenerateStyle } from '../../theme/internal'; const genStepsVerticalStyle: GenerateStyle = token => { - const { componentCls, stepsSmallIconSize, stepsIconSize } = token; + const { componentCls, iconSizeSM, iconSize } = token; return { [`&${componentCls}-vertical`]: { @@ -26,7 +26,7 @@ const genStepsVerticalStyle: GenerateStyle = token => { overflow: 'hidden', }, [`${componentCls}-item-title`]: { - lineHeight: `${stepsIconSize}px`, + lineHeight: `${iconSize}px`, }, [`${componentCls}-item-description`]: { paddingBottom: token.paddingSM, @@ -35,10 +35,10 @@ const genStepsVerticalStyle: GenerateStyle = token => { [`> ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: { position: 'absolute', top: 0, - insetInlineStart: token.stepsIconSize / 2 - token.lineWidth, + insetInlineStart: token.iconSize / 2 - token.lineWidth, width: token.lineWidth, height: '100%', - padding: `${stepsIconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`, + padding: `${iconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`, '&::after': { width: token.lineWidth, @@ -59,11 +59,11 @@ const genStepsVerticalStyle: GenerateStyle = token => { [`${componentCls}-item-tail`]: { position: 'absolute', top: 0, - insetInlineStart: token.stepsSmallIconSize / 2 - token.lineWidth, - padding: `${stepsSmallIconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`, + insetInlineStart: token.iconSizeSM / 2 - token.lineWidth, + padding: `${iconSizeSM + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`, }, [`${componentCls}-item-title`]: { - lineHeight: `${stepsSmallIconSize}px`, + lineHeight: `${iconSizeSM}px`, }, }, }, diff --git a/components/theme/internal.ts b/components/theme/internal.ts index 55c00b984b..30ebefee6e 100644 --- a/components/theme/internal.ts +++ b/components/theme/internal.ts @@ -4,6 +4,7 @@ import { createTheme, useCacheToken, useStyleRegister } from '../_util/cssinjs'; import version from '../version'; import type { AliasToken, + ComponentTokenMap, GlobalToken, MapToken, OverrideToken, @@ -34,6 +35,9 @@ import { const defaultTheme = createTheme(defaultDerivative); +export type OverrideTokenWithoutDerivative = ComponentTokenMap; +export type OverrideComponent = keyof OverrideTokenWithoutDerivative; + export { // colors PresetColors, @@ -144,3 +148,10 @@ export type GenerateStyle< ComponentToken extends object = AliasToken, ReturnType = CSSInterpolation, > = (token: ComponentToken) => ReturnType; + +export type GetDefaultToken = + | null + | OverrideTokenWithoutDerivative[C] + | (( + token: AliasToken & Partial, + ) => OverrideTokenWithoutDerivative[C]); diff --git a/components/vc-steps/Step.tsx b/components/vc-steps/Step.tsx index fa45659c28..c784921b7e 100644 --- a/components/vc-steps/Step.tsx +++ b/components/vc-steps/Step.tsx @@ -157,7 +157,7 @@ export default defineComponent({ onClick: onClick || noop, }; - if (onStepClick && !disabled) { + if (!!onStepClick && !disabled) { accessibilityProps.role = 'button'; accessibilityProps.tabindex = 0; accessibilityProps.onClick = onItemClick; diff --git a/components/vc-steps/Steps.tsx b/components/vc-steps/Steps.tsx index 20f360cf70..fd274b11cd 100644 --- a/components/vc-steps/Steps.tsx +++ b/components/vc-steps/Steps.tsx @@ -33,7 +33,7 @@ export default defineComponent({ itemRender: functionType<(item: Record, stepItem: VueNode) => VueNode>(), }, emits: ['change'], - setup(props, { slots, emit }) { + setup(props, { slots, emit, attrs }) { const onStepClick = (next: number) => { const { current } = props; if (current !== next) { @@ -66,7 +66,7 @@ export default defineComponent({ progressDot: mergedProgressDot, stepIcon, icons, - onStepClick, + onStepClick: attrs['onChange'] && onStepClick, }; // fix tail color if (status === 'error' && index === current - 1) {