bugfix] Toast: max width of text type (#896)

example/pages/button/index.wxml

@@ -1,30 +1,30 @@
 <demo-section>
   <demo-block title="按钮类型" padding>
     <view class="row">
-      <van-button type="primary" custom-class="demo-margin-right">主要按钮</van-button>
+      <van-button type="primary" class="demo-margin-right">主要按钮</van-button>
       <van-button type="danger">危险按钮</van-button>
     </view>
-    <van-button custom-class="demo-margin-right">默认按钮</van-button>
+    <van-button class="demo-margin-right">默认按钮</van-button>
     <van-button type="warning">警告按钮</van-button>
   </demo-block>
 
   <demo-block title="朴素按钮" padding>
-    <van-button type="primary" plain custom-class="demo-margin-right">朴素按钮</van-button>
+    <van-button type="primary" plain class="demo-margin-right">朴素按钮</van-button>
     <van-button type="danger" plain>朴素按钮</van-button>
   </demo-block>
 
   <demo-block title="禁用状态" padding>
-    <van-button type="primary" disabled custom-class="demo-margin-right">禁用状态</van-button>
+    <van-button type="primary" disabled class="demo-margin-right">禁用状态</van-button>
     <van-button type="danger" disabled>禁用状态</van-button>
   </demo-block>
 
   <demo-block title="加载状态" padding>
-    <van-button loading type="primary" custom-class="demo-margin-right" loading-class="loading" />
+    <van-button loading type="primary" class="demo-margin-right" loading-class="loading" />
     <van-button loading type="danger" loading-class="loading" />
   </demo-block>
 
   <demo-block title="按钮形状" padding>
-    <van-button type="primary" square custom-class="demo-margin-right">方形按钮</van-button>
+    <van-button type="primary" square class="demo-margin-right">方形按钮</van-button>
     <van-button type="danger" round>圆形按钮</van-button>
   </demo-block>
 

example/pages/dialog/index.wxml

@@ -2,7 +2,7 @@
   <van-button
     plain
     type="primary"
-    custom-class="demo-margin-right"
+    class="demo-margin-right"
     bind:click="onClickAlert"
   >
     消息提示

example/pages/panel/index.wxml

@@ -8,7 +8,7 @@
   <van-panel title="标题" desc="描述信息" status="状态" use-footer-slot>
     <view class="content">内容</view>
     <view slot="footer" class="footer">
-      <van-button size="small" custom-class="demo-margin-right">按钮</van-button>
+      <van-button size="small" class="demo-margin-right">按钮</van-button>
       <van-button size="small" type="danger">按钮</van-button>
     </view>
   </van-panel>

example/pages/popup/index.wxml

@@ -10,7 +10,7 @@
 </demo-block>
 
 <demo-block title="弹出位置" padding>
-  <van-button bind:click="toggleBottomPopup" custom-class="demo-margin-right">底部弹出</van-button>
+  <van-button bind:click="toggleBottomPopup" class="demo-margin-right">底部弹出</van-button>
 
   <van-popup
     show="{{ show.bottom }}"
@@ -21,7 +21,7 @@
     内容
   </van-popup>
 
-  <van-button bind:click="toggleTopPopup" custom-class="demo-margin-right">顶部弹出</van-button>
+  <van-button bind:click="toggleTopPopup" class="demo-margin-right">顶部弹出</van-button>
   <van-popup
     show="{{ show.top }}"
     position="top"
@@ -39,7 +39,7 @@
     custom-class="right"
     bind:close="toggleRightPopup"
   >
-    <van-button bind:click="toggleRightPopup" custom-class="demo-margin-right">关闭弹层</van-button>
+    <van-button bind:click="toggleRightPopup" class="demo-margin-right">关闭弹层</van-button>
 
     <van-button bind:click="toggleRightPopup2">右侧弹出</van-button>
     <van-popup

example/pages/toast/index.js

@@ -3,7 +3,11 @@ import Toast from '../../dist/toast/toast';
 
 Page({
   showToast() {
-    Toast('我是提示文案，建议不超过十五字~');
+    Toast('提示内容');
+  },
+
+  showLongToast() {
+    Toast('这是一条长文字提示，超过一定字数就会换行');
   },
 
   showLoadingToast() {

example/pages/toast/index.wxml

@@ -1,5 +1,6 @@
 <demo-block title="文字提示" padding>
-  <van-button bind:tap="showToast">文字提示</van-button>
+  <van-button bind:tap="showToast" class="demo-margin-right">文字提示</van-button>
+  <van-button bind:tap="showLongToast">长文字提示</van-button>
 </demo-block>
 
 <demo-block title="加载提示" padding>
@@ -7,7 +8,7 @@
 </demo-block>
 
 <demo-block title="成功/失败提示" padding>
-  <van-button bind:tap="showSuccessToast" custom-class="demo-margin-right">成功提示</van-button>
+  <van-button bind:tap="showSuccessToast" class="demo-margin-right">成功提示</van-button>
   <van-button bind:tap="showFailToast">失败提示</van-button>
 </demo-block>
 

packages/toast/README.md

@@ -32,7 +32,6 @@ Toast.loading({
 });
 ```
 
-
 #### 成功/失败提示
 
 ```javascript
@@ -40,7 +39,6 @@ Toast.success('成功文案');
 Toast.fail('失败文案');
 ```
 
-
 #### 高级用法
 
 ```javascript

packages/toast/index.less

@@ -3,9 +3,9 @@
 .van-toast {
   display: flex;
   color: @white;
-  font-size: 12px;
+  font-size: 14px;
-  line-height: 1.2;
+  line-height: 20px;
-  border-radius: 5px;
+  border-radius: 4px;
   word-break: break-all;
   align-items: center;
   justify-content: center;
@@ -16,13 +16,16 @@
   &__container {
     top: 50%;
     left: 50%;
+    max-width: 80%;
     position: fixed;
+    // hack for avoid max-width when use left & fixed
+    width: fit-content; 
     transform: translate(-50%, -50%);
   }
 
   &--text {
-    padding: 12px;
+    min-width: 120px;
-    min-width: 220px;
+    padding: 8px 12px;
   }
 
   &--icon {