feat(button): using new style (#993)

Tencent · Nov 9, 2022 · 03fa092 · 03fa092
1 parent cb7da1e
commit 03fa092
Show file tree

Hide file tree

Showing 32 changed files with 305 additions and 298 deletions.
diff --git a/src/button/__test__/__snapshots__/demo.test.js.snap b/src/button/__test__/__snapshots__/demo.test.js.snap
@@ -6,115 +6,45 @@ exports[`Button Button base demo works fine 1`] = `
     class="box"
   >
     <t-button
-      block="{{true}}"
       disabled="{{false}}"
-      tClass="external-class"
+      size="large"
       theme="primary"
     >
-      强按钮
+      主按钮
     </t-button>
     <t-button
-      block="{{true}}"
       disabled="{{false}}"
-      tClass="external-class"
-      theme="primary"
-      variant="outline"
+      size="large"
+      theme="light"
     >
-      弱按钮
+      浅按钮
     </t-button>
     <t-button
-      block="{{true}}"
       disabled="{{false}}"
-      tClass="external-class"
-      variant="outline"
+      size="large"
     >
-      次按钮
+      默认按钮
     </t-button>
+    <wx-view
+      style="height: 32rpx"
+    />
     <t-button
-      block="{{true}}"
       disabled="{{false}}"
-      icon="app"
-      tClass="external-class"
+      size="large"
       theme="primary"
       variant="outline"
     >
-      带图标按钮
+      描边按钮
     </t-button>
     <t-button
-      block="{{true}}"
       disabled="{{false}}"
-      tClass="external-class"
-      theme="danger"
-    >
-      强告警按钮
-    </t-button>
-    <t-button
-      block="{{true}}"
-      disabled="{{false}}"
-      tClass="external-class"
-      theme="danger"
-      variant="outline"
-    >
-      弱告警按钮
-    </t-button>
-  </wx-view>
-  <wx-view
-    class="full-width"
-  >
-    <wx-view
-      class="box"
-    >
-      <t-button
-        block="{{true}}"
-        disabled="{{false}}"
-        ghost="{{true}}"
-        tClass="external-class"
-      >
-        幽灵按钮
-      </t-button>
-    </wx-view>
-  </wx-view>
-  <wx-view
-    class="box"
-  >
-    <t-button
-      block="{{true}}"
-      disabled="{{false}}"
-      tClass="external-class"
+      size="large"
       theme="primary"
       variant="text"
     >
       文字按钮
     </t-button>
   </wx-view>
-  <t-button
-    block="{{true}}"
-    disabled="{{false}}"
-    size="large"
-    tClass="external-class no-border-radius"
-    theme="primary"
-  >
-    通栏按钮
-  </t-button>
-  <t-button-group>
-    <t-button
-      block="{{true}}"
-      disabled="{{false}}"
-      size="large"
-      tClass="external-class no-border-radius no-border"
-    >
-      次按钮
-    </t-button>
-    <t-button
-      block="{{true}}"
-      disabled="{{false}}"
-      size="large"
-      tClass="external-class no-border-radius"
-      theme="primary"
-    >
-      主按钮
-    </t-button>
-  </t-button-group>
 </base>
 `;
 
@@ -124,56 +54,42 @@ exports[`Button Button icon-btn demo works fine 1`] = `
     class="box"
   >
     <t-button
-      content="带图标按钮"
-      disabled="{{false}}"
+      content="填充按钮"
       icon="app"
-      tClass="external-class"
       theme="primary"
     />
     <t-button
-      disabled="{{false}}"
       icon="app"
       shape="round"
-      tClass="external-class"
       theme="primary"
     >
-      <wx-text>
-        带图标按钮
-      </wx-text>
+      带图标按钮
     </t-button>
   </wx-view>
   <wx-view
     class="box"
   >
     <t-button
-      disabled="{{false}}"
       icon="app"
       shape="square"
-      tClass="external-class"
       theme="primary"
     />
     <t-button
-      disabled="{{false}}"
       icon="app"
       shape="circle"
-      tClass="external-class"
       theme="primary"
     />
   </wx-view>
   <wx-view
     class="box"
   >
     <t-button
-      disabled="{{false}}"
       loading="{{true}}"
       shape="square"
-      tClass="external-class"
       theme="primary"
     />
     <t-button
-      disabled="{{false}}"
       loading="{{true}}"
-      tClass="external-class"
       theme="primary"
     >
       加载中...
@@ -192,99 +108,25 @@ exports[`Button Button size demo works fine 1`] = `
       tClass="external-class"
       theme="primary"
     >
-      按钮 44
+      大号按钮 44
     </t-button>
     <t-button
       tClass="external-class"
       theme="primary"
     >
-      按钮 40
-    </t-button>
-    <t-button
-      size="small"
-      tClass="external-class"
-      theme="primary"
-    >
-      按钮 36
+      中号按钮 40
     </t-button>
   </wx-view>
   <wx-view
-    class="box align-bottom"
+    class="box"
   >
     <t-button
-      icon="app"
-      shape="round"
-      size="large"
-      tClass="external-class"
-      theme="primary"
-    >
-      按钮
-    </t-button>
-    <t-button
-      icon="app"
-      shape="round"
-      tClass="external-class"
-      theme="primary"
-    >
-      按钮
-    </t-button>
-    <t-button
-      icon="app"
-      shape="round"
       size="small"
       tClass="external-class"
       theme="primary"
     >
-      按钮
+      小号按钮 36
     </t-button>
   </wx-view>
-  <wx-view
-    class="box align-bottom"
-  >
-    <t-button
-      icon="app"
-      shape="square"
-      size="large"
-      tClass="external-class"
-      theme="primary"
-    />
-    <t-button
-      icon="app"
-      shape="square"
-      tClass="external-class"
-      theme="primary"
-    />
-    <t-button
-      icon="app"
-      shape="square"
-      size="small"
-      tClass="external-class"
-      theme="primary"
-    />
-  </wx-view>
-  <wx-view
-    class="box align-bottom"
-  >
-    <t-button
-      icon="app"
-      shape="circle"
-      size="large"
-      tClass="external-class"
-      theme="primary"
-    />
-    <t-button
-      icon="app"
-      shape="circle"
-      tClass="external-class"
-      theme="primary"
-    />
-    <t-button
-      icon="app"
-      shape="circle"
-      size="small"
-      tClass="external-class"
-      theme="primary"
-    />
-  </wx-view>
 </size>
 `;
diff --git a/src/button/_example/base/index.wxml b/src/button/_example/base/index.wxml
@@ -1,33 +1,8 @@
 <view class="box">
-  <t-button t-class="external-class" theme="primary" block disabled="{{disabled}}">强按钮</t-button>
-  <t-button t-class="external-class" theme="primary" variant="outline" block disabled="{{disabled}}">弱按钮</t-button>
-  <t-button t-class="external-class" variant="outline" block disabled="{{disabled}}">次按钮</t-button>
-  <t-button t-class="external-class" theme="primary" icon="app" variant="outline" block disabled="{{disabled}}"
-    >带图标按钮</t-button
-  >
-  <t-button t-class="external-class" theme="danger" block disabled="{{disabled}}">强告警按钮</t-button>
-  <t-button t-class="external-class" theme="danger" variant="outline" block disabled="{{disabled}}"
-    >弱告警按钮</t-button
-  >
+  <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>
-
-<view class="full-width">
-  <view class="box">
-    <t-button t-class="external-class" ghost block disabled="{{disabled}}">幽灵按钮</t-button>
-  </view>
-</view>
-
-<view class="box">
-  <t-button t-class="external-class" theme="primary" variant="text" block disabled="{{disabled}}">文字按钮</t-button>
-</view>
-<t-button t-class="external-class no-border-radius" theme="primary" size="large" block disabled="{{disabled}}"
-  >通栏按钮</t-button
->
-<t-button-group>
-  <t-button t-class="external-class no-border-radius no-border" size="large" block disabled="{{disabled}}"
-    >次按钮</t-button
-  >
-  <t-button t-class="external-class no-border-radius" theme="primary" size="large" block disabled="{{disabled}}"
-    >主按钮</t-button
-  >
-</t-button-group>
diff --git a/src/button/_example/base/index.wxss b/src/button/_example/base/index.wxss
@@ -2,12 +2,12 @@
   margin: 0 32rpx;
 }
 
-.external-class {
-  margin-top: 32rpx;
+.box t-button + t-button {
+  margin-left: 32rpx;
 }
 
 .full-width {
-  background: rgba(0, 0, 0, 0.4);
+  background: #181818;
   padding: 16rpx 0;
   margin-top: 32rpx;
 }

diff --git a/src/button/_example/block-btn/index.js b/src/button/_example/block-btn/index.js
@@ -0,0 +1 @@
+Component({});
diff --git a/src/button/_example/block-btn/index.json b/src/button/_example/block-btn/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-button": "tdesign-miniprogram/button/button"
+  }
+}
diff --git a/src/button/_example/block-btn/index.wxml b/src/button/_example/block-btn/index.wxml
@@ -0,0 +1,3 @@
+<view class="box">
+  <t-button theme="primary" size="large" block>填充按钮</t-button>
+</view>
diff --git a/src/button/_example/block-btn/index.wxss b/src/button/_example/block-btn/index.wxss
@@ -0,0 +1,3 @@
+.box {
+  margin: 0 32rpx;
+}
diff --git a/src/button/_example/button.json b/src/button/_example/button.json
@@ -3,6 +3,11 @@
   "usingComponents": {
     "base": "./base",
     "size": "./size",
-    "icon-btn": "./icon-btn"
+    "icon-btn": "./icon-btn",
+    "group-btn": "./group-btn",
+    "block-btn": "./block-btn",
+    "ghost-btn": "./ghost-btn",
+    "shape": "./shape",
+    "theme": "./theme"
   }
 }