fix(button): update style

src/button/README.md

@@ -18,13 +18,14 @@ isComponent: true
 
 ## 代码演示
 
-### 类型
+### 01 组件类型
 
 基础按钮
 
 {{ base }}
 
 图标按钮
+
 {{ icon-btn }}
 
 幽灵按钮
@@ -39,7 +40,13 @@ isComponent: true
 
 {{ block-btn }}
 
-### 组件样式
+### 02 组件状态
+
+按钮禁用态
+
+{{ disabled }}
+
+### 03 组件样式
 
 按钮尺寸
 
@@ -69,8 +76,8 @@ icon | String / Object | - | 图标名称。值为字符串表示图标名称，
 loading | Boolean | false | 是否显示为加载状态 | N
 loading-props | Object | - | 加载loading样式。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/button/type.ts) | N
 shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N
-size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum` | N
-theme | String | default | 组件风格，依次为品牌色、危险色。可选项：default/primary/danger | N
+size | String | medium | 组件尺寸。可选项：extra-small/small/medium/large。TS 类型：`SizeEnum` | N
+theme | String | default | 组件风格，依次为品牌色、危险色。可选项：default/primary/danger/light | N
 type | String | - | 同小程序的 formType。可选项：submit/reset | N
 variant | String | base | 按钮形式，基础、线框、文字。可选项：base/outline/dashed/text | N
 open-type | String | - | 微信开放能力。<br />具体释义：<br />`contact` 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html">具体说明</a> （*小程序插件中不能使用*）；<br />`share` 触发用户转发，使用前建议先阅读<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#使用指引">使用指引</a>；<br />`getPhoneNumber` 获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息，<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html">具体说明</a> （*小程序插件中不能使用*）；<br />`getUserInfo` 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息 （*小程序插件中不能使用*）；<br />`launchApp` 打开APP，可以通过 app-parameter 属性设定向 APP 传的参数<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html">具体说明</a>；<br />`openSetting` 打开授权设置页；<br />`feedback` 打开“意见反馈”页面，用户可提交反馈内容并上传<a href="https://developers.weixin.qq.com/miniprogram/dev/api/base/debug/wx.getLogManager.html">日志</a>，开发者可以登录<a href="https://mp.weixin.qq.com/">小程序管理后台</a>后进入左侧菜单“客服反馈”页面获取到反馈内容；<br />`chooseAvatar` 获取用户头像，可以从 bindchooseavatar 回调中获取到头像信息。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。可选项：contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar | N

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

@@ -3,41 +3,37 @@
 exports[`Button Button base demo works fine 1`] = `
 <base>
   <wx-view
-    class="box"
+    class="button-example"
   >
     <t-button
-      disabled="{{false}}"
       size="large"
       theme="primary"
     >
-      主按钮
+      填充按钮
     </t-button>
     <t-button
-      disabled="{{false}}"
       size="large"
       theme="light"
     >
-      浅按钮
+      填充按钮
     </t-button>
     <t-button
-      disabled="{{false}}"
       size="large"
     >
-      默认按钮
+      填充按钮
     </t-button>
-    <wx-view
-      style="height: 32rpx"
-    />
+  </wx-view>
+  <wx-view
+    class="button-example"
+  >
     <t-button
-      disabled="{{false}}"
       size="large"
       theme="primary"
       variant="outline"
     >
       描边按钮
     </t-button>
     <t-button
-      disabled="{{false}}"
       size="large"
       theme="primary"
       variant="text"
@@ -51,7 +47,7 @@ exports[`Button Button base demo works fine 1`] = `
 exports[`Button Button block-btn demo works fine 1`] = `
 <block-btn>
   <wx-view
-    class="box"
+    class="button-example"
   >
     <t-button
       block="{{true}}"
@@ -67,40 +63,36 @@ exports[`Button Button block-btn demo works fine 1`] = `
 exports[`Button Button ghost-btn demo works fine 1`] = `
 <ghost-btn>
   <wx-view
-    class="full-width"
+    class="button-example"
   >
-    <wx-view
-      class="box"
+    <t-button
+      ghost="{{true}}"
+      size="large"
+      theme="primary"
+    >
+      幽灵按钮
+    </t-button>
+    <t-button
+      ghost="{{true}}"
+      size="large"
+      theme="danger"
     >
-      <t-button
-        disabled=""
-        ghost="{{true}}"
-        theme="primary"
-      >
-        大按钮
-      </t-button>
-      <t-button
-        disabled=""
-        ghost="{{true}}"
-        theme="danger"
-      >
-        大按钮
-      </t-button>
-      <t-button
-        disabled=""
-        ghost="{{true}}"
-      >
-        大按钮
-      </t-button>
-    </wx-view>
+      幽灵按钮
+    </t-button>
+    <t-button
+      ghost="{{true}}"
+      size="large"
+    >
+      幽灵按钮
+    </t-button>
   </wx-view>
 </ghost-btn>
 `;
 
 exports[`Button Button group-btn demo works fine 1`] = `
 <group-btn>
   <wx-view
-    class="group"
+    class="button-example"
   >
     <t-button
       block="{{true}}"
@@ -123,59 +115,42 @@ exports[`Button Button group-btn demo works fine 1`] = `
 exports[`Button Button icon-btn demo works fine 1`] = `
 <icon-btn>
   <wx-view
-    class="box"
+    class="button-example"
   >
     <t-button
       content="填充按钮"
       icon="app"
       theme="primary"
     />
-    <t-button
-      icon="app"
-      shape="round"
-      theme="primary"
-    >
-      带图标按钮
-    </t-button>
-  </wx-view>
-  <wx-view
-    class="box"
-  >
     <t-button
       ariaLabel="返回"
       icon="chevron-left"
       shape="square"
       theme="primary"
     />
-    <t-button
-      ariaLabel="返回"
-      icon="chevron-left"
-      shape="circle"
-      theme="primary"
-    />
   </wx-view>
   <wx-view
-    class="box"
+    class="button-example"
   >
-    <t-button
-      loading="{{true}}"
-      shape="square"
-      theme="primary"
-    />
     <t-button
       loading="{{true}}"
       theme="primary"
     >
       加载中...
     </t-button>
+    <t-button
+      loading="{{true}}"
+      shape="square"
+      theme="primary"
+    />
   </wx-view>
 </icon-btn>
 `;
 
 exports[`Button Button shape demo works fine 1`] = `
 <shape>
   <wx-view
-    class="box align-bottom"
+    class="button-example"
   >
     <t-button
       size="large"
@@ -190,10 +165,6 @@ exports[`Button Button shape demo works fine 1`] = `
       size="large"
       theme="primary"
     />
-  </wx-view>
-  <wx-view
-    class="box align-bottom"
-  >
     <t-button
       shape="round"
       size="large"
@@ -209,34 +180,45 @@ exports[`Button Button shape demo works fine 1`] = `
       theme="primary"
     />
   </wx-view>
+  <t-button
+    block="{{true}}"
+    shape="round"
+    size="large"
+    tClass="external-class"
+    theme="primary"
+  >
+    填充按钮
+  </t-button>
 </shape>
 `;
 
 exports[`Button Button size demo works fine 1`] = `
 <size>
   <wx-view
-    class="box align-bottom"
+    class="button-example"
   >
     <t-button
       size="large"
       theme="primary"
     >
-      大号按钮 44
+      按钮48
     </t-button>
     <t-button
       theme="primary"
     >
-      中号按钮 40
+      按钮40
     </t-button>
-  </wx-view>
-  <wx-view
-    class="box"
-  >
     <t-button
       size="small"
       theme="primary"
     >
-      小号按钮 36
+      按钮32
+    </t-button>
+    <t-button
+      size="extra-small"
+      theme="primary"
+    >
+      按钮28
     </t-button>
   </wx-view>
 </size>
@@ -245,12 +227,12 @@ exports[`Button Button size demo works fine 1`] = `
 exports[`Button Button theme demo works fine 1`] = `
 <theme>
   <wx-view
-    class="box"
+    class="button-example"
   >
     <t-button
       size="large"
     >
-      主按钮
+      填充按钮
     </t-button>
     <t-button
       size="large"
@@ -266,13 +248,13 @@ exports[`Button Button theme demo works fine 1`] = `
     </t-button>
   </wx-view>
   <wx-view
-    class="box"
+    class="button-example"
   >
     <t-button
       size="large"
       theme="primary"
     >
-      主按钮
+      填充按钮
     </t-button>
     <t-button
       size="large"
@@ -290,13 +272,13 @@ exports[`Button Button theme demo works fine 1`] = `
     </t-button>
   </wx-view>
   <wx-view
-    class="box"
+    class="button-example"
   >
     <t-button
       size="large"
       theme="danger"
     >
-      主按钮
+      填充按钮
     </t-button>
     <t-button
       size="large"
@@ -314,13 +296,13 @@ exports[`Button Button theme demo works fine 1`] = `
     </t-button>
   </wx-view>
   <wx-view
-    class="box"
+    class="button-example"
   >
     <t-button
       size="large"
       theme="light"
     >
-      主按钮
+      填充按钮
     </t-button>
     <t-button
       size="large"

src/button/_example/base/index.js

@@ -1,5 +1 @@
-Component({
-  properties: {
-    disabled: Boolean,
-  },
-});
+Component({});

src/button/_example/base/index.wxml

@@ -1,8 +1,10 @@
-<view class="box">
-  <t-button theme="primary" size="large" disabled="{{disabled}}">主按钮</t-button>
-  <t-button theme="light" size="large" disabled="{{disabled}}">浅按钮</t-button>
-  <t-button size="large" disabled="{{disabled}}">默认按钮</t-button>
-  <view style="height: 32rpx" />
-  <t-button theme="primary" size="large" variant="outline" disabled="{{disabled}}">描边按钮</t-button>
-  <t-button theme="primary" size="large" variant="text" disabled="{{disabled}}">文字按钮</t-button>
+<view class="button-example">
+  <t-button theme="primary" size="large">填充按钮</t-button>
+  <t-button theme="light" size="large">填充按钮</t-button>
+  <t-button size="large">填充按钮</t-button>
+</view>
+
+<view class="button-example">
+  <t-button theme="primary" size="large" variant="outline">描边按钮</t-button>
+  <t-button theme="primary" size="large" variant="text">文字按钮</t-button>
 </view>