refactor(Progress): enhance size prop and add variants

components/progress/Circle.tsx

@@ -1,13 +1,21 @@
 import type { CSSProperties } from 'vue';
 import { computed, defineComponent } from 'vue';
 import { Circle as VCCircle } from '../vc-progress';
-import { getPercentage, getStrokeColor } from './utils';
-import type { ProgressProps } from './props';
+import { getPercentage, getSize, getStrokeColor } from './utils';
+import type { ProgressProps, ProgressGradient } from './props';
 import { progressProps } from './props';
 import { initDefaultProps } from '../_util/props-util';
 import Tooltip from '../tooltip';
+import { anyType } from '../_util/type';
 
-export type CircleProps = ProgressProps;
+export interface CircleProps extends ProgressProps {
+  strokeColor?: string | ProgressGradient;
+}
+
+export const circleProps = () => ({
+  ...progressProps(),
+  strokeColor: anyType<string | ProgressGradient>(),
+});
 
 const CIRCLE_MIN_STROKE_WIDTH = 3;
 
@@ -17,11 +25,14 @@ export default defineComponent({
   compatConfig: { MODE: 3 },
   name: 'Circle',
   inheritAttrs: false,
-  props: initDefaultProps(progressProps(), {
-    width: 120,
+  props: initDefaultProps(circleProps(), {
     trailColor: null as unknown as string,
   }),
   setup(props, { slots }) {
+    const originWidth = computed(() => props.width || 120);
+    const mergedSize = computed(() => props.size ?? [originWidth.value, originWidth.value]);
+
+    const sizeRef = computed(() => getSize(mergedSize.value as ProgressProps['size'], 'circle'));
     const gapDeg = computed(() => {
       // Support gapDeg = 0 when type = 'dashboard'
       if (props.gapDegree || props.gapDegree === 0) {
@@ -34,16 +45,15 @@ export default defineComponent({
     });
 
     const circleStyle = computed<CSSProperties>(() => {
-      const circleSize = props.width;
       return {
-        width: typeof circleSize === 'number' ? `${circleSize}px` : circleSize,
-        height: typeof circleSize === 'number' ? `${circleSize}px` : circleSize,
-        fontSize: `${circleSize * 0.15 + 6}px`,
+        width: `${sizeRef.value.width}px`,
+        height: `${sizeRef.value.height}px`,
+        fontSize: `${sizeRef.value.width * 0.15 + 6}px`,
       };
     });
 
     const circleWidth = computed(
-      () => props.strokeWidth ?? Math.max(getMinPercent(props.width), 6),
+      () => props.strokeWidth ?? Math.max(getMinPercent(sizeRef.value.width), 6),
     );
     const gapPos = computed(
       () => props.gapPosition || (props.type === 'dashboard' && 'bottom') || undefined,
@@ -78,8 +88,10 @@ export default defineComponent({
       );
       return (
         <div class={wrapperClassName.value} style={circleStyle.value}>
-          {props.width <= 20 ? (
-            <Tooltip v-slots={{ title: slots.default }}>{circleContent}</Tooltip>
+          {sizeRef.value.width <= 20 ? (
+            <Tooltip v-slots={{ title: slots.default }}>
+              <span>{circleContent}</span>
+            </Tooltip>
           ) : (
             <>
               {circleContent}

components/progress/Line.tsx

@@ -2,13 +2,15 @@ import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
 import { presetPrimaryColors } from '@ant-design/colors';
 import { computed, defineComponent } from 'vue';
 import type { Direction } from '../config-provider';
-import type { StringGradients, ProgressGradient } from './props';
+import type { StringGradients, ProgressGradient, ProgressSize } from './props';
 import { progressProps } from './props';
-import { getSuccessPercent, validProgress } from './utils';
+import { getSize, getSuccessPercent, validProgress } from './utils';
+import devWarning from '../vc-util/devWarning';
+import { anyType } from '../_util/type';
 
 export const lineProps = () => ({
   ...progressProps(),
-  prefixCls: String,
+  strokeColor: anyType<string | ProgressGradient>(),
   direction: {
     type: String as PropType<Direction>,
   },
@@ -84,6 +86,8 @@ export default defineComponent({
             backgroundColor: strokeColor as string,
           };
     });
+    const borderRadius =
+      props.strokeLinecap === 'square' || props.strokeLinecap === 'butt' ? 0 : undefined;
 
     const trailStyle = computed<CSSProperties>(() =>
       props.trailColor
@@ -93,32 +97,53 @@ export default defineComponent({
         : undefined,
     );
 
+    const mergedSize = computed(
+      () => props.size ?? [-1, props.strokeWidth || (props.size === 'small' ? 6 : 8)],
+    );
+
+    const sizeRef = computed(() =>
+      getSize(mergedSize.value as ProgressSize, 'line', { strokeWidth: props.strokeWidth }),
+    );
+
+    if (process.env.NODE_ENV !== 'production') {
+      devWarning(
+        'strokeWidth' in props,
+        'Progress',
+        '`strokeWidth` is deprecated. Please use `size` instead.',
+      );
+    }
+
     const percentStyle = computed<CSSProperties>(() => {
-      const { percent, strokeWidth, strokeLinecap, size } = props;
+      const { percent } = props;
       return {
         width: `${validProgress(percent)}%`,
-        height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`,
-        borderRadius: strokeLinecap === 'square' ? 0 : undefined,
-        ...(backgroundProps.value as any),
+        height: `${sizeRef.value.height}px`,
+        borderRadius,
+        ...backgroundProps.value,
       };
     });
 
     const successPercent = computed(() => {
       return getSuccessPercent(props);
     });
     const successPercentStyle = computed<CSSProperties>(() => {
-      const { strokeWidth, size, strokeLinecap, success } = props;
+      const { success } = props;
       return {
         width: `${validProgress(successPercent.value)}%`,
-        height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`,
-        borderRadius: strokeLinecap === 'square' ? 0 : undefined,
+        height: `${sizeRef.value.height}px`,
+        borderRadius,
         backgroundColor: success?.strokeColor,
       };
     });
 
+    const outerStyle: CSSProperties = {
+      width: sizeRef.value.width < 0 ? '100%' : sizeRef.value.width,
+      height: `${sizeRef.value.height}px`,
+    };
+
     return () => (
       <>
-        <div {...attrs} class={[`${props.prefixCls}-outer`, attrs.class]}>
+        <div {...attrs} class={[`${props.prefixCls}-outer`, attrs.class]} style={outerStyle}>
           <div class={`${props.prefixCls}-inner`} style={trailStyle.value}>
             <div class={`${props.prefixCls}-bg`} style={percentStyle.value} />
             {successPercent.value !== undefined ? (

components/progress/Steps.tsx

@@ -1,34 +1,45 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import { computed, defineComponent } from 'vue';
 import type { VueNode } from '../_util/type';
+import PropTypes from '../_util/vue-types';
 import type { ProgressSize } from './props';
 import { progressProps } from './props';
+import { getSize } from './utils';
 
 export const stepsProps = () => ({
   ...progressProps(),
   steps: Number,
   size: {
     type: String as PropType<ProgressSize>,
   },
-  strokeColor: String,
+  strokeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   trailColor: String,
 });
 
-export type StepsProps = Partial<ExtractPropTypes<typeof stepsProps>>;
+export type StepsProps = Partial<ExtractPropTypes<ReturnType<typeof stepsProps>>>;
 
 export default defineComponent({
   compatConfig: { MODE: 3 },
   name: 'Steps',
   props: stepsProps(),
   setup(props, { slots }) {
     const current = computed(() => Math.round(props.steps * ((props.percent || 0) / 100)));
-    const stepWidth = computed(() => (props.size === 'small' ? 2 : 14));
+    const mergedSize = computed(
+      () => props.size ?? [props.size === 'small' ? 2 : 14, props.strokeWidth || 8],
+    );
+    const sizeRef = computed(() =>
+      getSize(mergedSize.value as ProgressSize, 'step', {
+        steps: props.steps,
+        strokeWidth: props.strokeWidth || 8,
+      }),
+    );
 
     const styledSteps = computed(() => {
-      const { steps, strokeWidth = 8, strokeColor, trailColor, prefixCls } = props;
+      const { steps, strokeColor, trailColor, prefixCls } = props;
 
       const temp: VueNode[] = [];
       for (let i = 0; i < steps; i += 1) {
+        const color = Array.isArray(strokeColor) ? strokeColor[i] : strokeColor;
         const cls = {
           [`${prefixCls}-steps-item`]: true,
           [`${prefixCls}-steps-item-active`]: i <= current.value - 1,
@@ -38,9 +49,9 @@ export default defineComponent({
             key={i}
             class={cls}
             style={{
-              backgroundColor: i <= current.value - 1 ? strokeColor : trailColor,
-              width: `${stepWidth.value}px`,
-              height: `${strokeWidth}px`,
+              backgroundColor: i <= current.value - 1 ? color : trailColor,
+              width: `${sizeRef.value.width / steps}px`,
+              height: `${sizeRef.value.height}px`,
             }}
           />,
         );