Message: add chalk theme

examples/docs/en-US/message.md

@@ -64,6 +64,13 @@
         });
       },
 
+      openCenter() {
+        this.$message({
+          message: 'Centered text',
+          center: true
+        });
+      },
+
       openHTML() {
         this.$message({
           dangerouslyUseHTMLString: true,
@@ -206,7 +213,32 @@ A close button can be added.
 ```
 :::
 
-### Use HTML String
+### Centered text
+Use the `center` attribute to center the text
+
+:::demo
+
+```html
+<template>
+  <el-button :plain="true" @click="openCenter">Centered text</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      openCenter() {
+        this.$message({
+          message: 'Centered text',
+          center: true
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Use HTML string
 `message` supports HTML string.
 
 :::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
@@ -259,6 +291,7 @@ You can call `Message.closeAll()` to manually close all the instances.
 | customClass | custom class name for Message | string | — | — |
 | duration | display duration, millisecond. If set to 0, it will not turn off automatically | number | — | 3000 |
 | showClose | whether to show a close button | boolean | — | false |
+| center | whether to center the text | boolean | — | false |
 | onClose | callback function when closed with the message instance as the parameter | function | — | — |
 
 ### Methods

examples/docs/en-US/notification.md

@@ -216,7 +216,7 @@ We provide four types: success, warning, info and error.
 ```
 :::
 
-### Custom Position
+### Custom position
 
 Notification can emerge from any corner you like.
 
@@ -314,7 +314,7 @@ Customize Notification's offset from the edge of the screen.
 ```
 :::
 
-### Use HTML String
+### Use HTML string
 `message` supports HTML string.
 
 ::: demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.

examples/docs/zh-CN/message.md

@@ -64,6 +64,13 @@
         });
       },
 
+      openCenter() {
+        this.$message({
+          message: '居中的文字',
+          center: true
+        });
+      },
+
       openHTML() {
         this.$message({
           dangerouslyUseHTMLString: true,
@@ -206,6 +213,31 @@
 ```
 :::
 
+### 文字居中
+使用 `center` 属性让文字水平居中
+
+:::demo
+
+```html
+<template>
+  <el-button :plain="true" @click="openCenter">文字居中</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      openCenter() {
+        this.$message({
+          message: '居中的文字',
+          center: true
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### 使用 HTML 片段
 `message` 属性支持传入 HTML 片段
 
@@ -259,6 +291,7 @@ import { Message } from 'element-ui';
 | customClass | 自定义类名 | string | — | — |
 | duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 3000 |
 | showClose | 是否显示关闭按钮 | boolean | — | false |
+| center | 文字是否居中 | boolean | — | false |
 | onClose | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | — | — |
 
 ### 方法

packages/message/src/main.vue

@@ -1,32 +1,31 @@
 <template>
   <transition name="el-message-fade">
     <div
-      class="el-message"
+      :class="[
-      :class="customClass"
+        'el-message',
+        type && !iconClass ? `el-message--${ type }` : '',
+        center ? 'is-center' : '',
+        customClass]"
       v-show="visible"
       @mouseenter="clearTimer"
       @mouseleave="startTimer">
-      <div :class="iconWrapClass">
+      <i :class="iconClass" v-if="iconClass"></i>
-        <i :class="iconClass" v-if="iconClass"></i>
+      <i :class="typeClass" v-else></i>
-        <i :class="typeClass" v-else></i>
+      <slot>
-      </div>
+        <p v-if="!dangerouslyUseHTMLString" class="el-message__content">{{ message }}</p>
-      <div class="el-message__group">
+        <p v-else v-html="message" class="el-message__content"></p>
-        <slot>
+      </slot>
-          <p v-if="!dangerouslyUseHTMLString">{{ message }}</p>
+      <i v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close"></i>
-          <p v-else v-html="message"></p>
-        </slot>
-        <div v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close"></div>
-      </div>
     </div>
   </transition>
 </template>
 
 <script type="text/babel">
   const typeMap = {
-    success: 'circle-check',
+    success: 'success',
-    info: 'information',
+    info: 'info',
     warning: 'warning',
-    error: 'circle-cross'
+    error: 'error'
   };
 
   export default {
@@ -42,7 +41,8 @@
         showClose: false,
         closed: false,
         timer: null,
-        dangerouslyUseHTMLString: false
+        dangerouslyUseHTMLString: false,
+        center: false
       };
     },
 
@@ -57,7 +57,7 @@
 
       typeClass() {
         return this.type && !this.iconClass
-          ? `el-message__type el-icon-${ typeMap[this.type] }-plain`
+          ? `el-message__icon el-icon-${ typeMap[this.type] }`
           : '';
       }
     },

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

@@ -259,10 +259,11 @@ $--msgbox-danger-color: $--color-danger;
 /* Message
 -------------------------- */
 $--message-shadow: $--box-shadow-base;
-$--message-min-width: 300px;
+$--message-min-width: 380px;
-$--message-padding: 10px 12px;
+$--message-padding: 15px 15px 15px 20px;
 $--message-content-color: $--color-text-regular;
 $--message-close-color: $--color-text-placeholder;
+$--message-close-size: 12px;
 $--message-close-hover-color: $--color-text-secondary;
 
 $--message-success-color: $--color-success;

packages/theme-chalk/src/icon.scss

@@ -1,7 +1,7 @@
 @font-face {
   font-family: 'element-icons';
-  src: url('fonts/element-icons.woff?t=1501582787037') format('woff'), /* chrome, firefox */
+  src: url('fonts/element-icons.woff?t=1504667669908') format('woff'), /* chrome, firefox */
-       url('fonts/element-icons.ttf?t=1501582787037') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+       url('fonts/element-icons.ttf?t=1504667669908') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
   font-weight: normal;
   font-style: normal;
 }
@@ -58,7 +58,7 @@
 .el-icon-star-off:before { content: "\e620"; }
 .el-icon-star-on:before { content: "\e621"; }
 .el-icon-time:before { content: "\e622"; }
-.el-icon-warning:before { content: "\e623"; }
+.el-icon-warning_default:before { content: "\e623"; }
 .el-icon-delete2:before { content: "\e624"; }
 .el-icon-upload2:before { content: "\e627"; }
 .el-icon-view:before { content: "\e626"; }
@@ -66,6 +66,10 @@
 .el-icon-circle-cross-plain:before { content: "\e628"; }
 .el-icon-information-plain:before { content: "\e629"; }
 .el-icon-warning-plain:before { content: "\e62a"; }
+.el-icon-info:before { content: "\e62b"; }
+.el-icon-error:before { content: "\e62c"; }
+.el-icon-success:before { content: "\e62d"; }
+.el-icon-warning:before { content: "\e62e"; }
 
 .el-icon-loading {
   animation: rotating 1s linear infinite;

packages/theme-chalk/src/message.scss

@@ -2,90 +2,97 @@
 @import "common/var";
 
 @include b(message) {
-  box-shadow: $--message-shadow;
   min-width: $--message-min-width;
   box-sizing: border-box;
-  border-radius: $--border-radius-small;
+  border-radius: $--border-radius-base;
+  border-width: $--border-width-base;
+  border-style: $--border-style-base;
+  border-color: $--border-color-lighter;
   position: fixed;
   left: 50%;
   top: 20px;
   transform: translateX(-50%);
-  background-color: $--color-white;
+  background-color: $--border-color-extra-light;
   transition: opacity 0.3s, transform .4s;
   overflow: hidden;
+  padding: $--message-padding;
+  display: flex;
+  align-items: center;
 
-  @include e(group) {
+  @include when(center) {
-    margin-left: 40px;
+    justify-content: center;
-    position: relative;
+  }
-    height: 20px;
-    line-height: 20px;
-    display: flex;
-    align-items: center;
-    padding: $--message-padding;
 
-    & p {
+  p {
-      font-size: $--font-size-base;
+    margin: 0;
-      margin: 0 34px 0 0;
+  }
-      white-space: nowrap;
+
-      color: $--message-content-color;
+  @include m(info) {
-      text-align: justify;
+    .el-message__content {
+      color: $--message-info-color;
+    }
+  }
+
+  @include m(success) {
+    background-color: $--color-success-lighter;
+    border-color: $--color-success-light;
+
+    .el-message__content {
+      color: $--message-success-color;
+    }
+  }
+
+  @include m(warning) {
+    background-color: $--color-warning-lighter;
+    border-color: $--color-warning-light;
+
+    .el-message__content {
+      color: $--message-warning-color;
+    }
+  }
+
+  @include m(error) {
+    background-color: $--color-danger-lighter;
+    border-color: $--color-danger-light;
+
+    .el-message__content {
+      color: $--message-danger-color;
     }
   }
 
   @include e(icon) {
-    height: 40px;
+    margin-right: 10px;
-    width: 40px;
+  }
-    display: inline-block;
-    float: left;
-    text-align: center;
 
-    i {
+  @include e(content) {
-      line-height: 40px;
+    padding: 0;
-
+    font-size: 14px;
-      &.el-message__type {
+    line-height: 1;
-        color: $--color-white;
-      }
-    }
-
-    @include m(info) {
-      background-color: $--color-info;
-    }
-
-    @include m(warning) {
-      background-color: $--color-warning;
-    }
-
-    @include m(error) {
-      background-color: $--color-danger;
-    }
-
-    @include m(success) {
-      background-color: $--color-success;
-    }
   }
 
   @include e(closeBtn) {
     position: absolute;
-    top: 13px;
+    top: 50%;
-    right: 12px;
+    right: 15px;
+    transform: translateY(-50%);
     cursor: pointer;
     color: $--message-close-color;
-    font-size: $--font-size-base;
+    font-size: $--message-close-size;
 
     &:hover {
       color: $--message-close-hover-color;
     }
   }
 
-  & .el-icon-circle-check {
+  & .el-icon-success {
     color: $--message-success-color;
   }
 
-  & .el-icon-circle-cross {
+  & .el-icon-error {
     color: $--message-danger-color;
   }
 
-  & .el-icon-information {
+  & .el-icon-info {
     color: $--message-info-color;
   }
 

test/unit/specs/message.spec.js

@@ -18,7 +18,7 @@ describe('Message', () => {
       message: '灰风',
       duration: 500
     });
-    const message = document.querySelector('.el-message__group p');
+    const message = document.querySelector('.el-message__content');
     expect(document.querySelector('.el-message')).to.exist;
     expect(message.textContent).to.equal('灰风');
     setTimeout(() => {
@@ -47,7 +47,7 @@ describe('Message', () => {
       iconClass: 'el-icon-close'
     });
     setTimeout(() => {
-      const icon = document.querySelector('.el-message__icon i');
+      const icon = document.querySelector('.el-message i');
       expect(icon.classList.contains('el-icon-close')).to.true;
       done();
     }, 500);
@@ -58,7 +58,7 @@ describe('Message', () => {
       message: '<strong>夏天</strong>',
       dangerouslyUseHTMLString: true
     });
-    const message = document.querySelector('.el-message__group strong');
+    const message = document.querySelector('.el-message strong');
     expect(message.textContent).to.equal('夏天');
   });
 
@@ -90,6 +90,15 @@ describe('Message', () => {
     expect(document.querySelector('.el-message').__vue__.type).to.equal('success');
   });
 
+  it('center', () => {
+    Message({
+      message: '夏天',
+      center: true,
+      duration: 0
+    });
+    expect(document.querySelector('.el-message').classList.contains('is-center')).to.true;
+  });
+
   it('reset timer', done => {
     Message({
       message: '白灵',