refactor:steps (#6264)

* refactor:steps

* fix ...attrs

* fix StepsToken error

* docs:update & refactor: steps type

Author: shifeng1993

components/steps/demo/progress.vue

@@ -22,4 +22,9 @@ Steps with progress.
     <a-step title="In Progress" sub-title="Left 00:00:08" description="This is a description." />
     <a-step title="Waiting" description="This is a description." />
   </a-steps>
+  <a-steps :percent="60" :current="1" size="small">
+    <a-step title="Finished" description="This is a description." />
+    <a-step title="In Progress" sub-title="Left 00:00:08" description="This is a description." />
+    <a-step title="Waiting" description="This is a description." />
+  </a-steps>
 </template>

components/steps/index.en-US.md

@@ -3,7 +3,7 @@ category: Components
 type: Navigation
 cols: 1
 title: Steps
-cover: https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*677sTqCpE3wAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 `Steps` is a navigation bar that guides users through the steps of a task.

components/steps/index.tsx

@@ -1,4 +1,4 @@
-import type { App, ExtractPropTypes, PropType } from 'vue';
+import type { App, ExtractPropTypes } from 'vue';
 import { computed, defineComponent } from 'vue';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import CheckOutlined from '@ant-design/icons-vue/CheckOutlined';
@@ -13,35 +13,40 @@ import omit from '../_util/omit';
 import { VcStepProps } from '../vc-steps/Step';
 import type { ProgressDotRender } from '../vc-steps/Steps';
 import type { MouseEventHandler } from '../_util/EventInterface';
+import { booleanType, stringType, functionType, someType } from '../_util/type';
+
+// CSSINJS
+import useStyle from './style';
+import { useToken } from '../theme/internal';
 
 export const stepsProps = () => ({
   prefixCls: String,
   iconPrefix: String,
   current: Number,
   initial: Number,
   percent: Number,
-  responsive: { type: Boolean, default: undefined },
-  labelPlacement: String as PropType<'horizontal' | 'vertical'>,
-  status: String as PropType<'wait' | 'process' | 'finish' | 'error'>,
-  size: String as PropType<'default' | 'small'>,
-  direction: String as PropType<'horizontal' | 'vertical'>,
-  progressDot: {
-    type: [Boolean, Function] as PropType<boolean | ProgressDotRender>,
-    default: undefined as boolean | ProgressDotRender,
-  },
-  type: String as PropType<'default' | 'navigation'>,
-  onChange: Function as PropType<(current: number) => void>,
-  'onUpdate:current': Function as PropType<(current: number) => void>,
+  responsive: booleanType(),
+  labelPlacement: stringType<'horizontal' | 'vertical'>(),
+  status: stringType<'wait' | 'process' | 'finish' | 'error'>(),
+  size: stringType<'default' | 'small'>(),
+  direction: stringType<'horizontal' | 'vertical'>(),
+  progressDot: someType<boolean | ProgressDotRender>(
+    [Boolean, Function],
+    undefined as boolean | ProgressDotRender,
+  ),
+  type: stringType<'default' | 'navigation'>(),
+  onChange: functionType<(current: number) => void>(),
+  'onUpdate:current': functionType<(current: number) => void>(),
 });
 
 export const stepProps = () => ({
   description: PropTypes.any,
   icon: PropTypes.any,
-  status: String as PropType<'wait' | 'process' | 'finish' | 'error'>,
-  disabled: { type: Boolean, default: undefined },
+  status: stringType<'wait' | 'process' | 'finish' | 'error'>(),
+  disabled: booleanType(),
   title: PropTypes.any,
   subTitle: PropTypes.any,
-  onClick: Function as PropType<MouseEventHandler>,
+  onClick: functionType<MouseEventHandler>(),
 });
 
 export type StepsProps = Partial<ExtractPropTypes<ReturnType<typeof stepsProps>>>;
@@ -61,6 +66,13 @@ const Steps = defineComponent({
   // emits: ['update:current', 'change'],
   setup(props, { attrs, slots, emit }) {
     const { prefixCls, direction: rtlDirection, configProvider } = useConfigInject('steps', props);
+
+    // 接入换肤
+    const [, token] = useToken();
+
+    // style
+    const [wrapSSR, hashId] = useStyle(prefixCls);
+
     const screens = useBreakpoint();
     const direction = computed(() =>
       props.responsive && screens.value.xs ? 'vertical' : props.direction,
@@ -84,11 +96,12 @@ const Steps = defineComponent({
         // currently it's hard-coded, since we can't easily read the actually width of icon
         const progressWidth = props.size === 'small' ? 32 : 40;
         const iconWithProgress = (
-          <div class={`${prefixCls}-progress-icon`}>
+          <div class={`${prefixCls.value}-progress-icon`}>
             <Progress
               type="circle"
               percent={props.percent}
               width={progressWidth}
+              strokeColor={token.value.colorPrimary}
               strokeWidth={4}
               format={() => null}
             />
@@ -106,22 +119,24 @@ const Steps = defineComponent({
           [`${prefixCls.value}-with-progress`]: props.percent !== undefined,
         },
         attrs.class,
+        hashId.value,
       );
       const icons = {
         finish: <CheckOutlined class={`${prefixCls}-finish-icon`} />,
         error: <CloseOutlined class={`${prefixCls}-error-icon`} />,
       };
-      return (
+      return wrapSSR(
         <VcSteps
           icons={icons}
+          {...attrs}
           {...omit(props, ['percent', 'responsive'])}
           direction={direction.value}
           prefixCls={prefixCls.value}
           iconPrefix={iconPrefix.value}
           class={stepsClassName}
           onChange={handleChange}
           v-slots={{ ...slots, stepIcon: stepIconRender }}
-        />
+        />,
       );
     };
   },

components/steps/index.zh-CN.md

@@ -4,7 +4,7 @@ subtitle: 步骤条
 type: 导航
 cols: 1
 title: Steps
-cover: https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*677sTqCpE3wAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 引导用户按照流程完成任务的导航条。

components/steps/style/custom-icon.less

@@ -0,0 +1,36 @@
+import type { CSSObject } from '../../_util/cssinjs';
+import type { StepsToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+
+const genStepsCustomIconStyle: GenerateStyle<StepsToken, CSSObject> = token => {
+  const { componentCls, stepsIconCustomTop, stepsIconCustomSize, stepsIconCustomFontSize } = token;
+
+  return {
+    [`${componentCls}-item-custom`]: {
+      [`> ${componentCls}-item-container > ${componentCls}-item-icon`]: {
+        height: 'auto',
+        background: 'none',
+        border: 0,
+        [`> ${componentCls}-icon`]: {
+          top: stepsIconCustomTop,
+          width: stepsIconCustomSize,
+          height: stepsIconCustomSize,
+          fontSize: stepsIconCustomFontSize,
+          lineHeight: `${stepsIconCustomSize}px`,
+        },
+      },
+    },
+
+    // Only adjust horizontal customize icon width
+    [`&:not(${componentCls}-vertical)`]: {
+      [`${componentCls}-item-custom`]: {
+        [`${componentCls}-item-icon`]: {
+          width: 'auto',
+          background: 'none',
+        },
+      },
+    },
+  };
+};
+
+export default genStepsCustomIconStyle;