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 25, 2023 · c368619 · c368619
1 parent d21563b
commit c368619
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,
  }}
  />
  );