feat(Dialog): add new prop theme (#6921)

* feat(dialog): add new prop button-theme & change default confirm button text color

* test(dialog): update snapshot

* refactor(dialog): rename button-theme to theme

* refactor(dialog): add theme definition

* docs(dialog): add version tip & change default confirm-button-color

src/dialog/Dialog.js

@@ -2,6 +2,8 @@ import { createNamespace, addUnit } from '../utils';
 import { BORDER_TOP, BORDER_LEFT } from '../utils/constant';
 import { PopupMixin } from '../mixins/popup';
 import Button from '../button';
+import GoodsAction from '../goods-action';
+import GoodsActionButton from '../goods-action-button';
 
 const [createComponent, bem, t] = createNamespace('dialog');
 
@@ -11,6 +13,10 @@ export default createComponent({
   props: {
     title: String,
     width: [Number, String],
+    theme: {
+      type: String,
+      default: 'default',
+    },
     message: String,
     className: null,
     callback: Function,
@@ -100,6 +106,37 @@ export default createComponent({
       this.$emit('closed');
     },
 
+    genRoundButtons() {
+      return (
+        <GoodsAction class={bem('footer', [this.theme])}>
+          {this.showCancelButton && (
+            <GoodsActionButton
+              size="large"
+              type="warning"
+              loading={this.loading.cancel}
+              text={this.cancelButtonText || t('cancel')}
+              style={{ color: this.cancelButtonColor }}
+              onClick={() => {
+                this.handleAction('cancel');
+              }}
+            />
+          )}
+          {this.showConfirmButton && (
+            <GoodsActionButton
+              size="large"
+              type="danger"
+              loading={this.loading.confirm}
+              text={this.confirmButtonText || t('confirm')}
+              style={{ color: this.confirmButtonColor }}
+              onClick={() => {
+                this.handleAction('confirm');
+              }}
+            />
+          )}
+        </GoodsAction>
+      );
+    },
+
     genButtons() {
       const multiple = this.showCancelButton && this.showConfirmButton;
 
@@ -188,7 +225,7 @@ export default createComponent({
         >
           {Title}
           {this.genContent(title, messageSlot)}
-          {this.genButtons()}
+          {this.theme === 'round' ? this.genRoundButtons() : this.genButtons()}
         </div>
       </transition>
     );

src/dialog/README.md

@@ -30,6 +30,27 @@ Dialog.alert({
 });
 ```
 
+### Round Style
+
+use round style.
+
+```js
+Dialog.alert({
+  title: 'Title',
+  message: 'Content',
+  theme: 'round',
+}).then(() => {
+  // on close
+});
+
+Dialog.alert({
+  message: 'Content',
+  theme: 'round',
+}).then(() => {
+  // on close
+});
+```
+
 ### Confirm dialog
 
 Used to confirm some messages, including a confirm button and a cancel button.
@@ -120,13 +141,14 @@ export default {
 | width `v2.2.7` | Width | _number \| string_ | `320px` |
 | message | Message | _string_ | - |
 | messageAlign | Message text align，can be set to `left` `right` | _string_ | `center` |
+| theme `v2.10.0` | theme style，can be set to `round` | _string_ | `default` |
 | className | Custom className | _any_ | - |
 | showConfirmButton | Whether to show confirm button | _boolean_ | `true` |
 | showCancelButton | Whether to show cancel button | _boolean_ | `false` |
 | cancelButtonText | Cancel button text | _string_ | `Cancel` |
 | cancelButtonColor | Cancel button color | _string_ | `black` |
 | confirmButtonText | Confirm button text | _string_ | `Confirm` |
-| confirmButtonColor | Confirm button color | _string_ | `#1989fa` |
+| confirmButtonColor | Confirm button color | _string_ | `#ee0a24` |
 | overlay | Whether to show overlay | _boolean_ | `true` |
 | overlayClass `v2.2.7` | Custom overlay class | _string_ | - |
 | overlayStyle `v2.2.7` | Custom overlay style | _object_ | - |
@@ -147,12 +169,13 @@ export default {
 | width `v2.2.7` | Width | _number \| string_ | `320px` |
 | message | Message | _string_ | - |
 | message-align | Message align，can be set to `left` `right` | _string_ | `center` |
+| theme `v2.10.0` | theme style，can be set to `round` | _string_ | `default` |
 | show-confirm-button | Whether to show confirm button | _boolean_ | `true` |
 | show-cancel-button | Whether to show cancel button | _boolean_ | `false` |
 | cancel-button-text | Cancel button text | _string_ | `Cancel` |
 | cancel-button-color | Cancel button color | _string_ | `black` |
 | confirm-button-text | Confirm button text | _string_ | `Confirm` |
-| confirm-button-color | Confirm button color | _string_ | `#1989fa` |
+| confirm-button-color | Confirm button color | _string_ | `#ee0a24` |
 | overlay | Whether to show overlay | _boolean_ | `true` |
 | overlay-class `v2.2.7` | Custom overlay class | _string_ | - |
 | overlay-style `v2.2.7` | Custom overlay style | _object_ | - |

src/dialog/README.zh-CN.md

@@ -56,6 +56,27 @@ Dialog.alert({
 });
 ```
 
+### 圆角风格
+
+样式为圆角风格。
+
+```js
+Dialog.alert({
+  title: '标题',
+  message: '弹窗内容',
+  theme: 'round',
+}).then(() => {
+  // on close
+});
+
+Dialog.alert({
+  message: '弹窗内容',
+  theme: 'round',
+}).then(() => {
+  // on close
+});
+```
+
 ### 消息确认
 
 用于确认消息，包含取消和确认按钮。
@@ -150,11 +171,12 @@ export default {
 | width `v2.2.7` | 弹窗宽度，默认单位为`px` | _number \| string_ | `320px` |
 | message | 文本内容，支持通过`\n`换行 | _string_ | - |
 | messageAlign | 内容对齐方式，可选值为`left` `right` | _string_ | `center` |
+| theme | 样式风格，可选值为`round` | _string_ | `default` |
 | className | 自定义类名 | _any_ | - |
 | showConfirmButton | 是否展示确认按钮 | _boolean_ | `true` |
 | showCancelButton | 是否展示取消按钮 | _boolean_ | `false` |
 | confirmButtonText | 确认按钮文案 | _string_ | `确认` |
-| confirmButtonColor | 确认按钮颜色 | _string_ | `#1989fa` |
+| confirmButtonColor | 确认按钮颜色 | _string_ | `#ee0a24` |
 | cancelButtonText | 取消按钮文案 | _string_ | `取消` |
 | cancelButtonColor | 取消按钮颜色 | _string_ | `black` |
 | overlay | 是否展示遮罩层 | _boolean_ | `true` |
@@ -179,10 +201,11 @@ export default {
 | width `v2.2.7` | 弹窗宽度，默认单位为`px` | _number \| string_ | `320px` |
 | message | 文本内容，支持通过`\n`换行 | _string_ | - |
 | message-align | 内容对齐方式，可选值为`left` `right` | _string_ | `center` |
+| theme | 样式风格，可选值为`round` | _string_ | `default` |
 | show-confirm-button | 是否展示确认按钮 | _boolean_ | `true` |
 | show-cancel-button | 是否展示取消按钮 | _boolean_ | `false` |
 | confirm-button-text | 确认按钮文案 | _string_ | `确认` |
-| confirm-button-color | 确认按钮颜色 | _string_ | `#1989fa` |
+| confirm-button-color | 确认按钮颜色 | _string_ | `#ee0a24` |
 | cancel-button-text | 取消按钮文案 | _string_ | `取消` |
 | cancel-button-color | 取消按钮颜色 | _string_ | `black` |
 | overlay | 是否展示遮罩层 | _boolean_ | `true` |

src/dialog/demo/index.vue

@@ -9,6 +9,15 @@
       </van-button>
     </demo-block>
 
+    <demo-block :title="t('round')">
+      <van-button type="primary" @click="onClickRound">
+        {{ t('alert1') }}
+      </van-button>
+      <van-button type="primary" @click="onClickRound2">
+        {{ t('alert2') }}
+      </van-button>
+    </demo-block>
+
     <demo-block :title="t('confirm')">
       <van-button type="primary" @click="onClickConfirm">
         {{ t('confirm') }}
@@ -43,6 +52,7 @@ export default {
     'zh-CN': {
       alert1: '提示弹窗',
       alert2: '提示弹窗（无标题）',
+      round: '圆角样式',
       confirm: '确认弹窗',
       asyncClose: '异步关闭',
       componentCall: '组件调用',
@@ -79,6 +89,21 @@ export default {
       });
     },
 
+    onClickRound() {
+      this.$dialog.alert({
+        theme: 'round',
+        title: this.t('title'),
+        message: this.t('content'),
+      });
+    },
+
+    onClickRound2() {
+      this.$dialog.alert({
+        theme: 'round',
+        message: this.t('content'),
+      });
+    },
+
     onClickConfirm() {
       this.$dialog.confirm({
         title: this.t('title'),

src/dialog/index.js

@@ -53,6 +53,7 @@ Dialog.defaultOptions = {
   className: '',
   allowHtml: true,
   lockScroll: true,
+  theme: 'default',
   transition: 'van-dialog-bounce',
   beforeClose: null,
   overlayClass: '',

src/dialog/index.less

@@ -60,6 +60,12 @@
     overflow: hidden;
     user-select: none;
 
+    &&--round {
+      position: relative;
+      height: auto;
+      padding: 0 @padding-lg - 5px @padding-md;
+    }
+
     &--buttons {
       display: flex;
 

src/dialog/test/__snapshots__/demo.spec.js.snap

@@ -11,6 +11,15 @@ exports[`renders demo correctly 1`] = `
       提示弹窗（无标题）
     </span></div>
     </button></div>
+  <div><button class="van-button van-button--primary van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">
+      提示弹窗
+    </span></div>
+    </button> <button class="van-button van-button--primary van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">
+      提示弹窗（无标题）
+    </span></div>
+    </button></div>
   <div><button class="van-button van-button--primary van-button--normal">
       <div class="van-button__content"><span class="van-button__text">
       确认弹窗

src/style/var.less

@@ -314,7 +314,7 @@
 @dialog-message-max-height: 60vh;
 @dialog-has-title-message-text-color: @gray-7;
 @dialog-has-title-message-padding-top: @padding-sm;
-@dialog-confirm-button-text-color: @blue;
+@dialog-confirm-button-text-color: @red;
 
 // Divider
 @divider-margin: @padding-md 0;

types/dialog.d.ts

@@ -7,6 +7,7 @@ export type DialogOptions = {
   title?: string;
   width?: string | number;
   message?: string;
+  theme?: string;
   overlay?: boolean;
   className?: any;
   allowHtml?: boolean;