refactor: steps support css var (ant-design#45878)

* feat: steps support cssVars * fix: fix style * Update check-cssinjs.tsx * fix: fix bug * style: code format * fix: fix bug * refactor: wireframe & tailTop * wip: fix taiTop * fix: remove tailTop and use token calc top fix: remove tailTop and use token calc top perf: add annotation --------- Signed-off-by: lijianan <[email protected]> Co-authored-by: lijianan <[email protected]>
wanghui2021 · Nov 17, 2023 · 3871763 · 3871763
1 parent 88a13b1
commit 3871763
Show file tree

Hide file tree

Showing 12 changed files with 181 additions and 120 deletions.
diff --git a/components/steps/index.tsx b/components/steps/index.tsx
@@ -14,6 +14,7 @@ import useBreakpoint from '../grid/hooks/useBreakpoint';
 import Progress from '../progress';
 import Tooltip from '../tooltip';
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
 import useLegacyItems from './useLegacyItems';
 
 export interface StepProps {
@@ -79,7 +80,8 @@ const Steps: CompoundedComponent = (props) => {
 
   const prefixCls = getPrefixCls('steps', props.prefixCls);
 
-  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const [, hashId] = useStyle(prefixCls);
+  const wrapCSSVar = useCSSVar(prefixCls);
 
   const isInline = props.type === 'inline';
   const iconPrefix = getPrefixCls('', props.iconPrefix);
@@ -127,7 +129,7 @@ const Steps: CompoundedComponent = (props) => {
   const itemRender = (item: StepProps, stepItem: React.ReactNode) =>
     item.description ? <Tooltip title={item.description}>{stepItem}</Tooltip> : stepItem;
 
-  return wrapSSR(
+  return wrapCSSVar(
     <RcSteps
       icons={icons}
       {...restProps}

diff --git a/components/steps/style/cssVar.ts b/components/steps/style/cssVar.ts
@@ -0,0 +1,4 @@
+import { genCSSVarRegister } from '../../theme/internal';
+import { prepareComponentToken } from '.';
+
+export default genCSSVarRegister('Steps', prepareComponentToken);
diff --git a/components/steps/style/custom-icon.ts b/components/steps/style/custom-icon.ts
@@ -1,5 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { StepsToken } from '.';
+import { unit } from '@ant-design/cssinjs';
 import type { GenerateStyle } from '../../theme/internal';
 
 const genStepsCustomIconStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
@@ -16,7 +17,7 @@ const genStepsCustomIconStyle: GenerateStyle<StepsToken, CSSObject> = (token) =>
           width: customIconSize,
           height: customIconSize,
           fontSize: customIconFontSize,
-          lineHeight: `${customIconFontSize}px`,
+          lineHeight: `${unit(customIconFontSize)}`,
         },
       },
     },

diff --git a/components/steps/style/index.tsx b/components/steps/style/index.tsx
@@ -1,7 +1,7 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
 import type { CSSProperties } from 'react';
 import { genFocusOutline, resetComponent } from '../../style';
-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 genStepsInlineStyle from './inline';
@@ -79,6 +79,26 @@ export interface ComponentToken {
    * @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'> {
@@ -91,19 +111,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;
@@ -210,10 +225,10 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
       marginInlineEnd: token.marginXS,
       fontSize: token.iconFontSize,
       fontFamily: token.fontFamily,
-      lineHeight: `${token.iconSize}px`,
+      lineHeight: `${unit(token.iconSize)}`,
       textAlign: 'center',
       borderRadius: token.iconSize,
-      border: `${token.lineWidth}px ${token.lineType} transparent`,
+      border: `${unit(token.lineWidth)} ${token.lineType} transparent`,
       transition: `background-color ${motionDurationSlow}, border-color ${motionDurationSlow}`,
       [`${componentCls}-icon`]: {
         position: 'relative',
@@ -224,7 +239,7 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
     },
     [`${stepsItemCls}-tail`]: {
       position: 'absolute',
-      top: token.iconSize / 2 - token.paddingXXS,
+      top: token.calc(token.iconSize).div(2).sub(token.paddingXXS).equal(),
       insetInlineStart: 0,
       width: '100%',
 
@@ -244,11 +259,11 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
       paddingInlineEnd: token.padding,
       color: token.colorText,
       fontSize: token.fontSizeLG,
-      lineHeight: `${token.titleLineHeight}px`,
+      lineHeight: `${unit(token.titleLineHeight)}`,
 
       '&::after': {
         position: 'absolute',
-        top: token.titleLineHeight / 2,
+        top: token.calc(token.titleLineHeight).div(2).equal(),
         insetInlineStart: '100%',
         display: 'block',
         width: 9999,
@@ -383,23 +398,39 @@ const genStepsStyle: GenerateStyle<StepsToken, CSSObject> = (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,
       controlHeightLG,
       colorTextLightSolid,
       colorText,
       colorPrimary,
-      colorTextLabel,
       colorTextDescription,
       colorTextQuaternary,
-      colorFillContent,
-      controlItemBgActive,
       colorError,
-      colorBgContainer,
       colorBorderSecondary,
       colorSplit,
     } = token;
@@ -413,19 +444,14 @@ export default genComponentStyleHook(
       processIconBorderColor: colorPrimary,
       processDotColor: colorPrimary,
       processTailColor: colorSplit,
-      waitIconColor: wireframe ? colorTextDisabled : colorTextLabel,
       waitTitleColor: colorTextDescription,
       waitDescriptionColor: colorTextDescription,
       waitTailColor: colorSplit,
-      waitIconBgColor: wireframe ? colorBgContainer : colorFillContent,
-      waitIconBorderColor: wireframe ? colorTextDisabled : 'transparent',
       waitDotColor: colorTextDisabled,
       finishIconColor: colorPrimary,
       finishTitleColor: colorText,
       finishDescriptionColor: colorTextDescription,
       finishTailColor: colorPrimary,
-      finishIconBgColor: wireframe ? colorBgContainer : controlItemBgActive,
-      finishIconBorderColor: wireframe ? colorPrimary : controlItemBgActive,
       finishDotColor: colorPrimary,
       errorIconColor: colorTextLightSolid,
       errorTitleColor: colorError,
@@ -444,29 +470,5 @@ export default genComponentStyleHook(
 
     return [genStepsStyle(stepsToken)];
   },
-  (token) => {
-    const {
-      colorTextDisabled,
-      fontSize,
-      controlHeightSM,
-      controlHeight,
-      controlHeightLG,
-      fontSizeHeading3,
-    } = token;
-    return {
-      titleLineHeight: controlHeight,
-      customIconSize: controlHeight,
-      customIconTop: 0,
-      customIconFontSize: controlHeightSM,
-      iconSize: controlHeight,
-      iconTop: -0.5, // magic for ui experience
-      iconFontSize: fontSize,
-      iconSizeSM: fontSizeHeading3,
-      dotSize: controlHeight / 4,
-      dotCurrentSize: controlHeightLG / 4,
-      navArrowColor: colorTextDisabled,
-      navContentMaxWidth: 'auto',
-      descriptionMaxWidth: 140,
-    };
-  },
+  prepareComponentToken,
 );
diff --git a/components/steps/style/inline.ts b/components/steps/style/inline.ts
@@ -1,10 +1,10 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
 import type { StepsToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';
 
 const genStepsInlineStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
   const { componentCls, inlineDotSize, inlineTitleColor, inlineTailColor } = token;
-  const containerPaddingTop = token.paddingXS + token.lineWidth;
+  const containerPaddingTop = token.calc(token.paddingXS).add(token.lineWidth).equal();
   const titleStyle = {
     [`${componentCls}-item-container ${componentCls}-item-content ${componentCls}-item-title`]: {
       color: inlineTitleColor,
@@ -20,8 +20,8 @@ const genStepsInlineStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
         flex: 'none',
 
         '&-container': {
-          padding: `${containerPaddingTop}px ${token.paddingXXS}px 0`,
-          margin: `0 ${token.marginXXS / 2}px`,
+          padding: `${unit(containerPaddingTop)} ${unit(token.paddingXXS)} 0`,
+          margin: `0 ${unit(token.calc(token.marginXXS).div(2).equal())}`,
           borderRadius: token.borderRadiusSM,
           cursor: 'pointer',
           transition: `background-color ${token.motionDurationMid}`,
@@ -36,33 +36,33 @@ const genStepsInlineStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
         '&-icon': {
           width: inlineDotSize,
           height: inlineDotSize,
-          marginInlineStart: `calc(50% - ${inlineDotSize / 2}px)`,
+          marginInlineStart: `calc(50% - ${unit(token.calc(inlineDotSize).div(2).equal())})`,
           [`> ${componentCls}-icon`]: {
             top: 0,
           },
           [`${componentCls}-icon-dot`]: {
-            borderRadius: token.fontSizeSM / 4,
+            borderRadius: token.calc(token.fontSizeSM).div(4).equal(),
           },
         },
 
         '&-content': {
           width: 'auto',
-          marginTop: token.marginXS - token.lineWidth,
+          marginTop: token.calc(token.marginXS).sub(token.lineWidth).equal(),
         },
         '&-title': {
           color: inlineTitleColor,
           fontSize: token.fontSizeSM,
           lineHeight: token.lineHeightSM,
           fontWeight: 'normal',
-          marginBottom: token.marginXXS / 2,
+          marginBottom: token.calc(token.marginXXS).div(2).equal(),
         },
         '&-description': {
           display: 'none',
         },
 
         '&-tail': {
           marginInlineStart: 0,
-          top: containerPaddingTop + inlineDotSize / 2,
+          top: token.calc(inlineDotSize).div(2).add(containerPaddingTop).equal(),
           transform: `translateY(-50%)`,
           '&:after': {
             width: '100%',
@@ -85,7 +85,7 @@ const genStepsInlineStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
         '&-wait': {
           [`${componentCls}-item-icon ${componentCls}-icon ${componentCls}-icon-dot`]: {
             backgroundColor: token.colorBorderBg,
-            border: `${token.lineWidth}px ${token.lineType} ${inlineTailColor}`,
+            border: `${unit(token.lineWidth)} ${token.lineType} ${inlineTailColor}`,
           },
           ...titleStyle,
         },
@@ -95,7 +95,7 @@ const genStepsInlineStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
           },
           [`${componentCls}-item-icon ${componentCls}-icon ${componentCls}-icon-dot`]: {
             backgroundColor: inlineTailColor,
-            border: `${token.lineWidth}px ${token.lineType} ${inlineTailColor}`,
+            border: `${unit(token.lineWidth)} ${token.lineType} ${inlineTailColor}`,
           },
           ...titleStyle,
         },
@@ -104,7 +104,7 @@ const genStepsInlineStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
           [`${componentCls}-item-icon`]: {
             width: inlineDotSize,
             height: inlineDotSize,
-            marginInlineStart: `calc(50% - ${inlineDotSize / 2}px)`,
+            marginInlineStart: `calc(50% - ${unit(token.calc(inlineDotSize).div(2).equal())})`,
             top: 0,
           },
           ...titleStyle,

diff --git a/components/steps/style/label-placement.ts b/components/steps/style/label-placement.ts
@@ -1,4 +1,4 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
 import type { StepsToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';
 
@@ -11,13 +11,13 @@ const genStepsLabelPlacementStyle: GenerateStyle<StepsToken, CSSObject> = (token
         overflow: 'visible',
 
         '&-tail': {
-          marginInlineStart: iconSize / 2 + token.controlHeightLG,
-          padding: `${token.paddingXXS}px ${token.paddingLG}px`,
+          marginInlineStart: token.calc(iconSize).div(2).add(token.controlHeightLG).equal(),
+          padding: `${unit(token.paddingXXS)} ${unit(token.paddingLG)}`,
         },
 
         '&-content': {
           display: 'block',
-          width: (iconSize / 2 + token.controlHeightLG) * 2,
+          width: token.calc(iconSize).div(2).add(token.controlHeightLG).mul(2).equal(),
           marginTop: token.marginSM,
           textAlign: 'center',
         },
@@ -46,7 +46,12 @@ const genStepsLabelPlacementStyle: GenerateStyle<StepsToken, CSSObject> = (token
       [`&${componentCls}-small:not(${componentCls}-dot)`]: {
         [`${componentCls}-item`]: {
           '&-icon': {
-            marginInlineStart: token.controlHeightLG + (iconSize - iconSizeSM) / 2,
+            marginInlineStart: token
+              .calc(iconSize)
+              .sub(iconSizeSM)
+              .div(2)
+              .add(token.controlHeightLG)
+              .equal(),
           },
         },
       },