style(Dialog): fix round-button theme (#6934)

* style(Dialog): fix round-button theme

* style(Dialog): improve round-button theme

src/dialog/Dialog.js

@@ -12,11 +12,8 @@ export default createComponent({
 
   props: {
     title: String,
+    theme: String,
     width: [Number, String],
-    theme: {
-      type: String,
-      default: 'default',
-    },
     message: String,
     className: null,
     callback: Function,
@@ -108,14 +105,15 @@ export default createComponent({
 
     genRoundButtons() {
       return (
-        <GoodsAction class={bem('footer', [this.theme])}>
+        <GoodsAction class={bem('footer')}>
           {this.showCancelButton && (
             <GoodsActionButton
               size="large"
               type="warning"
-              loading={this.loading.cancel}
               text={this.cancelButtonText || t('cancel')}
-              style={{ color: this.cancelButtonColor }}
+              class={bem('cancel')}
+              color={this.cancelButtonColor}
+              loading={this.loading.cancel}
               onClick={() => {
                 this.handleAction('cancel');
               }}
@@ -125,9 +123,10 @@ export default createComponent({
             <GoodsActionButton
               size="large"
               type="danger"
-              loading={this.loading.confirm}
               text={this.confirmButtonText || t('confirm')}
-              style={{ color: this.confirmButtonColor }}
+              class={bem('confirm')}
+              color={this.confirmButtonColor}
+              loading={this.loading.confirm}
               onClick={() => {
                 this.handleAction('confirm');
               }}
@@ -141,7 +140,7 @@ export default createComponent({
       const multiple = this.showCancelButton && this.showConfirmButton;
 
       return (
-        <div class={[BORDER_TOP, bem('footer', { buttons: multiple })]}>
+        <div class={[BORDER_TOP, bem('footer')]}>
           {this.showCancelButton && (
             <Button
               size="large"
@@ -220,7 +219,7 @@ export default createComponent({
           vShow={this.value}
           role="dialog"
           aria-labelledby={this.title || message}
-          class={[bem(), this.className]}
+          class={[bem([this.theme]), this.className]}
           style={{ width: addUnit(this.width) }}
         >
           {Title}

src/dialog/demo/index.vue

@@ -52,18 +52,18 @@ export default {
     'zh-CN': {
       alert1: '提示弹窗',
       alert2: '提示弹窗（无标题）',
-      round: '圆角按钮样式',
       confirm: '确认弹窗',
       asyncClose: '异步关闭',
+      roundButton: '圆角按钮样式',
       componentCall: '组件调用',
       content: '代码是写出来给人看的，附带能在机器上运行',
     },
     'en-US': {
       alert1: 'Alert',
       alert2: 'Alert without title',
-      round: 'Round Button Style',
       confirm: 'Confirm dialog',
       asyncClose: 'Async Close',
+      roundButton: 'Round Button Style',
       componentCall: 'Component Call',
     },
   },

src/dialog/index.js

@@ -48,12 +48,12 @@ Dialog.defaultOptions = {
   value: true,
   title: '',
   width: '',
+  theme: null,
   message: '',
   overlay: true,
   className: '',
   allowHtml: true,
   lockScroll: true,
-  theme: 'default',
   transition: 'van-dialog-bounce',
   beforeClose: null,
   overlayClass: '',

src/dialog/index.less

@@ -57,25 +57,15 @@
   }
 
   &__footer {
+    display: flex;
     overflow: hidden;
     user-select: none;
-
-    &&--round {
-      position: relative;
-      height: auto;
-      padding: 0 @padding-lg - 5px @padding-md;
-    }
-
-    &--buttons {
-      display: flex;
-
-      .van-button {
-        flex: 1;
-      }
-    }
   }
 
-  .van-button {
+  &__confirm,
+  &__cancel {
+    flex: 1;
+    margin: 0;
     border: 0;
   }
 
@@ -86,6 +76,22 @@
     }
   }
 
+  &--round-button {
+    .van-dialog__footer {
+      position: relative;
+      height: auto;
+      padding: 0 @padding-lg @padding-md;
+    }
+
+    .van-dialog__message {
+      color: @text-color;
+    }
+
+    .van-dialog__confirm {
+      color: @white;
+    }
+  }
+
   &-bounce-enter {
     transform: translate3d(-50%, -50%, 0) scale(0.7);
     opacity: 0;

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

@@ -38,7 +38,7 @@ exports[`renders demo correctly 1`] = `
     <div role="dialog" aria-labelledby="标题" class="van-dialog" style="display: none;" name="van-dialog-bounce">
       <div class="van-dialog__header">标题</div>
       <div class="van-dialog__content"><img src="https://img.yzcdn.cn/vant/apple-3.jpg"></div>
-      <div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel">
+      <div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__cancel">
           <div class="van-button__content"><span class="van-button__text">取消</span></div>
         </button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left">
           <div class="van-button__content"><span class="van-button__text">确认弹窗</span></div>

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

@@ -4,7 +4,7 @@ exports[`allow-html prop 1`] = `<div class="van-dialog__message">&lt;span&gt;tex
 
 exports[`button color 1`] = `
 <div role="dialog" class="van-dialog" name="van-dialog-bounce">
-  <div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel" style="color: white;">
+  <div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__cancel" style="color: white;">
       <div class="van-button__content"><span class="van-button__text">取消</span></div>
     </button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left" style="color: red;">
       <div class="van-button__content"><span class="van-button__text">确认</span></div>
@@ -14,7 +14,7 @@ exports[`button color 1`] = `
 
 exports[`button text 1`] = `
 <div role="dialog" class="van-dialog" name="van-dialog-bounce">
-  <div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel">
+  <div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__cancel">
       <div class="van-button__content"><span class="van-button__text">Custom cancel</span></div>
     </button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left">
       <div class="van-button__content"><span class="van-button__text">Custom confirm</span></div>