feat(Result): support iconProps attr (#1040)

* feat(Result): support iconProps attr * style(Result): use css token
Tencent · Nov 18, 2022 · af01af2 · af01af2
1 parent b7c9b91
commit af01af2
Show file tree

Hide file tree

Showing 18 changed files with 221 additions and 49 deletions.
diff --git a/src/result/README.md b/src/result/README.md
@@ -35,6 +35,7 @@ custom-style `v0.25.0` | String | - | 自定义组件样式 | N
 description | String / Slot | - | 描述文字 | N
 external-classes | Array | - | 组件类名，分别用于设置 组件外层类名、文本描述类名、图片类名、操作按钮类名。`['t-class', 't-class-image', 't-class-title', 't-class-description']` | N
 icon | String | - | 图标名称 | N
+icon-props | Object | {} | 图标属性，透传至 icon | N
 image | String / Slot | - | 图片地址 | N
 theme | String | default | 内置主题。可选项：default/success/warning/error | N
 title | String / Slot | '' | 标题 | N
diff --git a/src/result/__test__/__snapshots__/demo.test.js.snap b/src/result/__test__/__snapshots__/demo.test.js.snap
@@ -20,12 +20,100 @@ exports[`Result Result custom demo works fine 1`] = `
 </custom>
 `;
 
+exports[`Result Result description demo works fine 1`] = `
+<description>
+  <wx-view>
+    <wx-view
+      class="demo-section__content"
+    >
+      <t-result
+        description="描述文字"
+        theme="success"
+        title="成功状态"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view>
+    <wx-view
+      class="demo-section__content"
+    >
+      <t-result
+        description="描述文字"
+        theme="error"
+        title="失败状态"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view>
+    <wx-view
+      class="demo-section__content"
+    >
+      <t-result
+        description="描述文字"
+        theme="warning"
+        title="警示状态"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view>
+    <wx-view
+      class="demo-section__content"
+    >
+      <t-result
+        description="描述文字"
+        theme="default"
+        title="默认状态"
+      />
+    </wx-view>
+  </wx-view>
+</description>
+`;
+
 exports[`Result Result theme demo works fine 1`] = `
 <theme>
-  <t-result
-    description=""
-    theme=""
-    title=""
-  />
+  <wx-view>
+    <wx-view
+      class="demo-section__content"
+    >
+      <t-result
+        description=""
+        theme="success"
+        title="成功状态"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view>
+    <wx-view
+      class="demo-section__content"
+    >
+      <t-result
+        description=""
+        theme="error"
+        title="失败状态"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view>
+    <wx-view
+      class="demo-section__content"
+    >
+      <t-result
+        description=""
+        theme="warning"
+        title="警示状态"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view>
+    <wx-view
+      class="demo-section__content"
+    >
+      <t-result
+        description=""
+        theme="default"
+        title="默认状态"
+      />
+    </wx-view>
+  </wx-view>
 </theme>
 `;
diff --git a/src/result/__test__/demo.test.js b/src/result/__test__/demo.test.js
@@ -5,7 +5,7 @@
 import simulate from 'miniprogram-simulate';
 import path from 'path';
 
-const mapper = ['custom', 'theme'];
+const mapper = ['custom', 'description', 'theme'];
 
 describe('Result', () => {
   mapper.forEach((demoName) => {

diff --git a/src/result/_example/description/index.js b/src/result/_example/description/index.js
@@ -0,0 +1,26 @@
+Component({
+  data: {
+    resultList: [
+      {
+        title: '成功状态',
+        theme: 'success',
+        description: '描述文字',
+      },
+      {
+        title: '失败状态',
+        theme: 'error',
+        description: '描述文字',
+      },
+      {
+        title: '警示状态',
+        theme: 'warning',
+        description: '描述文字',
+      },
+      {
+        title: '默认状态',
+        theme: 'default',
+        description: '描述文字',
+      },
+    ],
+  },
+});
diff --git a/src/result/_example/description/index.json b/src/result/_example/description/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-result": "tdesign-miniprogram/result/result"
+  }
+}
diff --git a/src/result/_example/description/index.wxml b/src/result/_example/description/index.wxml
@@ -0,0 +1,5 @@
+<view wx:for="{{resultList}}" wx:for-item="item" wx:key="index">
+  <view class="demo-section__content">
+    <t-result theme="{{item.theme}}" title="{{item.title}}" description="{{item.description}}" />
+  </view>
+</view>
diff --git a/src/result/_example/description/index.wxss b/src/result/_example/description/index.wxss
@@ -0,0 +1,3 @@
+.demo-section__content {
+  margin-bottom: 96rpx;
+}
diff --git a/src/result/_example/result-page.ts b/src/result/_example/result-page.ts
@@ -1,4 +1,9 @@
 Page({
+  data: {
+    iconProps: {
+      size: '160rpx',
+    },
+  },
   goBack() {
     wx.navigateBack({ delta: 1 });
   },

diff --git a/src/result/_example/result-page.wxml b/src/result/_example/result-page.wxml
@@ -1,8 +1,8 @@
 <view class="page">
   <view class="demo-section__wrapper">
-    <t-result theme="success" title="成功状态" description="描述文字" />
+    <t-result theme="success" title="成功状态" description="描述文字" iconProps="{{iconProps}}" />
   </view>
   <view class="demo-section__wrapper">
-    <t-button size="large" variant="plain" block bind:tap="goBack">返回</t-button>
+    <t-button theme="primary" block size="large" variant="outline" bind:tap="goBack">返回</t-button>
   </view>
 </view>
diff --git a/src/result/_example/result.json b/src/result/_example/result.json
@@ -4,6 +4,7 @@
   "usingComponents": {
     "t-button": "tdesign-miniprogram/button/button",
     "theme": "./theme",
+    "description": "./description",
     "custom": "./custom"
   }
 }
diff --git a/src/result/_example/result.wxml b/src/result/_example/result.wxml
@@ -2,16 +2,18 @@
   <view class="demo-title">Result 结果</view>
   <view class="demo-desc">结果反馈</view>
   <t-demo title="01 类型"> </t-demo>
-  <t-demo wx:for="{{resultList}}" wx:for-item="item" desc="{{item.title}}">
-    <theme theme="{{item.theme}}" title="{{item.title}}" description="{{item.description}}" />
+  <t-demo title="" desc="基础结果">
+    <theme />
+  </t-demo>
+  <t-demo title="" desc="带描述的结果">
+    <description />
   </t-demo>
-
   <t-demo title="" desc="自定义结果">
     <custom />
   </t-demo>
-  <t-demo title="" desc="页面位置展示">
+  <t-demo title="" desc="页面示例">
     <view class="demo-section__wrapper">
-      <t-button size="large" variant="plain" block bind:tap="goResultPage">页面位置展示</t-button>
+      <t-button theme="primary" block size="large" variant="outline" bind:tap="goResultPage">页面示例</t-button>
     </view>
   </t-demo>
 </view>
diff --git a/src/result/_example/theme/index.js b/src/result/_example/theme/index.js
@@ -1,13 +1,22 @@
 Component({
-  properties: {
-    theme: {
-      type: String,
-    },
-    title: {
-      type: String,
-    },
-    description: {
-      type: String,
-    },
+  data: {
+    resultList: [
+      {
+        title: '成功状态',
+        theme: 'success',
+      },
+      {
+        title: '失败状态',
+        theme: 'error',
+      },
+      {
+        title: '警示状态',
+        theme: 'warning',
+      },
+      {
+        title: '默认状态',
+        theme: 'default',
+      },
+    ],
   },
 });
diff --git a/src/result/_example/theme/index.wxml b/src/result/_example/theme/index.wxml
@@ -1 +1,5 @@
-<t-result theme="{{theme}}" title="{{title}}" description="{{description}}" />
+<view wx:for="{{resultList}}" wx:for-item="item" wx:key="index">
+  <view class="demo-section__content">
+    <t-result theme="{{item.theme}}" title="{{item.title}}" description="{{item.description}}" />
+  </view>
+</view>
diff --git a/src/result/_example/theme/index.wxss b/src/result/_example/theme/index.wxss
@@ -0,0 +1,3 @@
+.demo-section__content {
+  margin-bottom: 96rpx;
+}
diff --git a/src/result/props.ts b/src/result/props.ts
@@ -24,6 +24,11 @@ const props: TdResultProps = {
     type: String,
     value: '',
   },
+  /** 图标属性，透传至 icon */
+  iconProps: {
+    type: Object,
+    value: {},
+  },
   /** 图片地址 */
   image: {
     type: String,

diff --git a/src/result/result.less b/src/result/result.less
@@ -1,65 +1,64 @@
 @import '../common/style/index.less';
 
-@result-title-font: @font-size-l;
+@result-title-font-size: @font-size-l;
 @result-title-line-height: @font-size * 2.8;
-@result-title-color: rgba(0, 0, 0, 0.9);
+@result-title-color: @font-gray-1;
 
-@result-description-font: @font-size * 1.4;
+@result-description-font-size: @font-size-base;
 @result-description-line-height: @font-size * 2.2;
-@result-description-color: rgba(0, 0, 0, 0.6);
+@result-description-color: @font-gray-2;
 
-@result-default-color: #0052d9;
-@result-success-color: #00a870;
-@result-warning-color: #ed7b2f;
-@result-error-color: #e34d59;
+@result-icon-default-color: @primary-color;
+@result-icon-success-color: @success-color;
+@result-icon-warning-color: @warning-color;
+@result-icon-error-color: @error-color;
+
+@result-title-margin-top: @spacer;
+@result-description-margin-top: @spacer * 1.5;
 
 .@{prefix}-result {
   display: flex;
   flex-direction: column;
   align-items: center;
 
   &__title {
-    line-height: @result-title-line-height;
-    font-size: @result-title-font;
+    line-height: var(--td-result-title-line-height, @result-title-line-height); // 标题行高
+    font-size: var(--td-result-title-font-size, @result-title-font-size); // 标题文字大小
     font-weight: 700;
-    color: @result-title-color;
-  }
-
-  &__icon {
-    font-size: 80px;
+    color: var(--td-result-title-color, @result-title-color); // 标题颜色
   }
 
   &__thumb + &__title:not(:empty) {
-    margin-top: @spacer;
+    margin-top: var(--td-result-title-margin-top, @result-title-margin-top); // 标题内容上边距
   }
 
   &__description {
     text-align: center;
-    color: @result-description-color;
-    font-size: @result-description-font;
-    line-height: @result-description-line-height;
+    color: var(--td-result-description-color, @result-description-color); // 描述颜色
+    font-size: var(--td-result-description-font-size, @result-description-font-size); // 描述文字大小
+    line-height: var(--td-result-description-line-height, @result-description-line-height); // 描述行高
   }
 
   &__title + &__description:not(:empty) {
-    margin-top: @spacer * 1.5;
+    margin-top: var(--td-result-description-margin-top, @result-description-margin-top); // 描述内容上边距
   }
 
   // theme
   &--theme {
     &-default {
-      color: @result-default-color;
+      color: var(--td-result-icon-default-color, @result-icon-default-color); // 默认状态图标颜色
     }
 
     &-success {
-      color: @result-success-color;
+      color: var(--ts-result-icon-success-color, @result-icon-success-color); // 成功状态图标颜色
     }
 
     &-warning {
-      color: @result-warning-color;
+      color: var(--ts-result-icon-warning-color, @result-icon-warning-color); // 警示状态图标颜色
     }
 
     &-error {
-      color: @result-error-color;
+      color: var(--td-result-icon-error-color, @result-icon-error-color); // 失败状态图标颜色
     }
   }
 }
diff --git a/src/result/result.wxml b/src/result/result.wxml
@@ -1,7 +1,14 @@
 <view style="{{customStyle}}" class="{{classPrefix}} {{classPrefix}}--theme-{{theme}} {{prefix}}-class">
   <view class="{{classPrefix}}__thumb">
     <t-image wx:if="{{image}}" t-class="{{prefix}}-class-image" src="{{image}}" mode="aspectFit" />
-    <t-icon wx:elif="{{ iconName }}" size="160rpx" name="{{ iconName }}" />
+    <t-icon
+      wx:elif="{{ iconName }}"
+      name="{{ iconName }}"
+      prefix="{{iconProps.prefix}}"
+      size="{{iconProps.size || '140rpx'}}"
+      color="{{iconProps.color}}"
+      customStyle="{{iconProps.customStyle}}"
+    ></t-icon>
     <slot wx:else name="image" class="{{prefix}}-class-image" />
   </view>
 

diff --git a/src/result/type.ts b/src/result/type.ts
@@ -35,6 +35,14 @@ export interface TdResultProps {
     type: StringConstructor;
     value?: string;
   };
+  /**
+   * 图标属性，透传至 icon
+   * @default {}
+   */
+  iconProps?: {
+    type: ObjectConstructor;
+    value?: object;
+  };
   /**
    * 图片地址
    */