refactor(progress): progress size (ant-design#40903)

* feat: progress size * feat: update snapshots * feat: update demo * feat: update demo * docs: fix lint * feat: update demo * feat: update demo * docs: update doc * feat: update snapshots * docs: update doc * docs: update doc * docs: update doc * Update components/progress/index.en-US.md Co-authored-by: lijianan <[email protected]> * Update components/progress/index.zh-CN.md Co-authored-by: lijianan <[email protected]> * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * Update components/progress/utils.ts Co-authored-by: MadCcc <[email protected]> * feat: optimize code * feat: optimize code * feat: optimize code * Update components/progress/Circle.tsx Co-authored-by: MadCcc <[email protected]> * feat: optimize code * feat: optimize code * docs: update doc --------- Co-authored-by: 二货机器人 <[email protected]> Co-authored-by: lijianan <[email protected]> Co-authored-by: MadCcc <[email protected]>
RedJue · Apr 4, 2023 · 7ff6b50 · 7ff6b50
1 parent de0b52f
commit 7ff6b50
Show file tree

Hide file tree

Showing 19 changed files with 1,603 additions and 162 deletions.
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
@@ -21705,6 +21705,7 @@ exports[`ConfigProvider components Progress configProvider 1`] = `
 >
   <div
     class="config-progress-outer"
+    style="width: 100%; height: 8px;"
   >
     <div
       class="config-progress-inner"
@@ -21731,6 +21732,7 @@ exports[`ConfigProvider components Progress configProvider componentDisabled 1`]
 >
   <div
     class="config-progress-outer"
+    style="width: 100%; height: 8px;"
   >
     <div
       class="config-progress-inner"
@@ -21757,6 +21759,7 @@ exports[`ConfigProvider components Progress configProvider componentSize large 1
 >
   <div
     class="config-progress-outer"
+    style="width: 100%; height: 8px;"
   >
     <div
       class="config-progress-inner"
@@ -21783,6 +21786,7 @@ exports[`ConfigProvider components Progress configProvider componentSize middle
 >
   <div
     class="config-progress-outer"
+    style="width: 100%; height: 8px;"
   >
     <div
       class="config-progress-inner"
@@ -21809,6 +21813,7 @@ exports[`ConfigProvider components Progress configProvider virtual and dropdownM
 >
   <div
     class="ant-progress-outer"
+    style="width: 100%; height: 8px;"
   >
     <div
       class="ant-progress-inner"
@@ -21835,6 +21840,7 @@ exports[`ConfigProvider components Progress normal 1`] = `
 >
   <div
     class="ant-progress-outer"
+    style="width: 100%; height: 8px;"
   >
     <div
       class="ant-progress-inner"
@@ -21861,6 +21867,7 @@ exports[`ConfigProvider components Progress prefixCls 1`] = `
 >
   <div
     class="prefix-Progress-outer"
+    style="width: 100%; height: 8px;"
   >
     <div
       class="prefix-Progress-inner"

diff --git a/components/progress/Circle.tsx b/components/progress/Circle.tsx
@@ -4,7 +4,7 @@ import { Circle as RCCircle } from 'rc-progress';
 import * as React from 'react';
 import Tooltip from '../tooltip';
 import type { ProgressGradient, ProgressProps } from './progress';
-import { getPercentage, getStrokeColor } from './utils';
+import { getPercentage, getSize, getStrokeColor } from './utils';
 
 const CIRCLE_MIN_STROKE_WIDTH = 3;
 
@@ -20,18 +20,27 @@ export interface CircleProps extends ProgressProps {
 const Circle: React.FC<CircleProps> = (props) => {
   const {
     prefixCls,
-    width = 120,
-    strokeWidth = Math.max(getMinPercent(width), 6),
     trailColor = null as unknown as string,
     strokeLinecap = 'round',
     gapPosition,
     gapDegree,
+    width: originWidth = 120,
     type,
     children,
     success,
+    size,
   } = props;
 
-  const circleStyle: React.CSSProperties = { width, height: width, fontSize: width * 0.15 + 6 };
+  const mergedSize = size ?? [originWidth, originWidth];
+
+  const [width, height] = getSize(mergedSize, 'circle');
+
+  let { strokeWidth } = props;
+  if (strokeWidth === undefined) {
+    strokeWidth = Math.max(getMinPercent(width), 6);
+  }
+
+  const circleStyle: React.CSSProperties = { width, height, fontSize: width * 0.15 + 6 };
 
   const realGapDegree = React.useMemo<RcProgressProps['gapDegree']>(() => {
     // Support gapDeg = 0 when type = 'dashboard'
@@ -71,7 +80,9 @@ const Circle: React.FC<CircleProps> = (props) => {
   return (
     <div className={wrapperClassName} style={circleStyle}>
       {width <= 20 ? (
-        <Tooltip title={children}>{circleContent}</Tooltip>
+        <Tooltip title={children}>
+          <span>{circleContent}</span>
+        </Tooltip>
       ) : (
         <>
           {circleContent}

diff --git a/components/progress/Line.tsx b/components/progress/Line.tsx
@@ -1,8 +1,9 @@
 import { presetPrimaryColors } from '@ant-design/colors';
 import * as React from 'react';
 import type { DirectionType } from '../config-provider';
+import warning from '../_util/warning';
 import type { ProgressGradient, ProgressProps, StringGradients } from './progress';
-import { getSuccessPercent, validProgress } from './utils';
+import { getSize, getSuccessPercent, validProgress } from './utils';
 
 interface LineProps extends ProgressProps {
   prefixCls: string;
@@ -71,8 +72,8 @@ const Line: React.FC<LineProps> = (props) => {
     prefixCls,
     direction: directionConfig,
     percent,
-    strokeWidth,
     size,
+    strokeWidth,
     strokeColor,
     strokeLinecap = 'round',
     children,
@@ -92,9 +93,21 @@ const Line: React.FC<LineProps> = (props) => {
     borderRadius,
   };
 
+  const mergedSize = size ?? [-1, strokeWidth || (size === 'small' ? 6 : 8)];
+
+  const [width, height] = getSize(mergedSize, 'line', { strokeWidth });
+
+  if (process.env.NODE_ENV !== 'production') {
+    warning(
+      !('strokeWidth' in props),
+      'Progress',
+      '`strokeWidth` is deprecated. Please use `size` instead.',
+    );
+  }
+
   const percentStyle: React.CSSProperties = {
     width: `${validProgress(percent)}%`,
-    height: strokeWidth || (size === 'small' ? 6 : 8),
+    height,
     borderRadius,
     ...backgroundProps,
   };
@@ -103,14 +116,19 @@ const Line: React.FC<LineProps> = (props) => {
 
   const successPercentStyle: React.CSSProperties = {
     width: `${validProgress(successPercent)}%`,
-    height: strokeWidth || (size === 'small' ? 6 : 8),
+    height,
     borderRadius,
     backgroundColor: success?.strokeColor,
   };
 
+  const outerStyle: React.CSSProperties = {
+    width: width < 0 ? '100%' : width,
+    height,
+  };
+
   return (
     <>
-      <div className={`${prefixCls}-outer`}>
+      <div className={`${prefixCls}-outer`} style={outerStyle}>
         <div className={`${prefixCls}-inner`} style={trailStyle}>
           <div className={`${prefixCls}-bg`} style={percentStyle} />
           {successPercent !== undefined ? (

diff --git a/components/progress/Steps.tsx b/components/progress/Steps.tsx
@@ -1,10 +1,10 @@
 import classNames from 'classnames';
 import * as React from 'react';
-import type { ProgressProps, ProgressSize } from './progress';
+import type { ProgressProps } from './progress';
+import { getSize } from './utils';
 
 interface ProgressStepsProps extends ProgressProps {
   steps: number;
-  size?: ProgressSize;
   strokeColor?: string | string[];
   trailColor?: string;
 }
@@ -22,6 +22,9 @@ const Steps: React.FC<ProgressStepsProps> = (props) => {
   } = props;
   const current = Math.round(steps * (percent / 100));
   const stepWidth = size === 'small' ? 2 : 14;
+  const mergedSize = size ?? [stepWidth, strokeWidth];
+  const [width, height] = getSize(mergedSize, 'step', { steps, strokeWidth });
+  const unitWidth = width / steps;
   const styledSteps: React.ReactNode[] = new Array(steps);
   for (let i = 0; i < steps; i++) {
     const color = Array.isArray(strokeColor) ? strokeColor[i] : strokeColor;
@@ -33,8 +36,8 @@ const Steps: React.FC<ProgressStepsProps> = (props) => {
         })}
         style={{
           backgroundColor: i <= current - 1 ? color : trailColor,
-          width: stepWidth,
-          height: strokeWidth,
+          width: unitWidth,
+          height,
         }}
       />
     );