diff --git a/components/_util/theme/interface.ts b/components/_util/theme/interface.ts index b7a899c974..cb31e53d7e 100644 --- a/components/_util/theme/interface.ts +++ b/components/_util/theme/interface.ts @@ -31,6 +31,7 @@ import type { ComponentToken as SelectComponentToken } from '../../select/style' import type { ComponentToken as SliderComponentToken } from '../../slider/style'; import type { ComponentToken as SpaceComponentToken } from '../../space/style'; import type { ComponentToken as SpinComponentToken } from '../../spin/style'; +import type { ComponentToken as StepsComponentToken } from '../../steps/style'; import type { ComponentToken as TimelineComponentToken } from '../../timeline/style'; import type { ComponentToken as TypographyComponentToken } from '../../typography/style'; import type { ComponentToken as UploadComponentToken } from '../../upload/style'; @@ -113,7 +114,7 @@ export interface OverrideToken { Tabs?: {}; Calendar?: CalendarComponentToken; Card?: {}; - Steps?: {}; + Steps?: StepsComponentToken; Menu?: MenuComponentToken; Modal?: ModalComponentToken; Message?: MessageComponentToken; diff --git a/components/steps/style/custom-icon.ts b/components/steps/style/custom-icon.ts index 340c3ff701..cfe8c26221 100644 --- a/components/steps/style/custom-icon.ts +++ b/components/steps/style/custom-icon.ts @@ -1,6 +1,6 @@ import type { CSSObject } from '@ant-design/cssinjs'; -import type { GenerateStyle } from '../../_util/theme'; import type { StepsToken } from '.'; +import type { GenerateStyle } from '../../_util/theme'; const genStepsCustomIconStyle: GenerateStyle = token => { const { @@ -16,10 +16,9 @@ const genStepsCustomIconStyle: GenerateStyle = token => { [`> ${componentCls}-item-container > ${componentCls}-item-icon`]: { height: 'auto', background: 'none', - border: 0, // FIXME: hardcode in v4 + border: 0, [`> ${componentCls}-icon`]: { top: stepsIconCustomTop, - insetInlineStart: 0.5, // FIXME: hardcode in v4 width: stepsIconCustomSize, height: stepsIconCustomSize, fontSize: stepsIconCustomFontSize, diff --git a/components/steps/style/index.tsx b/components/steps/style/index.tsx index 66a191e468..7e0a06e1ec 100644 --- a/components/steps/style/index.tsx +++ b/components/steps/style/index.tsx @@ -1,46 +1,35 @@ // deps-lint-skip-all -// import '../../style/index.less'; -// import './index.less'; - -// style dependencies -// deps-lint-skip: grid -// import '../../progress/style'; -import { TinyColor } from '@ctrl/tinycolor'; import type { CSSObject } from '@ant-design/cssinjs'; -import { resetComponent, genComponentStyleHook, mergeToken } from '../../_util/theme'; -import type { GenerateStyle, FullToken } from '../../_util/theme'; +import type { FullToken, GenerateStyle } from '../../_util/theme'; +import { genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme'; import genStepsCustomIconStyle from './custom-icon'; -import genStepsSmallStyle from './small'; -import genStepsVerticalStyle from './vertical'; import genStepsLabelPlacementStyle from './label-placement'; -import genStepsProgressDotStyle from './progress-dot'; -import genStepsProgressStyle from './progress'; import genStepsNavStyle from './nav'; +import genStepsProgressStyle from './progress'; +import genStepsProgressDotStyle from './progress-dot'; import genStepsRTLStyle from './rtl'; +import genStepsSmallStyle from './small'; +import genStepsVerticalStyle from './vertical'; + +export interface ComponentToken { + descriptionWidth: number; +} export interface StepsToken extends FullToken<'Steps'> { // Steps variable default.less processTailColor: string; stepsNavArrowColor: string; - stepsBackground: string; stepsIconSize: number; stepsIconCustomSize: number; stepsIconCustomTop: number; stepsIconCustomFontSize: number; stepsIconTop: number; stepsIconFontSize: number; - stepsIconMargin: string; stepsTitleLineHeight: number; stepsSmallIconSize: number; - stepsSmallIconMargin: string; stepsDotSize: number; - stepsDotTop: number; stepsCurrentDotSize: number; - stepsDescriptionMaxWidth: number; stepsNavContentMaxWidth: string; - stepsVerticalIconWidth: number; - stepsVerticalTailWidth: number; - stepsVerticalTailWidthSm: number; // Steps component less variable processIconColor: string; processTitleColor: string; @@ -59,6 +48,7 @@ export interface StepsToken extends FullToken<'Steps'> { errorDescriptionColor: string; errorTailColor: string; stepsNavActiveColor: string; + stepsProgressSize: number; } enum StepItemStatusEnum { @@ -74,10 +64,9 @@ const genStepsItemStatusStyle = (status: StepItemStatusEnum, token: StepsToken): const titleColorKey: keyof StepsToken = `${status}TitleColor`; const descriptionColorKey: keyof StepsToken = `${status}DescriptionColor`; const tailColorKey: keyof StepsToken = `${status}TailColor`; - const stepsBackground = '#fff'; // FIXME: hardcode in v4 return { [`${prefix}-${status} ${prefix}-icon`]: { - backgroundColor: stepsBackground, + backgroundColor: token.colorBgComponent, borderColor: token[iconColorKey], [`> ${token.componentCls}-icon`]: { color: token[iconColorKey], @@ -131,17 +120,15 @@ const genStepsItemStyle: GenerateStyle = token => { [`${stepsItemCls}-icon`]: { width: token.stepsIconSize, height: token.stepsIconSize, - // margin: token.stepsIconMargin, - marginTop: 0, // FIXME: hardcode in v4 - marginBottom: 0, // FIXME: hardcode in v4 - marginInline: '0 8px', // FIXME: hardcode in v4 + marginTop: 0, + marginBottom: 0, + marginInlineStart: 0, + marginInlineEnd: token.marginXS, fontSize: token.stepsIconFontSize, fontFamily: token.fontFamily, lineHeight: `${token.stepsIconSize}px`, textAlign: 'center', - border: `${token.controlLineWidth}px ${token.controlLineType} ${new TinyColor('#000') - .setAlpha(0.25) - .toRgbString()}`, // FIXME: hardcode in v4 + border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorTextDisabled}`, borderRadius: token.stepsIconSize, transition: `background-color ${motionDurationSlow}, border-color ${motionDurationSlow}`, [`${componentCls}-icon`]: { @@ -153,17 +140,16 @@ const genStepsItemStyle: GenerateStyle = token => { }, [`${stepsItemCls}-tail`]: { position: 'absolute', - top: 12, // FIXME: hardcode in v4 - insetInlineStart: 0, // FIXME: hardcode in v4 - width: '100%', // FIXME: hardcode in v4 - padding: '0 10px', // FIXME: hardcode in v4 + top: token.marginSM, + insetInlineStart: 0, + width: '100%', '&::after': { display: 'inline-block', - width: '100%', // FIXME: hardcode in v4 - height: 1, // FIXME: hardcode in v4 + width: '100%', + height: token.lineWidth, background: token.colorSplit, - borderRadius: 1, // FIXME: hardcode in v4 + borderRadius: token.lineWidth, transition: `background ${motionDurationSlow}`, content: '""', }, @@ -171,7 +157,7 @@ const genStepsItemStyle: GenerateStyle = token => { [`${stepsItemCls}-title`]: { position: 'relative', display: 'inline-block', - paddingInlineEnd: 16, // FIXME: hardcode in v4 + paddingInlineEnd: token.padding, color: token.colorText, fontSize: token.fontSizeLG, lineHeight: `${token.stepsTitleLineHeight}px`, @@ -179,17 +165,17 @@ const genStepsItemStyle: GenerateStyle = token => { '&::after': { position: 'absolute', top: token.stepsTitleLineHeight / 2, - insetInlineStart: '100%', // FIXME: hardcode in v4 + insetInlineStart: '100%', display: 'block', - width: 9999, // FIXME: hardcode in v4 - height: 1, // FIXME: hardcode in v4 + width: 9999, + height: token.lineWidth, background: token.processTailColor, content: '""', }, }, [`${stepsItemCls}-subtitle`]: { display: 'inline', - marginInlineStart: 8, // FIXME: hardcode in v4 + marginInlineStart: token.marginXS, color: token.colorTextSecondary, fontWeight: 'normal', fontSize: token.fontSizeBase, @@ -208,7 +194,7 @@ const genStepsItemStyle: GenerateStyle = token => { }, }, [`${stepsItemCls}-process > ${stepsItemCls}-container > ${stepsItemCls}-title`]: { - fontWeight: 500, // FIXME: hardcode in v4 + fontWeight: token.fontWeightStrong, }, ...genStepsItemStatusStyle(StepItemStatusEnum.finish, token), ...genStepsItemStatusStyle(StepItemStatusEnum.error, token), @@ -262,20 +248,20 @@ const genStepsClickableStyle: GenerateStyle = token => { }, [`&${componentCls}-horizontal:not(${componentCls}-label-vertical)`]: { [`${componentCls}-item`]: { - paddingInlineStart: 16, // FIXME: hardcode in v4 + paddingInlineStart: token.padding, whiteSpace: 'nowrap', '&:first-child': { - paddingInlineStart: 0, // FIXME: hardcode in v4 + paddingInlineStart: 0, }, [`&:last-child ${componentCls}-item-title`]: { - paddingInlineEnd: 0, // FIXME: hardcode in v4 + paddingInlineEnd: 0, }, '&-tail': { display: 'none', }, '&-description': { - maxWidth: token.stepsDescriptionMaxWidth, + maxWidth: token.descriptionWidth, whiteSpace: 'normal', }, }, @@ -291,7 +277,7 @@ const genStepsStyle: GenerateStyle = token => { ...resetComponent(token), display: 'flex', width: '100%', - fontSize: 0, // FIXME: hardcode in v4 + fontSize: 0, textAlign: 'initial', // single Item ...genStepsItemStyle(token), @@ -318,53 +304,52 @@ const genStepsStyle: GenerateStyle = token => { }; // ============================== Export ============================== -export default genComponentStyleHook('Steps', token => { - const stepsIconSize = 32; // FIXME: hardcode in v4 - const processTailColor = token.colorSplit; - const processIconColor = token.colorPrimary; +export default genComponentStyleHook( + 'Steps', + token => { + const stepsIconSize = token.controlHeight; + const processTailColor = token.colorSplit; + const processIconColor = token.colorPrimary; - const stepsToken = mergeToken(token, { - // Steps variable default.less - processTailColor, - stepsNavArrowColor: new TinyColor('#000').setAlpha(0.25).toRgbString(), // fade(@black, 25%), - stepsBackground: token.colorBgComponent, - stepsIconSize, - stepsIconCustomSize: stepsIconSize, - stepsIconCustomTop: 0, // FIXME: hardcode in v4 - stepsIconCustomFontSize: 24, // FIXME: hardcode in v4 - stepsIconTop: -0.5, // FIXME: hardcode in v4 - stepsIconFontSize: token.fontSizeLG, - stepsIconMargin: '0 8px 0 0', // FIXME: hardcode in v4 - stepsTitleLineHeight: 32, // FIXME: hardcode in v4 - stepsSmallIconSize: 24, // FIXME: hardcode in v4 - stepsSmallIconMargin: '0 8px 0 0', // FIXME: hardcode in v4 - stepsDotSize: 8, // FIXME: hardcode in v4 - stepsDotTop: 2, // FIXME: hardcode in v4 - stepsCurrentDotSize: 10, // FIXME: hardcode in v4 - stepsDescriptionMaxWidth: 140, // FIXME: hardcode in v4 - stepsNavContentMaxWidth: 'auto', - stepsVerticalIconWidth: 16, // FIXME: hardcode in v4 - stepsVerticalTailWidth: 16, // FIXME: hardcode in v4 - stepsVerticalTailWidthSm: 12, // FIXME: hardcode in v4 - // Steps component less variable - processIconColor, - processTitleColor: new TinyColor('#000').setAlpha(0.85).toRgbString(), // @heading-color: fade(@black, 85%) FIXME: hardcode in v4 - processDescriptionColor: token.colorText, - processIconTextColor: '#fff', // FIXME: hardcode in v4 - waitIconColor: new TinyColor('#000').setAlpha(0.25).toRgbString(), // @disabled-color FIXME: hardcode in v4 - waitTitleColor: token.colorTextSecondary, - waitDescriptionColor: token.colorTextSecondary, - waitTailColor: processTailColor, - finishIconColor: processIconColor, - finishTitleColor: token.colorText, - finishDescriptionColor: token.colorTextSecondary, - finishTailColor: token.colorPrimary, - errorIconColor: token.colorError, - errorTitleColor: token.colorError, - errorDescriptionColor: token.colorError, - errorTailColor: processTailColor, - stepsNavActiveColor: token.colorPrimary, - }); + const stepsToken = mergeToken(token, { + // Steps variable default.less + processTailColor, + stepsNavArrowColor: token.colorTextDisabled, + stepsIconSize, + stepsIconCustomSize: stepsIconSize, + stepsIconCustomTop: 0, + stepsIconCustomFontSize: token.fontSizeHeading3, + stepsIconTop: -0.5, // magic for ui experience + stepsIconFontSize: token.fontSizeLG, + stepsTitleLineHeight: token.controlHeight, + stepsSmallIconSize: token.fontSizeHeading3, + stepsDotSize: token.controlHeight / 4, + stepsCurrentDotSize: token.controlHeightLG / 4, + stepsNavContentMaxWidth: 'auto', + // Steps component less variable + processIconColor, + processTitleColor: token.colorText, + processDescriptionColor: token.colorText, + processIconTextColor: token.colorTextLightSolid, + waitIconColor: token.colorTextDisabled, + waitTitleColor: token.colorTextSecondary, + waitDescriptionColor: token.colorTextSecondary, + waitTailColor: processTailColor, + finishIconColor: processIconColor, + finishTitleColor: token.colorText, + finishDescriptionColor: token.colorTextSecondary, + finishTailColor: token.colorPrimary, + errorIconColor: token.colorError, + errorTitleColor: token.colorError, + errorDescriptionColor: token.colorError, + errorTailColor: processTailColor, + stepsNavActiveColor: token.colorPrimary, + stepsProgressSize: token.controlHeightLG, + }); - return [genStepsStyle(stepsToken)]; -}); + return [genStepsStyle(stepsToken)]; + }, + { + descriptionWidth: 140, + }, +); diff --git a/components/steps/style/label-placement.ts b/components/steps/style/label-placement.ts index 5da4dbbdf0..37bc915926 100644 --- a/components/steps/style/label-placement.ts +++ b/components/steps/style/label-placement.ts @@ -1,9 +1,9 @@ import type { CSSObject } from '@ant-design/cssinjs'; -import type { GenerateStyle } from '../../_util/theme'; import type { StepsToken } from '.'; +import type { GenerateStyle } from '../../_util/theme'; const genStepsLabelPlacementStyle: GenerateStyle = token => { - const { componentCls, stepsIconSize, lineHeight } = token; + const { componentCls, stepsIconSize, lineHeight, stepsSmallIconSize } = token; return { [`&${componentCls}-label-vertical`]: { @@ -11,25 +11,25 @@ const genStepsLabelPlacementStyle: GenerateStyle = token overflow: 'visible', '&-tail': { - marginInlineStart: 58, // FIXME: hardcode in v4 - padding: '3.5px 24px', // FIXME: hardcode in v4 + marginInlineStart: stepsIconSize / 2 + token.controlHeightLG, + padding: `${token.paddingXXS}px ${token.paddingLG}px`, }, '&-content': { display: 'block', - width: (stepsIconSize / 2 + 42) * 2, // FIXME: hardcode in v4 - marginTop: 8, // FIXME: hardcode in v4 + width: (stepsIconSize / 2 + token.controlHeightLG) * 2, + marginTop: token.marginSM, textAlign: 'center', }, '&-icon': { display: 'inline-block', - marginInlineStart: 42, // FIXME: hardcode in v4 + marginInlineStart: token.controlHeightLG, }, '&-title': { - paddingInlineEnd: 0, // FIXME: hardcode in v4 - paddingInlineStart: 0, // FIXME: hardcode in v4 + paddingInlineEnd: 0, + paddingInlineStart: 0, '&::after': { display: 'none', @@ -38,15 +38,15 @@ const genStepsLabelPlacementStyle: GenerateStyle = token '&-subtitle': { display: 'block', - marginBottom: 4, // FIXME: hardcode in v4 - marginInlineStart: 0, // FIXME: hardcode in v4 + marginBottom: token.marginXXS, + marginInlineStart: 0, lineHeight, }, }, [`&${componentCls}-small:not(${componentCls}-dot)`]: { [`${componentCls}-item`]: { '&-icon': { - marginInlineStart: 46, // FIXME: hardcode in v4 + marginInlineStart: token.controlHeightLG + (stepsIconSize - stepsSmallIconSize) / 2, }, }, }, diff --git a/components/steps/style/nav.ts b/components/steps/style/nav.ts index 4bb09dfcf5..98e7602346 100644 --- a/components/steps/style/nav.ts +++ b/components/steps/style/nav.ts @@ -1,6 +1,6 @@ import type { CSSObject } from '@ant-design/cssinjs'; -import type { GenerateStyle } from '../../_util/theme'; import type { StepsToken } from '.'; +import type { GenerateStyle } from '../../_util/theme'; const genStepsNavStyle: GenerateStyle = token => { const { @@ -13,12 +13,12 @@ const genStepsNavStyle: GenerateStyle = token => { return { [`&${componentCls}-navigation`]: { - paddingTop: 12, // FIXME: hardcode in v4 + paddingTop: token.paddingSM, [`&${componentCls}-small`]: { [`${componentCls}-item`]: { '&-container': { - marginInlineStart: -12, // FIXME: hardcode in v4 + marginInlineStart: -token.marginSM, }, }, }, @@ -29,9 +29,9 @@ const genStepsNavStyle: GenerateStyle = token => { '&-container': { display: 'inline-block', - height: '100%', // FIXME: hardcode in v4 - marginInlineStart: -16, // FIXME: hardcode in v4 - paddingBottom: 12, // FIXME: hardcode in v4 + height: '100%', + marginInlineStart: -token.margin, + paddingBottom: token.paddingSM, textAlign: 'start', transition: `opacity ${motionDurationSlow}`, @@ -40,8 +40,8 @@ const genStepsNavStyle: GenerateStyle = token => { }, [`${componentCls}-item-title`]: { - maxWidth: '100%', // FIXME: hardcode in v4 - paddingInlineEnd: 0, // FIXME: hardcode in v4 + maxWidth: '100%', + paddingInlineEnd: 0, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', @@ -57,7 +57,7 @@ const genStepsNavStyle: GenerateStyle = token => { cursor: 'pointer', '&:hover': { - opacity: 0.85, // FIXME: hardcode in v4 + opacity: 0.85, }, }, }, @@ -72,28 +72,26 @@ const genStepsNavStyle: GenerateStyle = token => { '&::after': { position: 'absolute', - top: '50%', + top: `calc(50% - ${token.paddingSM / 2}px)`, insetInlineStart: '100%', display: 'inline-block', - width: 12, // FIXME: hardcode in v4 - height: 12, // FIXME: hardcode in v4 - marginTop: -14, // FIXME: hardcode in v4 - marginInlineStart: -2, // FIXME: hardcode in v4 - borderTop: `1px solid ${stepsNavArrowColor}`, + width: token.fontSizeIcon, + height: token.fontSizeIcon, + borderTop: `${token.lineWidth}px ${token.lineType} ${stepsNavArrowColor}`, borderBottom: 'none', borderInlineStart: 'none', - borderInlineEnd: `1px solid ${stepsNavArrowColor}`, - transform: 'rotate(45deg)', + borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${stepsNavArrowColor}`, + transform: 'translateY(-50%) translateX(-50%) rotate(45deg)', content: '""', }, '&::before': { position: 'absolute', - bottom: 0, // FIXME: hardcode in v4 + bottom: 0, insetInlineStart: '50%', display: 'inline-block', - width: 0, // FIXME: hardcode in v4 - height: 2, // FIXME: hardcode in v4 + width: 0, + height: token.lineWidthBold, backgroundColor: stepsNavActiveColor, transition: `width ${motionDurationSlow}, inset-inline-start ${motionDurationSlow}`, transitionTimingFunction: 'ease-out', @@ -102,8 +100,8 @@ const genStepsNavStyle: GenerateStyle = token => { }, [`${componentCls}-item${componentCls}-item-active::before`]: { - insetInlineStart: 0, // FIXME: hardcode in v4 - width: '100%', // FIXME: hardcode in v4 + insetInlineStart: 0, + width: '100%', }, }, @@ -115,24 +113,23 @@ const genStepsNavStyle: GenerateStyle = token => { display: 'none', }, [`&${componentCls}-item-active::before`]: { - top: 0, // FIXME: hardcode in v4 - insetInlineEnd: 0, // FIXME: hardcode in v4 + top: 0, + insetInlineEnd: 0, insetInlineStart: 'unset', display: 'block', - width: 3, // FIXME: hardcode in v4 - height: 'calc(100% - 24px)', + width: token.lineWidth * 3, + height: `calc(100% - ${token.marginLG}px)`, }, '&::after': { position: 'relative', - top: -2, // FIXME: hardcode in v4 insetInlineStart: '50%', display: 'block', - width: 8, // FIXME: hardcode in v4 - height: 8, // FIXME: hardcode in v4 - marginBottom: 8, // FIXME: hardcode in v4 + width: token.controlHeight * 0.25, + height: token.controlHeight * 0.25, + marginBottom: token.marginXS, textAlign: 'center', - transform: 'rotate(135deg)', + transform: 'translateY(-50%) translateX(-50%) rotate(135deg)', }, [`> ${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 5136b77e36..124892681e 100644 --- a/components/steps/style/progress-dot.ts +++ b/components/steps/style/progress-dot.ts @@ -1,13 +1,11 @@ -import { TinyColor } from '@ctrl/tinycolor'; import type { CSSObject } from '@ant-design/cssinjs'; -import type { GenerateStyle } from '../../_util/theme'; import type { StepsToken } from '.'; +import type { GenerateStyle } from '../../_util/theme'; const genStepsProgressDotStyle: GenerateStyle = token => { const { componentCls, - stepsDotTop, - stepsDescriptionMaxWidth, + descriptionWidth, lineHeight, stepsCurrentDotSize, stepsDotSize, @@ -22,107 +20,112 @@ const genStepsProgressDotStyle: GenerateStyle = token => }, '&-tail': { - top: stepsDotTop, - width: '100%', // FIXME: hardcode in v4 - // margin: `0 0 0 ${stepsDescriptionMaxWidth / 2}px`, // FIXME: hardcode in v4 - marginTop: 0, // FIXME: hardcode in v4 - marginBottom: 0, // FIXME: hardcode in v4 - marginInline: `${stepsDescriptionMaxWidth / 2}px 0`, // FIXME: hardcode in v4 - padding: 0, // FIXME: hardcode in v4 + top: Math.floor((token.stepsDotSize - token.lineWidth * 3) / 2), + width: '100%', + marginTop: 0, + marginBottom: 0, + marginInline: `${descriptionWidth / 2}px 0`, + padding: 0, '&::after': { - width: 'calc(100% - 20px)', // FIXME: hardcode in v4 - height: 3, // FIXME: hardcode in v4 - marginInlineStart: 12, // FIXME: hardcode in v4 + width: `calc(100% - ${token.marginSM * 2}px)`, + height: token.lineWidth * 3, + marginInlineStart: token.marginSM, }, }, - [`&:first-child ${componentCls}-icon-dot`]: { - insetInlineStart: 2, // FIXME: hardcode in v4 - }, '&-icon': { width: stepsDotSize, height: stepsDotSize, - marginInlineStart: 67, // FIXME: hardcode in v4 - paddingInlineEnd: 0, // FIXME: hardcode in v4 + marginInlineStart: (token.descriptionWidth - stepsDotSize) / 2, + paddingInlineEnd: 0, lineHeight: `${stepsDotSize}px`, background: 'transparent', - border: 0, // FIXME: hardcode in v4 + border: 0, [`${componentCls}-icon-dot`]: { position: 'relative', float: 'left', - width: '100%', // FIXME: hardcode in v4 - height: '100%', // FIXME: hardcode in v4 - borderRadius: 100, // FIXME: hardcode in v4 + width: '100%', + height: '100%', + borderRadius: 100, // very large number transition: `all ${motionDurationSlow}`, /* expand hover area */ '&::after': { position: 'absolute', - top: -12, // FIXME: hardcode in v4 - insetInlineStart: -26, // FIXME: hardcode in v4 - width: 60, // FIXME: hardcode in v4 - height: 32, // FIXME: hardcode in v4 - background: new TinyColor('#000').setAlpha(0.001).toRgbString(), // FIXME: hardcode in v4 + top: -token.marginSM, + insetInlineStart: (stepsDotSize - token.controlHeightLG * 1.5) / 2, + width: token.controlHeightLG * 1.5, + height: token.controlHeight, + background: 'transparent', content: '""', }, }, }, '&-content': { - width: stepsDescriptionMaxWidth, + width: descriptionWidth, }, [`&-process ${componentCls}-item-icon`]: { position: 'relative', - top: -1, // FIXME: hardcode in v4 + top: (stepsDotSize - stepsCurrentDotSize) / 2, width: stepsCurrentDotSize, height: stepsCurrentDotSize, lineHeight: `${stepsCurrentDotSize}px`, background: 'none', + marginInlineStart: (token.descriptionWidth - stepsCurrentDotSize) / 2, }, [`&-process ${componentCls}-icon`]: { [`&:first-child ${componentCls}-icon-dot`]: { - insetInlineStart: 0, // FIXME: hardcode in v4 + insetInlineStart: 0, }, }, }, }, [`&${componentCls}-vertical${componentCls}-dot`]: { [`${componentCls}-item-icon`]: { - marginTop: 13, // FIXME: hardcode in v4 - marginInlineStart: 0, // FIXME: hardcode in v4 + marginTop: (token.controlHeight - stepsDotSize) / 2, + marginInlineStart: 0, background: 'none', }, + [`${componentCls}-item-process ${componentCls}-item-icon`]: { + marginTop: (token.controlHeight - stepsCurrentDotSize) / 2, + top: 0, + insetInlineStart: (stepsDotSize - stepsCurrentDotSize) / 2, + marginInlineStart: 0, + }, // https://github.com/ant-design/ant-design/issues/18354 [`${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: { - top: 6.5, // FIXME: hardcode in v4 - insetInlineStart: -9, // FIXME: hardcode in v4 - margin: 0, // FIXME: hardcode in v4 - padding: '22px 0 4px', // FIXME: hardcode in v4 + top: (token.controlHeight - stepsDotSize) / 2, + insetInlineStart: 0, + margin: 0, + padding: `${stepsDotSize + token.paddingXS}px 0 ${token.paddingXS}px`, + + '&::after': { + marginInlineStart: (stepsDotSize - token.lineWidth) / 2, + }, }, [`&${componentCls}-small`]: { [`${componentCls}-item-icon`]: { - marginTop: 10, // FIXME: hardcode in v4 + marginTop: (token.controlHeightSM - stepsDotSize) / 2, + }, + [`${componentCls}-item-process ${componentCls}-item-icon`]: { + marginTop: (token.controlHeightSM - stepsCurrentDotSize) / 2, }, [`${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: { - top: 3.5, // FIXME: hardcode in v4 + top: (token.controlHeightSM - stepsDotSize) / 2, }, }, [`${componentCls}-item:first-child ${componentCls}-icon-dot`]: { - insetInlineStart: 0, // FIXME: hardcode in v4 + insetInlineStart: 0, }, [`${componentCls}-item-content`]: { width: 'inherit', }, - [`${componentCls}-item-process ${componentCls}-item-container ${componentCls}-item-icon ${componentCls}-icon-dot`]: - { - top: -1, // FIXME: hardcode in v4 - insetInlineStart: -1, // FIXME: hardcode in v4 - }, }, }; }; diff --git a/components/steps/style/progress.ts b/components/steps/style/progress.ts index 2cb2b10282..2c2e36c8b8 100644 --- a/components/steps/style/progress.ts +++ b/components/steps/style/progress.ts @@ -1,6 +1,6 @@ import type { CSSObject } from '@ant-design/cssinjs'; -import type { GenerateStyle } from '../../_util/theme'; import type { StepsToken } from '.'; +import type { GenerateStyle } from '../../_util/theme'; const genStepsProgressStyle: GenerateStyle = token => { const { antCls, componentCls } = token; @@ -8,16 +8,16 @@ const genStepsProgressStyle: GenerateStyle = token => { return { [`&${componentCls}-with-progress`]: { [`${componentCls}-item`]: { - paddingTop: 4, // FIXME: hardcode in v4 + paddingTop: token.paddingXXS, [`${componentCls}-item-tail`]: { - top: '4px !important', // FIXME: hardcode in v4 + top: `${token.marginXXS}px !important`, }, }, [`&${componentCls}-horizontal ${componentCls}-item:first-child`]: { - paddingBottom: 4, // FIXME: hardcode in v4 - paddingInlineStart: 4, // FIXME: hardcode in v4 + paddingBottom: token.paddingXXS, + paddingInlineStart: token.paddingXXS, }, [`${componentCls}-item-icon`]: { @@ -25,10 +25,10 @@ const genStepsProgressStyle: GenerateStyle = token => { [`${antCls}-progress`]: { position: 'absolute', - top: -5, // FIXME: hardcode in v4 - insetInlineEnd: -5, // FIXME: hardcode in v4 - bottom: -5, // FIXME: hardcode in v4 - insetInlineStart: -5, // FIXME: hardcode in v4 + insetBlockStart: + (token.stepsIconSize - token.stepsProgressSize - token.lineWidth * 2) / 2, + insetInlineStart: + (token.stepsIconSize - token.stepsProgressSize - token.lineWidth * 2) / 2, }, }, }, diff --git a/components/steps/style/rtl.ts b/components/steps/style/rtl.ts index 97b28c9363..71aed740a3 100644 --- a/components/steps/style/rtl.ts +++ b/components/steps/style/rtl.ts @@ -1,6 +1,6 @@ import type { CSSObject } from '@ant-design/cssinjs'; -import type { GenerateStyle } from '../../_util/theme'; import type { StepsToken } from '.'; +import type { GenerateStyle } from '../../_util/theme'; const genStepsRTLStyle: GenerateStyle = token => { const { componentCls } = token; @@ -10,99 +10,18 @@ const genStepsRTLStyle: GenerateStyle = token => { direction: 'rtl', [`${componentCls}-item`]: { - // '&-icon': { - // marginInlineEnd: 0, - // marginInlineStart: 8, - // }, - // '&-tail': { - // insetInlineEnd: 0, - // insetInlineStart: 'auto', - // }, '&-subtitle': { - // marginInline: '0 8px', float: 'left', }, - // '&-title': { - // paddingInlineEnd: 0, - // paddingInlineStart: 16, - - // '&::after': { - // insetInlineEnd: '100%', - // insetInlineStart: 'auto', - // }, - // }, }, - // [`&${componentCls}-horizontal:not(${componentCls}-label-vertical)`]: { - // [`${componentCls}-item`]: { - // paddingInlineEnd: 16, - // paddingInlineStart: 0, - - // '&:first-child': { - // paddingInlineEnd: 0, - // }, - - // [`&:last-child ${componentCls}-item-title`]: { - // paddingInlineStart: 0, - // }, - // }, - // }, - - // custom-icon - // [`${componentCls}-item-custom`]: { - // [`${componentCls}-item-icon`]: { - // [`> ${componentCls}-icon`]: { - // insetInlineEnd: 0.5, - // insetInlineStart: 'auto', - // }, - // }, - // }, - // nav [`&${componentCls}-navigation`]: { - // [`&${componentCls}-small`]: { - // [`${componentCls}-item-container`]: { - // marginInlineEnd: -12, - // marginInlineStart: 0, - // }, - // }, - - // [`${componentCls}-item-container`]: { - // marginInlineEnd: -16, - // marginInlineStart: 0, - // textAlign: 'right', - - // [`${componentCls}-item-title`]: { - // paddingInlineStart: 0, - // }, - // }, - [`${componentCls}-item::after`]: { - // insetInlineEnd: '100%', - // insetInlineStart: 'auto', - // marginInlineEnd: -2, - // marginInlineStart: 0, transform: 'rotate(-45deg)', }, }, - // small - // [`&${componentCls}-small`]: { - // [`&${componentCls}-horizontal:not(${componentCls}-label-vertical) ${componentCls}-item`]: { - // paddingInlineEnd: 12, - // paddingInlineStart: 0, - - // '&:first-child': { - // paddingInlineEnd: 0, - // }, - // }, - - // [`${componentCls}-item-title`]: { - // paddingInlineEnd: 0, - // paddingInlineStart: 12, - // }, - // }, - // vertical [`&${componentCls}-vertical`]: { [`> ${componentCls}-item`]: { @@ -111,103 +30,17 @@ const genStepsRTLStyle: GenerateStyle = token => { }, [`${componentCls}-item-icon`]: { float: 'right', - // marginInlineEnd: 0, - // marginInlineStart: stepsVerticalIconWidth, }, - // [`${componentCls}-item-container > ${componentCls}-item-tail`]: { - // insetInlineEnd: stepsVerticalTailWidth, - // insetInlineStart: 'auto', - // }, }, - - // [`&${componentCls}-small`]: { - // [`${componentCls}-item-container > ${componentCls}-item-tail`]: { - // insetInlineEnd: stepsVerticalTailWidthSm, - // insetInlineStart: 'auto', - // }, - // }, }, - // label - // [`&${componentCls}-label-vertical`]: { - // [`${componentCls}-item-title`]: { - // paddingInlineStart: 0, - // }, - // }, - // progress-dot [`&${componentCls}-dot`]: { - // [`${componentCls}-item-tail, &${componentCls}-small ${componentCls}-item-tail`]: { - // margin: `0 ${stepsDescriptionMaxWidth / 2}px 0 0`, - // '&::after': { - // marginInlineEnd: 12, - // marginInlineStart: 0, - // }, - // }, - - // [`${componentCls}-item:first-child ${componentCls}-icon-dot`]: { - // insetInlineEnd: 2, - // insetInlineStart: 'auto', - // }, - - // [`&${componentCls}-small ${componentCls}-item:first-child ${componentCls}-icon-dot`]: { - // insetInlineEnd: 2, - // insetInlineStart: 'auto', - // }, - - // [`${componentCls}-item-icon, &${componentCls}-small ${componentCls}-item-icon`]: { - // marginInlineEnd: 67, - // marginInlineStart: 0, - // }, - [`${componentCls}-item-icon ${componentCls}-icon-dot, &${componentCls}-small ${componentCls}-item-icon ${componentCls}-icon-dot`]: { float: 'right', }, - - /* expand hover area */ - // [`${componentCls}-item-icon ${componentCls}-icon-dot::after, &${componentCls}-small ${componentCls}-item-icon ${componentCls}-icon-dot::after`]: - // { - // insetInlineEnd: -26, - // insetInlineStart: 'auto', - // }, }, - - // [`&${componentCls}-vertical${componentCls}-dot`]: { - // [`${componentCls}-item-icon`]: { - // marginInlineEnd: 0, - // marginInlineStart: 16, - // }, - // [`${componentCls}-item`]: { - // https://github.com/ant-design/ant-design/issues/18354 - // [`> ${componentCls}-item-container > ${componentCls}-item-tail`]: { - // insetInlineEnd: -9, - // insetInlineStart: 'auto', - // }, - // [`&:first-child ${componentCls}-icon-dot`]: { - // insetInlineEnd: 0, - // insetInlineStart: 'auto', - // }, - // }, - // [`${componentCls}-item-process`]: { - // [`${componentCls}-icon-dot`]: { - // insetInlineEnd: -2, - // insetInlineStart: 'auto', - // }, - // }, - // }, - - // RTL Steps with progress - // [`&${componentCls}-with-progress${componentCls}-horizontal${componentCls}-label-horizontal`]: - // { - // [`${componentCls}-item:first-child`]: { - // paddingInlineEnd: 4, - // paddingInlineStart: 0, - // }, - // [`${componentCls}-item:first-child${componentCls}-item-active`]: { - // paddingInlineEnd: 4, - // }, - // }, }, }; }; diff --git a/components/steps/style/small.ts b/components/steps/style/small.ts index d468ebd326..e245f7b90c 100644 --- a/components/steps/style/small.ts +++ b/components/steps/style/small.ts @@ -1,6 +1,6 @@ import type { CSSObject } from '@ant-design/cssinjs'; -import type { GenerateStyle } from '../../_util/theme'; import type { StepsToken } from '.'; +import type { GenerateStyle } from '../../_util/theme'; const genStepsSmallStyle: GenerateStyle = token => { const { @@ -15,9 +15,9 @@ const genStepsSmallStyle: GenerateStyle = token => { return { [`&${componentCls}-small`]: { [`&${componentCls}-horizontal:not(${componentCls}-label-vertical) ${componentCls}-item`]: { - paddingInlineStart: 12, // FIXME: hardcode in v4 + paddingInlineStart: token.paddingSM, '&:first-child': { - paddingInlineStart: 0, // FIXME: hardcode in v4 + paddingInlineStart: 0, }, }, @@ -25,21 +25,21 @@ const genStepsSmallStyle: GenerateStyle = token => { width: stepsSmallIconSize, height: stepsSmallIconSize, // margin: stepsSmallIconMargin, - marginTop: 0, // FIXME: hardcode in v4 - marginBottom: 0, // FIXME: hardcode in v4 - marginInline: '0 8px', // FIXME: hardcode in v4 + marginTop: 0, + marginBottom: 0, + marginInline: `0 ${token.marginXS}px`, fontSize: fontSizeSM, lineHeight: `${stepsSmallIconSize}px`, textAlign: 'center', borderRadius: stepsSmallIconSize, }, [`${componentCls}-item-title`]: { - paddingInlineEnd: 12, // FIXME: hardcode in v4 + paddingInlineEnd: token.paddingSM, fontSize: fontSizeBase, lineHeight: `${stepsSmallIconSize}px`, '&::after': { - top: stepsSmallIconSize / 2, // FIXME: hardcode in v4 + top: stepsSmallIconSize / 2, }, }, [`${componentCls}-item-description`]: { @@ -47,15 +47,15 @@ const genStepsSmallStyle: GenerateStyle = token => { fontSize: fontSizeBase, }, [`${componentCls}-item-tail`]: { - top: 8, // FIXME: hardcode in v4 + top: token.marginXS, }, [`${componentCls}-item-custom ${componentCls}-item-icon`]: { width: 'inherit', height: 'inherit', lineHeight: 'inherit', background: 'none', - border: 0, // FIXME: hardcode in v4 - borderRadius: 0, // FIXME: hardcode in v4 + border: 0, + borderRadius: 0, [`> ${componentCls}-icon`]: { fontSize: stepsSmallIconSize, lineHeight: `${stepsSmallIconSize}px`, diff --git a/components/steps/style/vertical.ts b/components/steps/style/vertical.ts index 38d6d83b13..61501ce158 100644 --- a/components/steps/style/vertical.ts +++ b/components/steps/style/vertical.ts @@ -1,16 +1,9 @@ import type { CSSObject } from '@ant-design/cssinjs'; -import type { GenerateStyle } from '../../_util/theme'; import type { StepsToken } from '.'; +import type { GenerateStyle } from '../../_util/theme'; const genStepsVerticalStyle: GenerateStyle = token => { - const { - componentCls, - stepsSmallIconSize, - stepsVerticalIconWidth, - stepsVerticalTailWidth, - stepsVerticalTailWidthSm, - stepsIconSize, - } = token; + const { componentCls, stepsSmallIconSize, stepsIconSize } = token; return { [`&${componentCls}-vertical`]: { @@ -20,36 +13,36 @@ const genStepsVerticalStyle: GenerateStyle = token => { [`> ${componentCls}-item`]: { display: 'block', flex: '1 0 auto', - paddingInlineStart: 0, // FIXME: hardcode in v4 + paddingInlineStart: 0, overflow: 'visible', [`${componentCls}-item-icon`]: { float: 'left', - marginInlineEnd: stepsVerticalIconWidth, + marginInlineEnd: token.margin, }, [`${componentCls}-item-content`]: { display: 'block', - minHeight: 48, // FIXME: hardcode in v4 + minHeight: token.controlHeight * 1.5, overflow: 'hidden', }, [`${componentCls}-item-title`]: { lineHeight: `${stepsIconSize}px`, }, [`${componentCls}-item-description`]: { - paddingBottom: 12, // FIXME: hardcode in v4 + paddingBottom: token.paddingSM, }, }, [`> ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: { position: 'absolute', - top: 0, // FIXME: hardcode in v4 - insetInlineStart: stepsVerticalTailWidth, - width: 1, // FIXME: hardcode in v4 - height: '100%', // FIXME: hardcode in v4 - padding: `${stepsIconSize + 6}px 0 6px`, // FIXME: hardcode in v4 + top: 0, + insetInlineStart: token.margin, + width: token.lineWidth, + height: '100%', + padding: `${stepsIconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`, '&::after': { - width: 1, // FIXME: hardcode in v4 - height: '100%', // FIXME: hardcode in v4 + width: token.lineWidth, + height: '100%', }, }, [`> ${componentCls}-item:not(:last-child) > ${componentCls}-item-container > ${componentCls}-item-tail`]: @@ -65,9 +58,9 @@ const genStepsVerticalStyle: GenerateStyle = token => { [`&${componentCls}-small ${componentCls}-item-container`]: { [`${componentCls}-item-tail`]: { position: 'absolute', - top: 0, // FIXME: hardcode in v4 - insetInlineStart: stepsVerticalTailWidthSm, - padding: `${stepsSmallIconSize + 6}px 0 6px`, // FIXME: hardcode in v4 + top: 0, + insetInlineStart: token.marginSM, + padding: `${stepsSmallIconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`, }, [`${componentCls}-item-title`]: { lineHeight: `${stepsSmallIconSize}px`,