From dc19ddff10447ddee492819ab16ab2de4752a23c Mon Sep 17 00:00:00 2001
From: kooriookami <38392315+kooriookami@users.noreply.github.com>
Date: Tue, 26 Mar 2024 12:03:51 +0800
Subject: [PATCH] feat(components): [message] add plain prop (#16214)

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

* feat(components): update
---
 docs/en-US/component/message.md             | 15 ++++++--
 docs/examples/message/plain.vue             | 39 +++++++++++++++++++++
 packages/components/message/src/message.ts  | 10 +++++-
 packages/components/message/src/message.vue |  1 +
 packages/theme-chalk/src/message.scss       |  6 ++++
 5 files changed, 68 insertions(+), 3 deletions(-)
 create mode 100644 docs/examples/message/plain.vue

diff --git a/docs/en-US/component/message.md b/docs/en-US/component/message.md
index 0e96a6d962..e6b3e24467 100644
--- a/docs/en-US/component/message.md
+++ b/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]                                            | ''      |
diff --git a/docs/examples/message/plain.vue b/docs/examples/message/plain.vue
new file mode 100644
index 0000000000..e327fa87d7
--- /dev/null
+++ b/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>
diff --git a/packages/components/message/src/message.ts b/packages/components/message/src/message.ts
index 3438e98699..3497013f10 100644
--- a/packages/components/message/src/message.ts
+++ b/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
    */
diff --git a/packages/components/message/src/message.vue b/packages/components/message/src/message.vue
index 6f2f089c83..121e0ecef9 100644
--- a/packages/components/message/src/message.vue
+++ b/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"
diff --git a/packages/theme-chalk/src/message.scss b/packages/theme-chalk/src/message.scss
index a271153ddc..cc40e9ada6 100644
--- a/packages/theme-chalk/src/message.scss
+++ b/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;
   }