Merge remote-tracking branch 'origin/feature' into next

2024-11-27 20:49:53 +08:00 · 2022-06-02 16:21:16 +08:00 · 2022-06-02 16:21:16 +08:00 · c89c61e2c4
commit c89c61e2c4
parent 4975cbff05 2113c25664
12 changed files with 147 additions and 55 deletions
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -233,7 +233,7 @@ jobs:
      matrix:
        react: ['16', '17', '18']
        module: ['dom', 'node', 'dist']
-        shard: ['1/4', '2/4', '3/4', '4/4']
+        shard: ['1/2', '2/2']
    env:
      REACT: ${{ matrix.react }}
    runs-on: ubuntu-latest
@ -350,7 +350,7 @@ jobs:
      matrix:
        react: ['16', '17', '18']
        module: [lib, es]
-        shard: ['1/4', '2/4', '3/4', '4/4']
+        shard: ['1/2', '2/2']
    env:
      REACT: ${{ matrix.react }}
    steps:
--- a/components/popover/index.tsx
+++ b/components/popover/index.tsx
@ -12,7 +12,7 @@ import useStyle from './style';
 export interface PopoverProps extends AbstractTooltipProps {
  title?: React.ReactNode | RenderFunction;
  content?: React.ReactNode | RenderFunction;
-  /** @private Used for Popconfirm. Safe to remove. */
+  /** @private Used For Popconfirm. Safe to remove. */
  _overlay?: React.ReactNode;
 }

--- a/components/progress/Circle.tsx
+++ b/components/progress/Circle.tsx
@ -3,12 +3,13 @@ import { Circle as RCCircle } from 'rc-progress';
 import { presetPrimaryColors } from '@ant-design/colors';
 import classNames from 'classnames';
 import { validProgress, getSuccessPercent } from './utils';
-import type { ProgressProps } from './progress';
+import type { ProgressProps, ProgressGradient } from './progress';

 interface CircleProps extends ProgressProps {
  prefixCls: string;
  children: React.ReactNode;
  progressStatus: string;
+  strokeColor?: string | ProgressGradient;
 }

 function getPercentage({ percent, success, successPercent }: CircleProps) {
--- a/components/progress/Line.tsx
+++ b/components/progress/Line.tsx
@ -8,6 +8,7 @@ interface LineProps extends ProgressProps {
  prefixCls: string;
  direction?: DirectionType;
  children: React.ReactNode;
+  strokeColor?: string | ProgressGradient;
 }

 /**
@ -83,27 +84,27 @@ const Line: React.FC<LineProps> = props => {
          background: strokeColor,
        };

-  const trailStyle = trailColor
-    ? {
-        backgroundColor: trailColor,
-      }
-    : undefined;
+  const borderRadius = strokeLinecap === 'square' || strokeLinecap === 'butt' ? 0 : undefined;
+  const trailStyle = {
+    backgroundColor: trailColor || undefined,
+    borderRadius,
+  };

  const percentStyle = {
    width: `${validProgress(percent)}%`,
    height: strokeWidth || (size === 'small' ? 6 : 8),
-    borderRadius: strokeLinecap === 'square' ? 0 : undefined,
+    borderRadius,
    ...backgroundProps,
-  } as React.CSSProperties;
+  };

  const successPercent = getSuccessPercent(props);

  const successPercentStyle = {
    width: `${validProgress(successPercent)}%`,
    height: strokeWidth || (size === 'small' ? 6 : 8),
-    borderRadius: strokeLinecap === 'square' ? 0 : undefined,
+    borderRadius,
    backgroundColor: success?.strokeColor,
-  } as React.CSSProperties;
+  };

  const successSegment =
    successPercent !== undefined ? (
--- a/components/progress/Steps.tsx
+++ b/components/progress/Steps.tsx
@ -2,14 +2,14 @@ import * as React from 'react';
 import classNames from 'classnames';
 import type { ProgressProps, ProgressSize } from './progress';

-interface StepsProps extends ProgressProps {
+interface ProgressStepsProps extends ProgressProps {
  steps: number;
  size?: ProgressSize;
-  strokeColor?: string;
+  strokeColor?: string | string[];
  trailColor?: string;
 }

-const Steps: React.FC<StepsProps> = props => {
+const Steps: React.FC<ProgressStepsProps> = props => {
  const {
    size,
    steps,
@ -24,6 +24,7 @@ const Steps: React.FC<StepsProps> = props => {
  const stepWidth = size === 'small' ? 2 : 14;
  const styledSteps = [];
  for (let i = 0; i < steps; i += 1) {
+    const color = Array.isArray(strokeColor) ? strokeColor[i] : strokeColor;
    styledSteps.push(
      <div
        key={i}
@ -31,7 +32,7 @@ const Steps: React.FC<StepsProps> = props => {
          [`${prefixCls}-steps-item-active`]: i <= current - 1,
        })}
        style={{
-          backgroundColor: i <= current - 1 ? strokeColor : trailColor,
+          backgroundColor: i <= current - 1 ? color : trailColor,
          width: stepWidth,
          height: strokeWidth,
        }}
--- a/components/progress/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/progress/tests/snapshots/demo-extend.test.ts.snap
@ -1255,10 +1255,11 @@ Array [
    >
      <div
        class="ant-progress-inner"
+        style="border-radius:0"
      >
        <div
          class="ant-progress-bg"
-          style="width:75%;height:8px"
+          style="width:75%;height:8px;border-radius:0"
        />
      </div>
    </div>
@ -1643,23 +1644,23 @@ Array [
    >
      <div
        class="ant-progress-steps-item ant-progress-steps-item-active"
-        style="background-color:#52c41a;width:2px;height:8px"
+        style="background-color:#389e0d;width:2px;height:8px"
      />
      <div
        class="ant-progress-steps-item ant-progress-steps-item-active"
-        style="background-color:#52c41a;width:2px;height:8px"
+        style="background-color:#389e0d;width:2px;height:8px"
      />
      <div
        class="ant-progress-steps-item ant-progress-steps-item-active"
-        style="background-color:#52c41a;width:2px;height:8px"
+        style="background-color:#389e0d;width:2px;height:8px"
      />
      <div
        class="ant-progress-steps-item ant-progress-steps-item-active"
-        style="background-color:#52c41a;width:2px;height:8px"
+        style="background-color:#389e0d;width:2px;height:8px"
      />
      <div
        class="ant-progress-steps-item ant-progress-steps-item-active"
-        style="background-color:#52c41a;width:2px;height:8px"
+        style="background-color:#389e0d;width:2px;height:8px"
      />
      <span
        class="ant-progress-text"
@ -1686,5 +1687,40 @@ Array [
      </span>
    </div>
  </div>,
+  <br />,
+  <div
+    class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
+  >
+    <div
+      class="ant-progress-steps-outer"
+    >
+      <div
+        class="ant-progress-steps-item ant-progress-steps-item-active"
+        style="background-color:#389e0d;width:14px;height:8px"
+      />
+      <div
+        class="ant-progress-steps-item ant-progress-steps-item-active"
+        style="background-color:#389e0d;width:14px;height:8px"
+      />
+      <div
+        class="ant-progress-steps-item ant-progress-steps-item-active"
+        style="background-color:#f5222d;width:14px;height:8px"
+      />
+      <div
+        class="ant-progress-steps-item"
+        style="width:14px;height:8px"
+      />
+      <div
+        class="ant-progress-steps-item"
+        style="width:14px;height:8px"
+      />
+      <span
+        class="ant-progress-text"
+        title="60%"
+      >
+        60%
+      </span>
+    </div>
+  </div>,
 ]
 `;
--- a/components/progress/tests/snapshots/demo.test.js.snap
+++ b/components/progress/tests/snapshots/demo.test.js.snap
@ -1255,10 +1255,11 @@ Array [
    >
      <div
        class="ant-progress-inner"
+        style="border-radius:0"
      >
        <div
          class="ant-progress-bg"
-          style="width:75%;height:8px"
+          style="width:75%;height:8px;border-radius:0"
        />
      </div>
    </div>
@ -1571,23 +1572,23 @@ Array [
    >
      <div
        class="ant-progress-steps-item ant-progress-steps-item-active"
-        style="background-color:#52c41a;width:2px;height:8px"
+        style="background-color:#389e0d;width:2px;height:8px"
      />
      <div
        class="ant-progress-steps-item ant-progress-steps-item-active"
-        style="background-color:#52c41a;width:2px;height:8px"
+        style="background-color:#389e0d;width:2px;height:8px"
      />
      <div
        class="ant-progress-steps-item ant-progress-steps-item-active"
-        style="background-color:#52c41a;width:2px;height:8px"
+        style="background-color:#389e0d;width:2px;height:8px"
      />
      <div
        class="ant-progress-steps-item ant-progress-steps-item-active"
-        style="background-color:#52c41a;width:2px;height:8px"
+        style="background-color:#389e0d;width:2px;height:8px"
      />
      <div
        class="ant-progress-steps-item ant-progress-steps-item-active"
-        style="background-color:#52c41a;width:2px;height:8px"
+        style="background-color:#389e0d;width:2px;height:8px"
      />
      <span
        class="ant-progress-text"
@ -1614,5 +1615,40 @@ Array [
      </span>
    </div>
  </div>,
+  <br />,
+  <div
+    class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
+  >
+    <div
+      class="ant-progress-steps-outer"
+    >
+      <div
+        class="ant-progress-steps-item ant-progress-steps-item-active"
+        style="background-color:#389e0d;width:14px;height:8px"
+      />
+      <div
+        class="ant-progress-steps-item ant-progress-steps-item-active"
+        style="background-color:#389e0d;width:14px;height:8px"
+      />
+      <div
+        class="ant-progress-steps-item ant-progress-steps-item-active"
+        style="background-color:#f5222d;width:14px;height:8px"
+      />
+      <div
+        class="ant-progress-steps-item"
+        style="width:14px;height:8px"
+      />
+      <div
+        class="ant-progress-steps-item"
+        style="width:14px;height:8px"
+      />
+      <span
+        class="ant-progress-text"
+        title="60%"
+      >
+        60%
+      </span>
+    </div>
+  </div>,
 ]
 `;
--- a/components/progress/demo/steps.md
+++ b/components/progress/demo/steps.md
@ -14,8 +14,9 @@ title:
 A progress bar with steps.

 ```tsx
-import { Progress } from 'antd';
 import React from 'react';
+import { Progress } from 'antd';
+import { red, green } from '@ant-design/colors';

 const App: React.FC = () => (
  <>
@ -23,7 +24,9 @@ const App: React.FC = () => (
    <br />
    <Progress percent={30} steps={5} />
    <br />
-    <Progress percent={100} steps={5} size="small" strokeColor="#52c41a" />
+    <Progress percent={100} steps={5} size="small" strokeColor={green[6]} />
+    <br />
+    <Progress percent={60} steps={5} strokeColor={[green[6], green[6], red[5]]} />
  </>
 );

--- a/components/progress/index.en-US.md
+++ b/components/progress/index.en-US.md
@ -32,11 +32,11 @@ Properties that shared by all types.

 ### `type="line"`

-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| steps | The total step count | number | - |
-| strokeColor | The color of progress bar, render `linear-gradient` when passing an object | string \| { from: string; to: string; direction: string } | - |
-| strokeWidth | To set the width of the progress bar, unit: `px` | number | 10 |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| steps | The total step count | number | - | - |
+| strokeColor | The color of progress bar, render `linear-gradient` when passing an object, could accept `string[]` when has `steps`. | string \| string[] \| { from: string; to: string; direction: string } | - | 4.21.0: `string[]` |
+| strokeWidth | To set the width of the progress bar, unit: `px` | number | 10 | - |

 ### `type="circle"`

--- a/components/progress/index.zh-CN.md
+++ b/components/progress/index.zh-CN.md
@ -33,11 +33,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/xqsDu4ZyR/Progress.svg

 ### `type="line"`

-| 属性 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| steps | 进度条总共步数 | number | - |
-| strokeColor | 进度条的色彩，传入 object 时为渐变 | string \| { from: string; to: string; direction: string } | - |
-| strokeWidth | 进度条线的宽度，单位 px | number | 10 |
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| steps | 进度条总共步数 | number | - | - |
+| strokeColor | 进度条的色彩，传入 object 时为渐变。当有 `steps` 时支持传入一个数组。 | string \| string[] \| { from: string; to: string; direction: string } | - | 4.21.0: `string[]` |
+| strokeWidth | 进度条线的宽度，单位 px | number | 10 | - |

 ### `type="circle"`

--- a/components/progress/progress.tsx
+++ b/components/progress/progress.tsx
@ -39,7 +39,7 @@ export interface ProgressProps {
  showInfo?: boolean;
  strokeWidth?: number;
  strokeLinecap?: 'butt' | 'square' | 'round';
-  strokeColor?: string | ProgressGradient;
+  strokeColor?: string | string[] | ProgressGradient;
  trailColor?: string;
  width?: number;
  success?: SuccessProps;
@ -54,7 +54,17 @@ export interface ProgressProps {
 }

 const Progress: React.FC<ProgressProps> = (props: ProgressProps) => {
-  const { percent = 0, size = 'default', showInfo = true, type = 'line' } = props;
+  const {
+    prefixCls: customizePrefixCls,
+    className,
+    steps,
+    strokeColor,
+    percent = 0,
+    size = 'default',
+    showInfo = true,
+    type = 'line',
+    ...restProps
+  } = props;

  function getPercentNumber() {
    const successPercent = getSuccessPercent(props);
@ -98,7 +108,6 @@ const Progress: React.FC<ProgressProps> = (props: ProgressProps) => {

  const { getPrefixCls, direction } = React.useContext(ConfigContext);

-  const { prefixCls: customizePrefixCls, className, steps, strokeColor, ...restProps } = props;
  const prefixCls = getPrefixCls('progress', customizePrefixCls);
  const [wrapSSR, hashId] = useStyle(prefixCls);
  const progressStatus = getProgressStatus();
@ -110,26 +119,34 @@ const Progress: React.FC<ProgressProps> = (props: ProgressProps) => {
    '`successPercent` is deprecated. Please use `success.percent` instead.',
  );

+  const strokeColorNotArray = Array.isArray(strokeColor) ? strokeColor[0] : strokeColor;
+  const strokeColorNotGradient =
+    typeof strokeColor === 'string' || Array.isArray(strokeColor) ? strokeColor : undefined;
  let progress;
  // Render progress shape
  if (type === 'line') {
    progress = steps ? (
-      <Steps
-        {...props}
-        strokeColor={typeof strokeColor === 'string' ? strokeColor : undefined}
-        prefixCls={prefixCls}
-        steps={steps}
-      >
+      <Steps {...props} strokeColor={strokeColorNotGradient} prefixCls={prefixCls} steps={steps}>
        {progressInfo}
      </Steps>
    ) : (
-      <Line {...props} prefixCls={prefixCls} direction={direction}>
+      <Line
+        {...props}
+        strokeColor={strokeColorNotArray}
+        prefixCls={prefixCls}
+        direction={direction}
+      >
        {progressInfo}
      </Line>
    );
  } else if (type === 'circle' || type === 'dashboard') {
    progress = (
-      <Circle {...props} prefixCls={prefixCls} progressStatus={progressStatus}>
+      <Circle
+        {...props}
+        strokeColor={strokeColorNotArray}
+        prefixCls={prefixCls}
+        progressStatus={progressStatus}
+      >
        {progressInfo}
      </Circle>
    );
@ -159,10 +176,8 @@ const Progress: React.FC<ProgressProps> = (props: ProgressProps) => {
        'gapDegree',
        'gapPosition',
        'strokeLinecap',
-        'percent',
        'success',
        'successPercent',
-        'type',
      ])}
      className={classString}
    >
--- a/package.json
+++ b/package.json
@ -164,7 +164,6 @@
  "devDependencies": {
    "@ant-design/bisheng-plugin": "^3.2.0",
    "@ant-design/hitu": "^0.0.0-alpha.13",
-    "@ant-design/jest-image-snapshot": "^4.5.2",
    "@ant-design/tools": "^15.0.2",
    "@docsearch/css": "^3.0.0",
    "@qixian.cs/github-contributors-list": "^1.0.3",