feat(Progress): support size props

src/progress/README.en-US.md

@@ -11,6 +11,7 @@ custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on v
 color | String / Object / Array | '' | Typescript：`string \| Array<string> \| Record<string, string>` | N
 label | String / Boolean / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/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-miniprogram/tree/develop/src/progress/type.ts) | N
 stroke-width | 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-miniprogram/tree/develop/src/progress/type.ts) | N
@@ -40,4 +41,4 @@ Name | Default Value | Description
 --td-progress-track-bg-color | @bg-color-component | -
 --td-progress-circle-label-font-size | 40rpx | -
 --td-progress-circle-label-line-height | 56rpx | -
---td-progress-circle-label-font-weight | 700 | -
+--td-progress-circle-label-font-weight | 700 | -

src/progress/README.md

@@ -73,6 +73,7 @@ custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场
 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 | String / Boolean / Slot | true | 进度百分比，可自定义。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/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-miniprogram/tree/develop/src/progress/type.ts) | N
 stroke-width | String / Number | - | 进度条线宽，默认单位 `px` | 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-miniprogram/tree/develop/src/progress/type.ts) | N
@@ -102,4 +103,4 @@ t-class-label | 标签样式类
 --td-progress-track-bg-color | @bg-color-component | -
 --td-progress-circle-label-font-size | 40rpx | -
 --td-progress-circle-label-line-height | 56rpx | -
---td-progress-circle-label-font-weight | 700 | -
+--td-progress-circle-label-font-weight | 700 | -

src/progress/__test__/__snapshots__/demo.test.js.snap

@@ -2,17 +2,59 @@
 
 exports[`Progress Progress base demo works fine 1`] = `
 <base>
-  <t-progress
-    percentage="80"
-  />
-  <t-progress
-    percentage="80"
-    theme="plump"
-  />
-  <t-progress
-    percentage="30"
-    theme="circle"
-  />
+  <wx-view
+    class="demo-desc"
+  >
+    基础进度条
+  </wx-view>
+  <wx-view
+    class="demo-wrapper"
+  >
+    <t-progress
+      percentage="80"
+    />
+  </wx-view>
+  <wx-view
+    class="demo-desc"
+  >
+    百分比内显
+  </wx-view>
+  <wx-view
+    class="demo-wrapper"
+  >
+    <t-progress
+      percentage="80"
+      theme="plump"
+    />
+  </wx-view>
+  <wx-view
+    class="demo-desc"
+  >
+    环形进度条
+  </wx-view>
+  <wx-view
+    class="demo-wrapper"
+  >
+    <t-progress
+      percentage="30"
+      theme="circle"
+    />
+  </wx-view>
+  <wx-view
+    class="demo-desc"
+  >
+    微型环形进度条
+  </wx-view>
+  <wx-view
+    class="demo-wrapper"
+  >
+    <t-progress
+      label="{{false}}"
+      percentage="30"
+      size="micro"
+      theme="circle"
+    />
+  </wx-view>
 </base>
 `;
 

src/progress/_example/base/index.json

@@ -1,5 +1,6 @@
 {
   "component": true,
+  "styleIsolation": "apply-shared",
   "usingComponents": {
     "t-progress": "tdesign-miniprogram/progress/progress"
   }

src/progress/_example/base/index.wxml

@@ -1,3 +1,19 @@
-<t-progress percentage="80" />
-<t-progress theme="plump" percentage="80" />
-<t-progress wx:if="{{!skylineRender}}" theme="circle" percentage="30" />
+<view class="demo-desc">基础进度条</view>
+<view class="demo-wrapper">
+  <t-progress percentage="80" />
+</view>
+
+<view class="demo-desc">百分比内显</view>
+<view class="demo-wrapper">
+  <t-progress theme="plump" percentage="80" />
+</view>
+
+<view class="demo-desc">环形进度条</view>
+<view class="demo-wrapper" wx:if="{{!skylineRender}}">
+  <t-progress theme="circle" percentage="30" />
+</view>
+
+<view class="demo-desc">微型环形进度条</view>
+<view class="demo-wrapper" wx:if="{{!skylineRender}}">
+  <t-progress theme="circle" size="micro" percentage="30" label="{{false}}" />
+</view>

src/progress/_example/base/index.wxss

@@ -0,0 +1,3 @@
+.demo-wrapper {
+  padding: 0 32rpx;
+}

src/progress/_example/progress.wxml

@@ -7,7 +7,7 @@
         desc="用于展示任务当前的进度。"
         notice="渲染框架支持情况：Skyline、WebView"
       />
-      <t-demo title="01 组件类型" desc="基础进度条" padding>
+      <t-demo title="01 组件类型">
         <base />
       </t-demo>
       <t-demo desc="过渡样式" padding>

src/progress/progress.less

@@ -153,8 +153,10 @@
     -webkit-line-clamp: 2;
   }
 
-  .@{progress}__icon {
-    font-size: @progress-circle-icon-font-size;
+  &--micro {
+    --td-progress-circle-width: 48rpx;
+    --td-progress-stroke-circle-width: 4rpx;
+    --td-progress-circle-icon-font-size: 40rpx;
   }
 }
 
@@ -176,34 +178,26 @@
   }
 }
 
-.@{progress}--status--success {
+.progress-status(@bgColor, @iconColor) {
   .@{progress}__inner {
-    background: @progress-inner-bg-color-success;
+    background: @bgColor;
   }
 
   .@{progress}__icon {
-    color: @success-color;
+    color: @iconColor;
   }
 }
 
-.@{progress}--status--warning {
-  .@{progress}__inner {
-    background: @progress-inner-bg-color-warning;
-  }
+.@{progress}--status--success {
+  .progress-status(@progress-inner-bg-color-success, @success-color);
+}
 
-  .@{progress}__icon {
-    color: @warning-color;
-  }
+.@{progress}--status--warning {
+  .progress-status(@progress-inner-bg-color-warning, @warning-color);
 }
 
 .@{progress}--status--error {
-  .@{progress}__inner {
-    background: @progress-inner-bg-color-error;
-  }
-
-  .@{progress}__icon {
-    color: @error-color;
-  }
+  .progress-status(@progress-inner-bg-color-error, @error-color);
 }
 
 @keyframes progress-active-animation {

src/progress/progress.wxml

@@ -75,13 +75,10 @@
       aria-valuenow="{{computedProgress}}"
       aria-label="{{ ariaLabel || (isIOS ? _this.getIOSAriaLabel(status) : _this.getAndroidAriaLabel(status))  }}"
       aria-live="polite"
-      class="{{classPrefix}}__canvas--circle"
-      style="background-image: conic-gradient(from var(--td-progress-circle-from), {{colorCircle || _this.STATUS_COLOR[status] || 'var(--td-progress-inner-bg-color)'}} {{computedProgress}}%, {{bgColorBar || 'var(--td-progress-track-bg-color)'}} 0%);"
+      class="{{_.cls(classPrefix + '__canvas--circle', [[size, true]])}}"
+      style="{{_this.getCircleStyle(size, heightBar)}}; background-image: conic-gradient(from var(--td-progress-circle-from), {{colorCircle || _this.STATUS_COLOR[status] || 'var(--td-progress-inner-bg-color)'}} {{computedProgress}}%, {{bgColorBar || 'var(--td-progress-track-bg-color)'}} 0%);"
     >
-      <view
-        class="{{classPrefix}}__canvas--inner {{prefix}}-class-bar"
-        style="{{heightBar? '--td-progress-stroke-circle-width:' + heightBar + 'px' : ''}}"
-      >
+      <view class="{{classPrefix}}__canvas--inner {{prefix}}-class-bar">
         <view wx:if="{{label}}" class="{{classPrefix}}__info {{prefix}}-class-label" aria-hidden="{{ true }}">
           <template
             wx:if="{{_.includes(_this.STATUS, status)}}"

src/progress/progress.wxs

@@ -1,3 +1,5 @@
+var utils = require('../common/utils.wxs');
+
 var STATUS = ['success', 'error', 'warning'];
 var STATUS_TEXT = ['success', 'error', 'warning', 'active'];
 
@@ -12,11 +14,13 @@ var STATUS_COLOR = {
   error: '#e34d59',
   warning: '#ed7b2f',
 };
+
 var LINE_STATUS_ICON = {
   success: 'check-circle-filled',
   error: 'error-circle-filled',
   warning: 'error-circle-filled',
 };
+
 var CIRCLE_STATUS_ICON = {
   success: 'check',
   error: 'close',
@@ -31,25 +35,37 @@ var CIRCLE_STATUS_ICON = {
  *
  */
 
-var getIOSAriaLabel = function (status) {
+function getIOSAriaLabel(status) {
   if (status === 'error') {
     return '进度失败';
   }
   if (status === 'warning') {
     return '进度异常';
   }
   return '';
-};
+}
 
-var getAndroidAriaLabel = function (status) {
+function getAndroidAriaLabel(status) {
   if (status === 'error') {
     return '%' + '，进度失败';
   }
   if (status === 'warning') {
     return '%' + '，进度异常';
   }
   return '%';
-};
+}
+
+function getCircleStyle(size, strokeWidth) {
+  var styles = {
+    '--td-progress-stroke-circle-width': utils.addUnit(strokeWidth),
+  };
+
+  if (!utils.includes(['default', 'micro'], size)) {
+    styles['--td-progress-circle-width'] = utils.addUnit(size);
+  }
+
+  return utils._style(styles);
+}
 
 module.exports = {
   STATUS: STATUS,
@@ -60,4 +76,5 @@ module.exports = {
   CIRCLE_STATUS_ICON: CIRCLE_STATUS_ICON,
   getAndroidAriaLabel: getAndroidAriaLabel,
   getIOSAriaLabel: getIOSAriaLabel,
+  getCircleStyle: getCircleStyle,
 };

src/progress/props.ts

@@ -21,6 +21,11 @@ const props: TdProgressProps = {
     type: Number,
     value: 0,
   },
+  /** 进度条尺寸，仅对环形进度条有效。可选值：default/micro。default 值为 112； micro 值为 24 */
+  size: {
+    type: null,
+    value: 'default',
+  },
   /** 进度条状态 */
   status: {
     type: String,
@@ -29,11 +34,6 @@ const props: TdProgressProps = {
   strokeWidth: {
     type: null,
   },
-  /** 自定义组件样式 */
-  style: {
-    type: String,
-    value: '',
-  },
   /** 进度条风格。值为 line，标签（label）显示在进度条右侧；值为 plump，标签（label）显示在进度条里面；值为 circle，标签（label）显示在进度条正中间 */
   theme: {
     type: String,

src/progress/type.ts

@@ -29,6 +29,14 @@ export interface TdProgressProps {
     type: NumberConstructor;
     value?: number;
   };
+  /**
+   * 进度条尺寸，仅对环形进度条有效。可选值：default/micro。default 值为 112； micro 值为 24
+   * @default 'default'
+   */
+  size?: {
+    type: null;
+    value?: string | number;
+  };
   /**
    * 进度条状态
    */
@@ -43,14 +51,6 @@ export interface TdProgressProps {
     type: null;
     value?: string | number;
   };
-  /**
-   * 自定义组件样式
-   * @default ''
-   */
-  style?: {
-    type: StringConstructor;
-    value?: string;
-  };
   /**
    * 进度条风格。值为 line，标签（label）显示在进度条右侧；值为 plump，标签（label）显示在进度条里面；值为 circle，标签（label）显示在进度条正中间
    * @default line