fix(Button): update demo style (#2811)

Author: anlyyao

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

@@ -169,14 +169,12 @@ exports[`Button Button icon-btn demo works fine 1`] = `
     class="button-example"
   >
     <t-button
-      class="margin"
       content="填充按钮"
       icon="app"
       size="large"
       theme="primary"
     />
     <t-button
-      class="margin"
       loading="{{true}}"
       size="large"
       theme="primary"
@@ -185,7 +183,6 @@ exports[`Button Button icon-btn demo works fine 1`] = `
     </t-button>
     <t-button
       ariaLabel="搜索"
-      class="margin"
       icon="search"
       shape="square"
       size="large"

src/button/_example/base/index.json

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

src/button/_example/base/index.wxss

@@ -1,4 +1,10 @@
 .button-example {
   margin: 32rpx;
   display: flex;
+  justify-content: space-between;
+}
+
+.button-example:after {
+  content: '';
+  flex: auto;
 }

src/button/_example/button.less

@@ -1,3 +1,11 @@
 page {
   background-color: #fff;
 }
+
+.t-button {
+  margin-right: 32rpx;
+}
+
+.t-button:last-child {
+  margin-right: 0;
+}

src/button/_example/disabled/index.wxss

@@ -1,4 +1,10 @@
 .button-example {
   margin: 32rpx;
   display: flex;
+  justify-content: space-between;
+}
+
+.button-example:after {
+  content: '';
+  flex: auto;
 }

src/button/_example/group-btn/index.wxss

@@ -1,9 +1,4 @@
 .button-example {
   margin: 32rpx;
   display: flex;
-  justify-content: space-between;
-}
-
-.group-btn {
-  margin: 0 16rpx;
 }

src/button/_example/icon-btn/index.wxml

@@ -1,8 +1,8 @@
 <view class="button-example">
-  <t-button theme="primary" icon="app" content="填充按钮" size="large" class="margin"></t-button>
-  <t-button wx:if="{{skylineRender}}" theme="light" size="large" class="margin">
-    <t-loading t-class="loading" theme="spinner" size="40rpx" class="wrapper" text="加载中..." />
+  <t-button theme="primary" icon="app" content="填充按钮" size="large"></t-button>
+  <t-button wx:if="{{skylineRender}}" theme="light" size="large">
+    <t-loading t-class="loading" theme="spinner" size="40rpx" text="加载中..." />
   </t-button>
-  <t-button wx:else theme="primary" size="large" loading class="margin">加载中</t-button>
-  <t-button theme="primary" icon="search" shape="square" size="large" class="margin" aria-label="搜索"></t-button>
+  <t-button wx:else theme="primary" size="large" loading>加载中</t-button>
+  <t-button theme="primary" icon="search" shape="square" size="large" aria-label="搜索"></t-button>
 </view>

src/button/_example/icon-btn/index.wxss

@@ -1,10 +1,12 @@
-.margin {
-  margin-left: 32rpx;
-}
-
 .button-example {
   margin: 32rpx;
   display: flex;
+  justify-content: space-between;
+}
+
+.button-example:after {
+  content: '';
+  flex: auto;
 }
 
 .button-example .loading {

src/button/_example/skyline/button.less

@@ -5,4 +5,13 @@ page {
 .button-example {
   margin: 32rpx;
   display: flex;
+  justify-content: space-between;
+}
+
+.t-button {
+  margin-right: 32rpx;
+}
+
+.t-button:last-child {
+  margin-right: 0;
 }

src/button/_example/theme/index.wxss

@@ -1,4 +1,5 @@
 .button-example {
   margin: 32rpx;
   display: flex;
+  justify-content: space-between;
 }