Alert: add chalk theme

examples/docs/en-US/alert.md

@@ -118,6 +118,42 @@ Displaying an icon improves readability.
 ```
 :::
 
+## Centered text
+
+Use the `center` attribute to center the text.
+
+::: demo
+
+```html
+<template>
+  <el-alert
+    title="success alert"
+    type="success"
+    center
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="info alert"
+    type="info"
+    center
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="warning alert"
+    type="warning"
+    center
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="error alert"
+    type="error"
+    center
+    show-icon>
+  </el-alert>
+</template>
+```
+:::
+
 ### With description
 
 Description includes a message with more detailed information.
@@ -176,6 +212,7 @@ Description includes a message with more detailed information.
 | type | component type | string | success/warning/info/error | info |
 | description | descriptive text. Can also be passed with the default slot | string | — | — |
 | closable | if closable or not | boolean | — | true |
+| center | whether to center the text | boolean | — | false |
 | close-text | customized close button text | string | — | — |
 | show-icon | if a type icon is displayed | boolean | — | false |
 

examples/docs/en-US/message.md

@@ -214,7 +214,7 @@ A close button can be added.
 :::
 
 ### Centered text
-Use the `center` attribute to center the text
+Use the `center` attribute to center the text.
 
 :::demo
 

examples/docs/zh-CN/alert.md

@@ -115,6 +115,41 @@
 ```
 :::
 
+### 文字居中
+
+使用 `center` 属性让文字水平居中。
+
+::: demo
+```html
+<template>
+  <el-alert
+    title="成功提示的文案"
+    type="success"
+    center
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="消息提示的文案"
+    type="info"
+    center
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="警告提示的文案"
+    type="warning"
+    center
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="错误提示的文案"
+    type="error"
+    center
+    show-icon>
+  </el-alert>
+</template>
+```
+:::
+
 ### 带有辅助性文字介绍
 
 包含标题和内容，解释更详细的警告。
@@ -171,6 +206,7 @@
 | type | 主题 | string | success/warning/info/error | info |
 | description | 辅助性文字。也可通过默认 slot 传入 | string | — | — |
 | closable | 是否可关闭 | boolean | — | true |
+| center | 文字是否居中 | boolean | — | true |
 | close-text | 关闭按钮自定义文本 | string | — | — |
 | show-icon | 是否显示图标 | boolean | — | false |
 

examples/docs/zh-CN/message.md

@@ -214,7 +214,7 @@
 :::
 
 ### 文字居中
-使用 `center` 属性让文字水平居中
+使用 `center` 属性让文字水平居中。
 
 :::demo
 

packages/alert/src/main.vue

@@ -2,7 +2,7 @@
   <transition name="el-alert-fade">
     <div
       class="el-alert"
-      :class="[ typeClass ]"
+      :class="[typeClass, center ? 'is-center' : '']"
       v-show="visible"
       role="alert"
     >
@@ -20,9 +20,9 @@
 
 <script type="text/babel">
   const TYPE_CLASSES_MAP = {
-    'success': 'el-icon-circle-check',
+    'success': 'el-icon-success',
     'warning': 'el-icon-warning',
-    'error': 'el-icon-circle-cross'
+    'error': 'el-icon-error'
   };
   export default {
     name: 'ElAlert',
@@ -49,10 +49,8 @@
         type: String,
         default: ''
       },
-      showIcon: {
-        type: Boolean,
-        default: false
-      }
+      showIcon: Boolean,
+      center: Boolean
     },
 
     data() {
@@ -74,7 +72,7 @@
       },
 
       iconClass() {
-        return TYPE_CLASSES_MAP[this.type] || 'el-icon-information';
+        return TYPE_CLASSES_MAP[this.type] || 'el-icon-info';
       },
 
       isBigIcon() {

packages/theme-chalk/src/alert.scss

@@ -10,25 +10,49 @@
   position: relative;
   background-color: $--color-white;
   overflow: hidden;
-  color: $--color-white;
   opacity: 1;
-  display: table;
+  display: flex;
+  align-items: center;
   transition: opacity .2s;
 
+  @include when(center) {
+    justify-content: center;
+  }
+
   @include m(success) {
     background-color: $--alert-success-color;
+    color: $--color-success;
+
+    .el-alert__description {
+      color: $--color-success;
+    }
   }
 
   @include m(info) {
     background-color: $--alert-info-color;
+    color: $--color-info;
+
+    .el-alert__description {
+      color: $--color-info;
+    }
   }
 
   @include m(warning) {
     background-color: $--alert-warning-color;
+    color: $--color-warning;
+
+    .el-alert__description {
+      color: $--color-warning;
+    }
   }
 
   @include m(error) {
     background-color: $--alert-danger-color;
+    color: $--color-danger;
+
+    .el-alert__description {
+      color: $--color-danger;
+    }
   }
 
   @include e(content) {
@@ -39,9 +63,6 @@
   @include e(icon) {
     font-size: $--alert-icon-size;
     width: $--alert-icon-size;
-    display: table-cell;
-    color: $--color-white;
-    vertical-align: middle;
     @include when(big) {
       font-size: $--alert-icon-large-size;
       width: $--alert-icon-large-size;
@@ -57,14 +78,13 @@
   }
 
   & .el-alert__description {
-    color: $--color-white;
     font-size: $--alert-description-font-size;
     margin: 5px 0 0 0;
   }
 
   @include e(closebtn) {
     font-size: $--alert-close-font-size;
-    color: $--color-white;
+    color: $--color-text-placeholder;
     opacity: 1;
     position: absolute;
     top: 12px;

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

@@ -234,10 +234,10 @@ $--alert-description-font-size: 12px;
 $--alert-close-font-size: 12px;
 $--alert-close-customed-font-size: 13px;
 
-$--alert-success-color: $--color-success;
-$--alert-info-color: $--color-info;
-$--alert-warning-color: $--color-warning;
-$--alert-danger-color: $--color-danger;
+$--alert-success-color: $--color-success-lighter;
+$--alert-info-color: $--color-info-lighter;
+$--alert-warning-color: $--color-warning-lighter;
+$--alert-danger-color: $--color-danger-lighter;
 
 $--alert-icon-size: 16px;
 $--alert-icon-large-size: 28px;

packages/theme-chalk/src/message.scss

@@ -12,7 +12,7 @@
   left: 50%;
   top: 20px;
   transform: translateX(-50%);
-  background-color: $--border-color-extra-light;
+  background-color: $--color-info-lighter;
   transition: opacity 0.3s, transform .4s;
   overflow: hidden;
   padding: $--message-padding;

test/unit/specs/alert.spec.js

@@ -23,7 +23,6 @@ describe('Alert', () => {
       showIcon: true
     }, true);
     expect(vm.$el.classList.contains('el-alert--success')).to.true;
-    expect(vm.$el.querySelector('.el-icon-circle-check')).to.exist;
   });
 
   it('description', () => {