Dialog: add chalk theme

examples/docs/en-US/dialog.md

@@ -24,6 +24,7 @@
         dialogFormVisible: false,
         outerVisible: false,
         innerVisible: false,
+        centerDialogVisible: false,
         form: {
           name: '',
           region: '',
@@ -209,10 +210,10 @@ If a Dialog is nested in another Dialog, `append-to-body` is required.
 <template>
   <el-button type="text" @click="outerVisible = true">open the outer Dialog</el-button>
   
-  <el-dialog title="外层 Dialog" :visible.sync="outerVisible">
+  <el-dialog title="Outter Dialog" :visible.sync="outerVisible">
     <el-dialog
         width="30%"
-        title="内层 Dialog"
+        title="Inner Dialog"
         :visible.sync="innerVisible"
         append-to-body>
     </el-dialog>
@@ -236,6 +237,40 @@ If a Dialog is nested in another Dialog, `append-to-body` is required.
 ```
 :::
 
+:::
+
+### Align in center
+Make the dialog's header & footer align in center
+
+:::demo Set `center` to `true` will align dialog's header & footer in center，while the content of it will not, to prevent breaking your own content's layout
+
+```html
+<el-button type="text" @click="centerDialogVisible = true">Click to open the Dialog</el-button>
+
+<el-dialog
+  title="Warning"
+  :visible.sync="centerDialogVisible"
+  width="30%"
+  center>
+  <span>It should be noted that the content will not be aligned in center by default</span>
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="centerDialogVisible = false">Cancel</el-button>
+    <el-button type="primary" @click="centerDialogVisible = false">Confirm</el-button>
+  </span>
+</el-dialog>
+
+<script>
+  export default {
+    data() {
+      return {
+        centerDialogVisible: false
+      };
+    }
+  };
+</script>
+```
+:::
+
 :::tip
 If the variable bound to `visible` is managed in Vuex store, the `.sync` can not work properly. In this case, please remove the `.sync` modifier, listen to `open` and `close` events of Dialog, and commit Vuex mutations to update the value of that variable in the event handlers.
 :::
@@ -258,6 +293,7 @@ If the variable bound to `visible` is managed in Vuex store, the `.sync` can not
 | close-on-press-escape | whether the Dialog can be closed by pressing ESC | boolean    | — | true |
 | show-close | whether to show a close button | boolean    | — | true |
 | before-close | callback before Dialog closes, and it will prevent Dialog from closing | function(done)，done is used to close the Dialog | — | — |
+| center | whether to align the header and footer in center | function(done)，done is used to close the Dialog | — | — |
 
 ### Slot
 

examples/docs/zh-CN/dialog.md

@@ -24,6 +24,7 @@
         dialogFormVisible: false,
         outerVisible: false,
         innerVisible: false,
+        centerDialogVisible: false,
         form: {
           name: '',
           region: '',
@@ -233,6 +234,38 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
 ```
 :::
 
+### 居中布局
+标题和底部采用居中布局
+
+:::demo 将 `center` 为 `true` 将使标题和底部居中，同时为了防止破坏弹窗内容的布局，内容默认是不局中的
+
+```html
+<el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>
+
+<el-dialog
+  title="提示"
+  :visible.sync="centerDialogVisible"
+  width="30%"
+  center>
+  <span>需要注意的是内容是默认不居中的</span>
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="centerDialogVisible = false">取 消</el-button>
+    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
+  </span>
+</el-dialog>
+
+<script>
+  export default {
+    data() {
+      return {
+        centerDialogVisible: false
+      };
+    }
+  };
+</script>
+```
+:::
+
 :::tip
 如果 `visible` 属性绑定的变量位于 Vuex 的 store 内，那么 `.sync` 不会正常工作。此时需要去除 `.sync` 修饰符，同时监听 Dialog 的 `open` 和 `close` 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 `visible` 属性绑定的变量的值。
 :::
@@ -254,6 +287,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
 | close-on-press-escape | 是否可以通过按下 ESC 关闭 Dialog | boolean    | — | true |
 | show-close | 是否显示关闭按钮 | boolean    | — | true |
 | before-close | 关闭前的回调，会暂停 Dialog 的关闭 | function(done)，done 用于关闭 Dialog | — | — |
+| center | 是否对头部和底部采用居中布局 | boolean | — | false |
 
 ### Slot
 | name | 说明 |

packages/dialog/src/component.vue

@@ -3,7 +3,7 @@
     <div class="el-dialog__wrapper" v-show="visible" @click.self="handleWrapperClick">
       <div
         class="el-dialog"
-        :class="[{ 'is-fullscreen': fullscreen }, customClass]"
+        :class="[{ 'is-fullscreen': fullscreen, 'el-dialog--center': center }, customClass]"
         ref="dialog"
         :style="style">
         <div class="el-dialog__header">
@@ -91,7 +91,11 @@
         type: String,
         default: '15vh'
       },
-      beforeClose: Function
+      beforeClose: Function,
+      center: {
+        type: Boolean,
+        default: false
+      }
     },
 
     data() {

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

@@ -83,6 +83,7 @@ $--font-size-large: 18px;
 $--font-color-base: #5a5e66;
 $--font-color-disabled-base: #bbb;
 $--font-weight-primary: 500;
+$--font-line-height-primary: 24px;
 
 /* Size
 -------------------------- */
@@ -457,10 +458,11 @@ $--switch-button-size: 16px;
 -------------------------- */
 $--dialog-background-color: $--color-primary-light-4;
 $--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-$--dialog-close-color: $--color-text-placeholder;
 $--dialog-close-hover-color: $--color-primary;
-$--dialog-title-font-size: 16px;
+$--dialog-title-font-size: $--font-size-large;
 $--dialog-font-size: 14px;
+$--dialog-line-height: $--font-line-height-primary;
+$--dialog-padding-primary: 15px;
 
 /* Table
 -------------------------- */

packages/theme-chalk/src/dialog.scss

@@ -32,48 +32,70 @@
   }
 
   @include e(header) {
-    padding: 20px 20px 0;
+    padding: $--dialog-padding-primary;
-    @include utils-clearfix;
+    padding-bottom: 10px;
   }
 
   @include e(headerbtn) {
-    float: right;
+    position: absolute;
+    top: $--dialog-padding-primary;
+    right: $--dialog-padding-primary;
+    padding: 0;
     background: transparent;
     border: none;
     outline: none;
-    padding: 0;
     cursor: pointer;
-    font-size: 16px;
+    font-size: 12px;
 
     .el-dialog__close {
-      color: $--dialog-close-color;
+      color: $--color-info;
     }
 
     &:focus, &:hover {
       .el-dialog__close {
-        color: $--dialog-close-hover-color;
+        color: $--color-primary;
       }
     }
   }
 
   @include e(title) {
-    line-height: 1;
+    line-height: $--dialog-line-height;
     font-size: $--dialog-title-font-size;
-    font-weight: bold;
+    color: $--color-text-primary;
-    color: $--color-black;
   }
 
   @include e(body) {
     padding: 30px 20px;
-    color: $--color-black;
+    color: $--color-text-regular;
+    line-height: $--dialog-line-height;
     font-size: $--dialog-font-size;
   }
 
   @include e(footer) {
-    padding: 10px 20px 15px;
+    padding: $--dialog-padding-primary;
+    padding-top: 10px;
     text-align: right;
     box-sizing: border-box;
   }
+
+  // 内容居中布局
+  @include m(center) {
+    text-align: center;
+
+    @include e(header) {
+      padding-top: 30px;
+    }
+
+    @include e(body) {
+      text-align: initial;
+      padding: 25px ($--dialog-padding-primary + 12px) 30px;
+    }
+
+    @include e(footer) {
+      text-align: inherit;
+      padding-bottom: 30px;
+    }
+  }
 }
 
 .dialog-fade-enter-active {