feat(Progress): support size props (#609)

* feat(Progress): support size props

* test: update snapshots

* chore: tool functions moved to the tdesign-common repo

Author: anlyyao

src/_common

@@ -15,7 +15,9 @@ import useConfig from '../hooks/useConfig';
 import getBackgroundColor from '../_util/linearGradient';
 import { progressDefaultProps } from './defaultProps';
 import useDefaultProps from '../hooks/useDefaultProps';
-import { PRO_THEME, CIRCLE_SIZE_PX, STATUS_ICON, PLUMP_SEPARATE } from './constants';
+import { PRO_THEME, STATUS_ICON } from '../_common/js/progress/const';
+import { getDiameter, getCircleStokeWidth } from '../_common/js/progress/utils';
+import { PLUMP_SEPARATE } from './constants';
 
 export interface ProgressProps extends TdProgressProps, StyledProps {}
 
@@ -33,6 +35,7 @@ const Progress = forwardRef<HTMLDivElement, ProgressProps>((props, ref) => {
     className,
     style,
     status,
+    size,
   } = useDefaultProps<ProgressProps>(props, progressDefaultProps);
 
   const computedStatus = percentage >= 100 ? 'success' : status || 'default';
@@ -125,12 +128,10 @@ const Progress = forwardRef<HTMLDivElement, ProgressProps>((props, ref) => {
       </div>
     );
   } else if (theme === PRO_THEME.CIRCLE) {
-    // 获取环形进度条 环的宽度
-    const getCircleStokeWidth = (): number => (strokeWidth ? Number(strokeWidth) : 6);
     // 环形进度条尺寸(进度条占位空间，长宽占位)
-    const circleStokeWidth = getCircleStokeWidth();
+    const circleStokeWidth = getCircleStokeWidth(strokeWidth, size);
     // 直径
-    const diameter = CIRCLE_SIZE_PX;
+    const diameter = getDiameter(size);
     // 半径
     const radius = diameter / 2;
     // 内环半径

src/progress/Progress.tsx

@@ -9,12 +9,21 @@ export default function Base() {
       <div className="example-progress__item">
         <Progress percentage={80} />
       </div>
+
+      <div className="summary">百分比内显</div>
       <div className="example-progress__item">
         <Progress theme="plump" percentage={80} />
       </div>
+
+      <div className="summary">环形进度条</div>
       <div className="example-progress__item">
         <Progress theme="circle" percentage={30} />
       </div>
+
+      <div className="summary">微型环形进度条</div>
+      <div className="example-progress__item">
+        <Progress theme="circle" size={'micro'} percentage={30} label={false} />
+      </div>
     </div>
   );
 }

src/progress/_example/base.tsx

@@ -14,22 +14,22 @@ export default function ProgressDemo() {
   return (
     <div className="tdesign-mobile-demo">
       <TDemoHeader title="Progress 进度条" summary="展示操作的当前进度" />
-      <TDemoBlock title="01 类型" summary="基础进度条" padding={true}>
+      <TDemoBlock title="01 类型" summary="基础进度条">
         <BaseDemo />
       </TDemoBlock>
-      <TDemoBlock summary="过渡样式" padding={true}>
+      <TDemoBlock summary="过渡样式" padding>
         <TransitionDemo />
       </TDemoBlock>
-      <TDemoBlock summary="自定义颜色/圆角" padding={true}>
+      <TDemoBlock summary="自定义颜色/圆角">
         <CustomDemo />
       </TDemoBlock>
-      <TDemoBlock title="02 组件状态" summary="线性进度条" padding={true}>
+      <TDemoBlock title="02 组件状态" summary="线性进度条">
         <LineDemo />
       </TDemoBlock>
-      <TDemoBlock summary="百分比内显进度条" padding={true}>
+      <TDemoBlock summary="百分比内显进度条">
         <PlumpDemo />
       </TDemoBlock>
-      <TDemoBlock summary="环形进度条" padding={true}>
+      <TDemoBlock summary="环形进度条">
         <CircleDemo />
       </TDemoBlock>
     </div>

src/progress/_example/index.tsx

@@ -3,7 +3,12 @@
 }
 
 .example-progress {
-  &__item:not(:last-child) {
+  &__item {
+    padding: 0 16px;
+    margin-bottom: 16px;
+  }
+
+  .summary {
     margin-bottom: 16px;
   }
 

src/progress/_example/style/index.less

@@ -1,6 +1,2 @@
-export { PRO_THEME, STATUS_ICON } from '../_common/js/progress/const';
-
-export const CIRCLE_SIZE_PX = 112;
-
 // 进度大于 10 ，进度百分比显示在内部；进度百分比小于 10 进度显示在外部
 export const PLUMP_SEPARATE = 10;

src/progress/constants.ts

@@ -8,6 +8,7 @@ export const progressDefaultProps: TdProgressProps = {
   color: '',
   label: true,
   percentage: 0,
+  size: 'default',
   theme: 'line',
   trackColor: '',
 };

src/progress/defaultProps.ts

@@ -11,6 +11,7 @@ style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProper
 color | String / Object / Array | '' | Typescript：`string \| Array<string> \| Record<string, string>` | N
 label | TNode | true | Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 percentage | Number | 0 | \- | N
+size | String / Number | 'default' | \- | N
 status | String | - | options: success/error/warning/active。Typescript：`ProgressStatus` `type ProgressStatus = 'success' \| 'error' \| 'warning' \| 'active'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/progress/type.ts) | N
 strokeWidth | String / Number | - | \- | N
 theme | String | line | options: line/plump/circle。Typescript：`ProgressTheme` `type ProgressTheme = 'line' \| 'plump' \| 'circle'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/progress/type.ts) | N

src/progress/progress.en-US.md

@@ -11,6 +11,7 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 color | String / Object / Array | '' | 进度条颜色。示例：'#ED7B2F' 或 'orange' 或 `['#f00', '#0ff', '#f0f']` 或 `{ '0%': '#f00', '100%': '#0ff' }` 或  `{ from: '#000', to: '#000' }` 等。TS 类型：`string \| Array<string> \| Record<string, string>` | N
 label | TNode | true | 进度百分比，可自定义。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 percentage | Number | 0 | 进度条百分比 | N
+size | String / Number | 'default' | 进度条尺寸，仅对环形进度条有效。可选值：default/micro。default 值为 112； micro 值为 24 | N
 status | String | - | 进度条状态。可选项：success/error/warning/active。TS 类型：`ProgressStatus` `type ProgressStatus = 'success' \| 'error' \| 'warning' \| 'active'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/progress/type.ts) | N
 strokeWidth | String / Number | - | 进度条线宽。宽度数值不能超过 size 的一半，否则不能输出环形进度 | N
 theme | String | line | 进度条风格。值为 line，标签（label）显示在进度条右侧；值为 plump，标签（label）显示在进度条里面；值为 circle，标签（label）显示在进度条正中间。可选项：line/plump/circle。TS 类型：`ProgressTheme` `type ProgressTheme = 'line' \| 'plump' \| 'circle'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/progress/type.ts) | N

src/progress/progress.md

@@ -22,6 +22,11 @@ export interface TdProgressProps {
    * @default 0
    */
   percentage?: number;
+  /**
+   * 进度条尺寸，仅对环形进度条有效。可选值：default/micro。default 值为 112； micro 值为 24
+   * @default 'default'
+   */
+  size?: string | number;
   /**
    * 进度条状态
    */