feat(components): [message] add plain prop (#16214)

* feat(components): [message] add plain prop

* feat(components): update

docs/en-US/component/message.md

@@ -27,6 +27,16 @@ message/different-types
 
 :::
 
+## Plain ^(2.6.3)
+
+Set `plain` to have a plain background.
+
+:::demo
+
+message/plain
+
+:::
+
 ## Closable
 
 A close button can be added.
@@ -85,7 +95,7 @@ import { ElMessage } from 'element-plus'
 
 In this case you should call `ElMessage(options)`. We have also registered methods for different types, e.g. `ElMessage.success(options)`. You can call `ElMessage.closeAll()` to manually close all the instances.
 
-## App context inheritance <el-tag> >= 2.0.3</el-tag>
+## App context inheritance ^(2.0.3)
 
 Now message accepts a `context` as second parameter of the message constructor which allows you to inject current app's context to message which allows you to inherit all the properties of the app.
 
@@ -111,9 +121,10 @@ ElMessage({}, appContext)
 ### Options
 
 | Name                     | Description                                                                                          | Type                                                 | Default |
-| ------------------------ | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ------- |
+|--------------------------|------------------------------------------------------------------------------------------------------|------------------------------------------------------|---------|
 | message                  | message text                                                                                         | ^[string] / ^[VNode] / ^[Function]`() => VNode`      | ''      |
 | type                     | message type                                                                                         | ^[enum]`'success' \| 'warning' \| 'info' \| 'error'` | info    |
+| plain ^(2.6.3)           | whether message is plain                                                                             | ^[boolean]                                           | false   |
 | icon                     | custom icon component, overrides `type`                                                              | ^[string] / ^[Component]                             | —       |
 | dangerouslyUseHTMLString | whether `message` is treated as HTML string                                                          | ^[boolean]                                           | false   |
 | customClass              | custom class name for Message                                                                        | ^[string]                                            | ''      |

docs/examples/message/plain.vue

@@ -0,0 +1,39 @@
+<template>
+  <el-button :plain="true" @click="open1">Success</el-button>
+  <el-button :plain="true" @click="open2">Warning</el-button>
+  <el-button :plain="true" @click="open3">Message</el-button>
+  <el-button :plain="true" @click="open4">Error</el-button>
+</template>
+
+<script lang="ts" setup>
+import { ElMessage } from 'element-plus'
+
+const open1 = () => {
+  ElMessage({
+    message: 'Congrats, this is a success message.',
+    type: 'success',
+    plain: true,
+  })
+}
+const open2 = () => {
+  ElMessage({
+    message: 'Warning, this is a warning message.',
+    type: 'warning',
+    plain: true,
+  })
+}
+const open3 = () => {
+  ElMessage({
+    message: 'This is a message.',
+    type: 'info',
+    plain: true,
+  })
+}
+const open4 = () => {
+  ElMessage({
+    message: 'Oops, this is a error message.',
+    type: 'error',
+    plain: true,
+  })
+}
+</script>

packages/components/message/src/message.ts

@@ -28,6 +28,7 @@ export const messageDefaults = mutable({
   onClose: undefined,
   showClose: false,
   type: 'info',
+  plain: false,
   offset: 16,
   zIndex: 0,
   grouping: false,
@@ -94,7 +95,7 @@ export const messageProps = buildProps({
    */
   onClose: {
     type: definePropType<() => void>(Function),
-    required: false,
+    default: messageDefaults.onClose,
   },
   /**
    * @description whether to show a close button
@@ -111,6 +112,13 @@ export const messageProps = buildProps({
     values: messageTypes,
     default: messageDefaults.type,
   },
+  /**
+   * @description whether message is plain
+   */
+  plain: {
+    type: Boolean,
+    default: messageDefaults.plain,
+  },
   /**
    * @description set the distance to the top of viewport
    */

packages/components/message/src/message.vue

@@ -13,6 +13,7 @@
         { [ns.m(type)]: type },
         ns.is('center', center),
         ns.is('closable', showClose),
+        ns.is('plain', plain),
         customClass,
       ]"
       :style="customStyle"

packages/theme-chalk/src/message.scss

@@ -29,6 +29,12 @@
     justify-content: center;
   }
 
+  @include when(plain) {
+    background-color: getCssVar('bg-color', 'overlay');
+    border-color: getCssVar('bg-color', 'overlay');
+    box-shadow: getCssVar('box-shadow-light');
+  }
+
   p {
     margin: 0;
   }