MessageBox: add chalk theme (#7029)

* Message Box: add chalk theme

* Message Box: doc fix

* Message Box: change prop name into center

examples/docs/en-US/message-box.md

@@ -97,6 +97,25 @@
         this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
           dangerouslyUseHTMLString: true
         });
+      },
+
+      open6() {
+        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
+          confirmButtonText: 'OK',
+          cancelButtonText: 'Cancel',
+          type: 'warning',
+          center: true
+        }).then(() => {
+          this.$message({
+            type: 'success',
+            message: 'Delete completed'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: 'Delete canceled'
+          });
+        });
       }
     }
   };
@@ -292,6 +311,43 @@ Can be customized to show various content.
 ```
 :::
 
+### Align in center
+Align the content in center
+
+:::demo set `center` to `true` will align the content in center
+
+```html
+<template>
+  <el-button type="text" @click="open6">Click to open Message Box</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open6() {
+        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
+          confirmButtonText: 'OK',
+          cancelButtonText: 'Cancel',
+          type: 'warning',
+          center: true
+        }).then(() => {
+          this.$message({
+            type: 'success',
+            message: 'Delete completed'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: 'Delete canceled'
+          });
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
 :::warning
 Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.
 :::
@@ -344,4 +400,6 @@ Although `message` property supports HTML strings, dynamically rendering arbitra
 | inputValue | initial value of input | string | — | — |
 | inputPattern | regexp for the input | regexp | — | — |
 | inputValidator | validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage | function | — | — |
-| inputErrorMessage | error message when validation fails | string | — | Illegal input |
+| inputErrorMessage | error message when validation fails | string | — | Illegal input |
+| center | whether to align the content in center | boolean | — | false |
+| roundButton | whether to use round button | boolean | — | false |

examples/docs/zh-CN/message-box.md

@@ -98,6 +98,25 @@
         this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
           dangerouslyUseHTMLString: true
         });
+      },
+
+      open6() {
+        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+          center: true
+        }).then(() => {
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });
+        });
       }
     }
   };
@@ -290,6 +309,43 @@
 ```
 :::
 
+### 居中布局
+内容支持居中布局
+
+:::demo 将 `center` 为 `true` 将采用居中布局
+
+```html
+<template>
+  <el-button type="text" @click="open6">点击打开 Message Box</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open6() {
+        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+          center: true
+        }).then(() => {
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
 :::warning
 `message` 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此在 `dangerouslyUseHTMLString` 打开的情况下，请确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。
 :::
@@ -339,3 +395,5 @@ import { MessageBox } from 'element-ui';
 | inputPattern | 输入框的校验表达式 | regexp | — | — |
 | inputValidator | 输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage | function | — | — |
 | inputErrorMessage | 校验未通过时的提示文本 | string | — | 输入的数据不合法! |
+| center | 是否居中布局 | boolean | — | false |
+| roundButton | 是否使用圆角按钮 | boolean | — | false |

packages/message-box/src/main.js

@@ -25,7 +25,9 @@ const defaults = {
   cancelButtonClass: '',
   customClass: '',
   beforeClose: null,
-  dangerouslyUseHTMLString: false
+  dangerouslyUseHTMLString: false,
+  center: false,
+  roundButton: false
 };
 
 import Vue from 'vue';

packages/message-box/src/main.vue

@@ -1,17 +1,20 @@
 <template>
   <transition name="msgbox-fade">
     <div class="el-message-box__wrapper" tabindex="-1" v-show="visible" @click.self="handleWrapperClick">
-      <div class="el-message-box" :class="customClass">
+      <div class="el-message-box" :class="[customClass, center && 'el-message-box--center']">
         <div class="el-message-box__header" v-if="title !== undefined">
-          <div class="el-message-box__title">{{ title }}</div>
+          <div class="el-message-box__title">
+            <div class="el-message-box__status" :class="[ typeClass ]" v-if="typeClass && center"></div>
+            <span>{{ title }}</span>
+          </div>
           <button type="button" class="el-message-box__headerbtn" aria-label="Close" 
                   v-if="showClose" @click="handleAction('cancel')">
             <i class="el-message-box__close el-icon-close"></i>
           </button>
         </div>
         <div class="el-message-box__content" v-if="message !== ''">
-          <div class="el-message-box__status" :class="[ typeClass ]"></div>
-          <div class="el-message-box__message" :style="{ 'margin-left': typeClass ? '50px' : '0' }">
+          <div class="el-message-box__status" :class="[ typeClass ]" v-if="typeClass && !center"></div>
+          <div class="el-message-box__message">
             <slot>
               <p v-if="!dangerouslyUseHTMLString">{{ message }}</p>
               <p v-else v-html="message"></p>
@@ -27,6 +30,8 @@
             :loading="cancelButtonLoading"
             :class="[ cancelButtonClasses ]"
             v-show="showCancelButton"
+            :round="roundButton"
+            size="small"
             @click.native="handleAction('cancel')">
             {{ cancelButtonText || t('el.messagebox.cancel') }}
           </el-button>
@@ -35,6 +40,8 @@
             ref="confirm"
             :class="[ confirmButtonClasses ]"
             v-show="showConfirmButton"
+            :round="roundButton"
+            size="small"
             @click.native="handleAction('confirm')">
             {{ confirmButtonText || t('el.messagebox.confirm') }}
           </el-button>
@@ -81,6 +88,14 @@
       },
       closeOnHashChange: {
         default: true
+      },
+      center: {
+        default: false,
+        type: Boolean
+      },
+      roundButton: {
+        default: false,
+        type: Boolean
       }
     },
 

packages/theme-chalk/src/common/var.scss

@@ -79,6 +79,7 @@ $--fill-base: $--color-white;
 -------------------------- */
 $--font-size-base: 14px;
 $--font-size-small: 13px;
+$--font-size-large: 18px;
 $--font-color-base: #5a5e66;
 $--font-color-disabled-base: #bbb;
 $--font-weight-primary: 500;
@@ -251,11 +252,12 @@ $--alert-icon-large-size: 28px;
 /* Message Box
 -------------------------- */
 $--msgbox-width: 420px;
-$--msgbox-border-radius: 3px;
-$--msgbox-font-size: 16px;
-$--msgbox-content-font-size: 14px;
-$--msgbox-content-color: $--link-color;
+$--msgbox-border-radius: 4px;
+$--msgbox-font-size: $--font-size-large;
+$--msgbox-content-font-size: $--font-size-base;
+$--msgbox-content-color: $--color-text-regular;
 $--msgbox-error-font-size: 12px;
+$--msgbox-padding-primary: 15px;
 
 $--msgbox-success-color: $--color-success;
 $--msgbox-info-color: $--color-info;

packages/theme-chalk/src/message-box.scss

@@ -5,15 +5,19 @@
 @import "input";
 
 @include b(message-box) {
-  text-align: left;
   display: inline-block;
+  width: $--msgbox-width;
+  padding-bottom: 10px;
   vertical-align: middle;
   background-color: $--color-white;
-  width: $--msgbox-width;
   border-radius: $--msgbox-border-radius;
+  border: 1px solid $--border-color-lighter;
   font-size: $--msgbox-font-size;
+  box-shadow: $--box-shadow-light;
+  text-align: left;
   overflow: hidden;
   backface-visibility: hidden;
+
   @include e(wrapper) {
     position: fixed;
     top: 0;
@@ -21,6 +25,7 @@
     left: 0;
     right: 0;
     text-align: center;
+
     &::after {
       content: "";
       display: inline-block;
@@ -32,21 +37,31 @@
 
   @include e(header) {
     position: relative;
-    padding: 20px 20px 0;
+    padding: $--msgbox-padding-primary;
+    padding-bottom: 10px;
+  }
+
+  @include e(title) {
+    padding-left: 0;
+    margin-bottom: 0;
+    font-size: $--msgbox-font-size;
+    line-height: 1;
+    color: $--color-text-primary;
   }
 
   @include e(headerbtn) {
     position: absolute;
-    top: 19px;
-    right: 20px;
-    background: transparent;
+    top: $--msgbox-padding-primary;
+    right: $--msgbox-padding-primary;
+    padding: 0;
     border: none;
     outline: none;
-    padding: 0;
+    background: transparent;
+    font-size: 12px;
     cursor: pointer;
 
     .el-message-box__close {
-      color: #999;
+      color: $--color-info;
     }
 
     &:focus, &:hover {
@@ -58,14 +73,15 @@
   }
 
   @include e(content) {
-    padding: 30px 20px;
+    position: relative;
+    padding: 10px $--msgbox-padding-primary;
     color: $--msgbox-content-color;
     font-size: $--msgbox-content-font-size;
-    position: relative;
   }
 
   @include e(input) {
     padding-top: 15px;
+
     & input.invalid {
       border-color: $--color-danger;
       &:focus {
@@ -74,20 +90,37 @@
     }
   }
 
-  @include e(errormsg) {
-    color: $--color-danger;
-    font-size: $--msgbox-error-font-size;
-    min-height: 18px;
-    margin-top: 2px;
-  }
+  @include e(status) {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 24px !important;
 
-  @include e(title) {
-    padding-left: 0;
-    margin-bottom: 0;
-    font-size: $--msgbox-font-size;
-    font-weight: bold;
-    height: 18px;
-    color: #333;
+    &::before {
+      // 防止图标切割
+      padding-left: 1px;
+    }
+
+    + .el-message-box__message {
+      padding-left: 36px;
+      padding-right: 12px;
+    }
+
+    &.el-icon-circle-check {
+      color: $--msgbox-success-color;
+    }
+
+    &.el-icon-information {
+      color: $--msgbox-info-color;
+    }
+
+    &.el-icon-warning {
+      color: $--msgbox-warning-color;
+    }
+
+    &.el-icon-circle-cross {
+      color: $--msgbox-danger-color;
+    }
   }
 
   @include e(message) {
@@ -95,12 +128,19 @@
 
     & p {
       margin: 0;
-      line-height: 1.4;
+      line-height: 24px;
     }
   }
 
+  @include e(errormsg) {
+    color: $--color-danger;
+    font-size: $--msgbox-error-font-size;
+    min-height: 18px;
+    margin-top: 2px;
+  }
+
   @include e(btns) {
-    padding: 10px 20px 15px;
+    padding: 5px 15px 0;
     text-align: right;
 
     & button:nth-child(2) {
@@ -112,26 +152,42 @@
     flex-direction: row-reverse;
   }
 
-  @include e(status) {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 36px !important;
+  // centerAlign 布局
+  @include m(center) {
+    padding-bottom: 30px;
 
-    &.el-icon-circle-check {
-      color: $--msgbox-success-color;
+    @include e(header) {
+      padding-top: 30px;
     }
 
-    &.el-icon-information {
-      color: $--msgbox-info-color;
+    @include e(title) {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
 
-    &.el-icon-warning {
-      color: $--msgbox-warning-color;
+    @include e(status) {
+      position: relative;
+      top: auto;
+      padding-right: 5px;
+      text-align: center;
+      transform: translateY(-1px);
     }
 
-    &.el-icon-circle-cross {
-      color: $--msgbox-danger-color;
+    @include e(message) {
+      margin-left: 0;
+    }
+
+    @include e((btns, content)) {
+      text-align: center;
+    }
+
+    @include e(content) {
+      $padding-horizontal: $--msgbox-padding-primary + 12px;
+
+      padding-left: $padding-horizontal;
+      padding-right: $padding-horizontal;
     }
   }
 }