Alert: Add dark theme (#15041)

examples/docs/en-US/alert.md

@@ -30,6 +30,37 @@ Alert components are non-overlay elements in the page that does not disappear au
 ```
 :::
 
+### Theme
+
+Alert provide two different themes, `light` and `dark`.
+
+:::demo Set `effect` to change theme, default is `light`.
+```html
+<template>
+  <el-alert
+    title="success alert"
+    type="success"
+    effect="dark">
+  </el-alert>
+  <el-alert
+    title="info alert"
+    type="info"
+    effect="dark">
+  </el-alert>
+  <el-alert
+    title="warning alert"
+    type="warning"
+    effect="dark">
+  </el-alert>
+  <el-alert
+    title="error alert"
+    type="error"
+    effect="dark">
+  </el-alert>
+</template>
+```
+:::
+
 ### Customizable close button
 
 Customize the close button as texts or other symbols.
@@ -190,12 +221,13 @@ Description includes a message with more detailed information.
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | title     | title         | string | — | — |
-| type | component type | string | success/warning/info/error | info |
+| type | Component type | string | success/warning/info/error | info |
-| description | descriptive text. Can also be passed with the default slot | string | — | — |
+| description | Descriptive text. Can also be passed with the default slot | string | — | — |
-| closable | if closable or not | boolean | — | true |
+| closable | If closable or not | boolean | — | true |
-| center | whether to center the text | boolean | — | false |
+| center | Whether to center the text | boolean | — | false |
-| close-text | customized close button text | string | — | — |
+| close-text | Customized close button text | string | — | — |
-| show-icon | if a type icon is displayed | boolean | — | false |
+| show-icon | If a type icon is displayed | boolean | — | false |
+| effect | Choose theme  | string | light/dark | light |
 
 ### Slot
 

examples/docs/es/alert.md

@@ -30,6 +30,37 @@ Los componentes de alertas no son elementos overlay de la página y no desaparec
 ```
 :::
 
+### Theme
+
+Alert provide two different themes, `light` and `dark`.
+
+:::demo Set `effect` to change theme, default is `light`.
+```html
+<template>
+  <el-alert
+    title="success alert"
+    type="success"
+    effect="dark">
+  </el-alert>
+  <el-alert
+    title="info alert"
+    type="info"
+    effect="dark">
+  </el-alert>
+  <el-alert
+    title="warning alert"
+    type="warning"
+    effect="dark">
+  </el-alert>
+  <el-alert
+    title="error alert"
+    type="error"
+    effect="dark">
+  </el-alert>
+</template>
+```
+:::
+
 ### Personalización del botón de cerrar
 
 Personalizar el botón de cerrar como texto u otros símbolos.
@@ -198,6 +229,7 @@ Descripción incluye un mensaje con información más detallada.
 | center      | si el texto debe estar centrado          | boolean | —                          | false       |
 | close-text  | texto de cerrado personalizado           | string  | —                          | —           |
 | show-icon   | si un icono del tipo de alerta se debe mostrar | boolean | —                          | false       |
+| effect | Choose theme  | string | light/dark | light |
 
 ### Slot
 

examples/docs/fr-FR/alert.md

@@ -1,4 +1,4 @@
-## Alerte
+## Alert
 
 Affiche des messages importants.
 
@@ -30,6 +30,37 @@ Les Alertes sont des composants non-superposés qui ne disparaissent pas automat
 ```
 :::
 
+### Theme
+
+Alert provide two different themes, `light` and `dark`.
+
+:::demo Set `effect` to change theme, default is `light`.
+```html
+<template>
+  <el-alert
+    title="success alert"
+    type="success"
+    effect="dark">
+  </el-alert>
+  <el-alert
+    title="info alert"
+    type="info"
+    effect="dark">
+  </el-alert>
+  <el-alert
+    title="warning alert"
+    type="warning"
+    effect="dark">
+  </el-alert>
+  <el-alert
+    title="error alert"
+    type="error"
+    effect="dark">
+  </el-alert>
+</template>
+```
+:::
+
 ### Bouton personnalisable
 
 Personnalisez le bouton de fermeture avec du texte ou des symboles.
@@ -196,6 +227,7 @@ Contient un message avec plus d'informations.
 | center | Si le texte doit être centré ou non. | boolean | — | false |
 | close-text | Texte personnalisé pour le bouton de fermeture. | string | — | — |
 | show-icon | Si une icône s'affiche ou non. | boolean | — | false |
+| effect | Choose theme  | string | light/dark | light |
 
 ### Slot
 

examples/docs/zh-CN/alert.md

@@ -29,6 +29,39 @@
 ```
 :::
 
+### 主题
+
+Alert 组件提供了两个不同的主题：`light`和`dark`。
+
+:::demo 通过设置`effect`属性来改变主题，默认为`light`。
+```html
+<template>
+  <el-alert
+    title="成功提示的文案"
+    type="success"
+    effect="dark">
+  </el-alert>
+  <el-alert
+    title="消息提示的文案"
+    type="info"
+    effect="dark">
+  </el-alert>
+  <el-alert
+    title="警告提示的文案"
+    type="warning"
+    effect="dark">
+  </el-alert>
+  <el-alert
+    title="错误提示的文案"
+    type="error"
+    effect="dark">
+  </el-alert>
+</template>
+```
+:::
+
+
+
 ### 自定义关闭按钮
 
 自定义关闭按钮为文字或其他符号。
@@ -190,6 +223,7 @@
 | center | 文字是否居中 | boolean | — | true |
 | close-text | 关闭按钮自定义文本 | string | — | — |
 | show-icon | 是否显示图标 | boolean | — | false |
+| effect | 选择提供的主题 | string | light/dark | light |
 
 ### Slot
 

packages/alert/src/main.vue

@@ -2,7 +2,7 @@
   <transition name="el-alert-fade">
     <div
       class="el-alert"
-      :class="[typeClass, center ? 'is-center' : '']"
+      :class="[typeClass, center ? 'is-center' : '', 'is-' + effect]"
       v-show="visible"
       role="alert"
     >
@@ -50,7 +50,14 @@
         default: ''
       },
       showIcon: Boolean,
-      center: Boolean
+      center: Boolean,
+      effect: {
+        type: String,
+        default: 'light',
+        validator: function(value) {
+          return ['light', 'dark'].indexOf(value) !== -1;
+        }
+      }
     },
 
     data() {

packages/theme-chalk/src/alert.scss

@@ -15,11 +15,27 @@
   align-items: center;
   transition: opacity .2s;
 
+  @include when(light) {
+    .el-alert__closebtn {
+      color: $--color-text-placeholder;
+    }
+  }
+
+  @include when(dark) {
+    .el-alert__closebtn {
+      color: $--color-white;
+    }
+    .el-alert__description {
+      color: $--color-white;
+    }
+  }
+
   @include when(center) {
     justify-content: center;
   }
 
   @include m(success) {
+    &.is-light {
       background-color: $--alert-success-color;
       color: $--color-success;
 
@@ -28,9 +44,22 @@
       }
     }
 
+    &.is-dark {
+      background-color: $--color-success;
+      color: $--color-white;
+    }
+  }
+
   @include m(info) {
+    &.is-light {
       background-color: $--alert-info-color;
       color: $--color-info;
+    }
+
+    &.is-dark {
+      background-color: $--color-info;
+      color: $--color-white;
+    }
 
     .el-alert__description {
       color: $--color-info;
@@ -38,6 +67,7 @@
   }
 
   @include m(warning) {
+    &.is-light {
       background-color: $--alert-warning-color;
       color: $--color-warning;
 
@@ -46,7 +76,14 @@
       }
     }
 
+    &.is-dark {
+      background-color: $--color-warning;
+      color: $--color-white;
+    }
+  }
+
   @include m(error) {
+    &.is-light {
       background-color: $--alert-danger-color;
       color: $--color-danger;
 
@@ -55,6 +92,12 @@
       }
     }
 
+    &.is-dark {
+      background-color: $--color-danger;
+      color: $--color-white;
+    }
+  }
+
   @include e(content) {
     display: table-cell;
     padding: 0 8px;
@@ -84,7 +127,6 @@
 
   @include e(closebtn) {
     font-size: $--alert-close-font-size;
-    color: $--color-text-placeholder;
     opacity: 1;
     position: absolute;
     top: 12px;

test/unit/specs/alert.spec.js

@@ -35,6 +35,14 @@ describe('Alert', () => {
       .to.equal('Unbowed, Unbent, Unbroken');
   });
 
+  it('theme', () => {
+    vm = createTest(Alert, {
+      title: 'test',
+      effect: 'dark'
+    }, true);
+    expect(vm.$el.classList.contains('is-dark')).to.true;
+  });
+
   it('title slot', () => {
     vm = createVue(`
       <el-alert>

types/alert.d.ts

@@ -1,6 +1,7 @@
 import { ElementUIComponent } from './component'
 
 export type AlertType = 'success' | 'warning' | 'info' | 'error'
+export type AlertEffect = 'dark' | 'light'
 
 /** Alert Component */
 export declare class ElAlert extends ElementUIComponent {
@@ -24,4 +25,7 @@ export declare class ElAlert extends ElementUIComponent {
 
   /** If a type icon is displayed */
   showIcon: boolean
+
+  /** Choose theme */
+  theme: AlertEffect
 }