From d1a7fd102adb767893822c7ffbad99d167362b77 Mon Sep 17 00:00:00 2001
From: kooriookami <38392315+kooriookami@users.noreply.github.com>
Date: Fri, 23 Feb 2024 16:23:32 +0800
Subject: [PATCH] style(components): [message] Update message style (#15912)

* style(components): [message] Update message style

* test(components): update test
---
 docs/examples/message/basic.vue                   |  4 ++--
 docs/examples/message/closable.vue                |  8 ++++----
 docs/examples/message/different-types.vue         | 10 +++++-----
 docs/examples/message/grouping.vue                |  2 +-
 docs/examples/message/raw-html.vue                |  2 +-
 .../message/__tests__/message-manager.test.tsx    |  2 +-
 packages/components/message/src/instance.ts       |  2 +-
 packages/theme-chalk/src/common/var.scss          |  2 +-
 packages/theme-chalk/src/message.scss             | 15 +--------------
 9 files changed, 17 insertions(+), 30 deletions(-)

diff --git a/docs/examples/message/basic.vue b/docs/examples/message/basic.vue
index 98e76a58d8..2babd7d73f 100644
--- a/docs/examples/message/basic.vue
+++ b/docs/examples/message/basic.vue
@@ -8,12 +8,12 @@ import { h } from 'vue'
 import { ElMessage } from 'element-plus'
 
 const open = () => {
-  ElMessage('this is a message.')
+  ElMessage('This is a message.')
 }
 
 const openVn = () => {
   ElMessage({
-    message: h('p', null, [
+    message: h('p', { style: 'line-height: 1; font-size: 14px' }, [
       h('span', null, 'Message can be '),
       h('i', { style: 'color: teal' }, 'VNode'),
     ]),
diff --git a/docs/examples/message/closable.vue b/docs/examples/message/closable.vue
index e38ba91c08..74927bf682 100644
--- a/docs/examples/message/closable.vue
+++ b/docs/examples/message/closable.vue
@@ -1,8 +1,8 @@
 <template>
-  <el-button :plain="true" @click="open1">message</el-button>
-  <el-button :plain="true" @click="open2">success</el-button>
-  <el-button :plain="true" @click="open3">warning</el-button>
-  <el-button :plain="true" @click="open4">error</el-button>
+  <el-button :plain="true" @click="open1">Message</el-button>
+  <el-button :plain="true" @click="open2">Success</el-button>
+  <el-button :plain="true" @click="open3">Warning</el-button>
+  <el-button :plain="true" @click="open4">Error</el-button>
 </template>
 
 <script lang="ts" setup>
diff --git a/docs/examples/message/different-types.vue b/docs/examples/message/different-types.vue
index d72a7eccf4..07d5809f99 100644
--- a/docs/examples/message/different-types.vue
+++ b/docs/examples/message/different-types.vue
@@ -1,15 +1,15 @@
 <template>
-  <el-button :plain="true" @click="open2">success</el-button>
-  <el-button :plain="true" @click="open3">warning</el-button>
-  <el-button :plain="true" @click="open1">message</el-button>
-  <el-button :plain="true" @click="open4">error</el-button>
+  <el-button :plain="true" @click="open2">Success</el-button>
+  <el-button :plain="true" @click="open3">Warning</el-button>
+  <el-button :plain="true" @click="open1">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('this is a message.')
+  ElMessage('This is a message.')
 }
 const open2 = () => {
   ElMessage({
diff --git a/docs/examples/message/grouping.vue b/docs/examples/message/grouping.vue
index 38ad219d53..8a3d46ecd4 100644
--- a/docs/examples/message/grouping.vue
+++ b/docs/examples/message/grouping.vue
@@ -7,7 +7,7 @@ import { ElMessage } from 'element-plus'
 
 const open = () => {
   ElMessage({
-    message: 'this is a message.',
+    message: 'This is a message.',
     grouping: true,
     type: 'success',
   })
diff --git a/docs/examples/message/raw-html.vue b/docs/examples/message/raw-html.vue
index 4921ae3e1d..7eb68fbb4d 100644
--- a/docs/examples/message/raw-html.vue
+++ b/docs/examples/message/raw-html.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-button :plain="true" @click="openHTML">Use HTML String</el-button>
+  <el-button :plain="true" @click="openHTML">Use HTML string</el-button>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/components/message/__tests__/message-manager.test.tsx b/packages/components/message/__tests__/message-manager.test.tsx
index 3e6e98ab40..227fd1949b 100644
--- a/packages/components/message/__tests__/message-manager.test.tsx
+++ b/packages/components/message/__tests__/message-manager.test.tsx
@@ -106,7 +106,7 @@ describe('Message on command', () => {
 
   test('correct space when set offset', async () => {
     const offset = 100
-    const space = 20
+    const space = 16
     const messages = [Message({ offset }), Message({ offset })]
 
     await rAF()
diff --git a/packages/components/message/src/instance.ts b/packages/components/message/src/instance.ts
index 15ff2357e0..9740a17072 100644
--- a/packages/components/message/src/instance.ts
+++ b/packages/components/message/src/instance.ts
@@ -31,5 +31,5 @@ export const getLastOffset = (id: string): number => {
 
 export const getOffsetOrSpace = (id: string, offset: number) => {
   const idx = instances.findIndex((instance) => instance.id === id)
-  return idx > 0 ? 20 : offset
+  return idx > 0 ? 16 : offset
 }
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 68162eb436..5ba306c8de 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -535,7 +535,7 @@ $message: map.merge(
   (
     'bg-color': getCssVar('color', 'info', 'light-9'),
     'border-color': getCssVar('border-color-lighter'),
-    'padding': 15px 19px,
+    'padding': 11px 15px,
     'close-size': 16px,
     'close-icon-color': getCssVar('text-color-placeholder'),
     'close-hover-color': getCssVar('text-color-secondary'),
diff --git a/packages/theme-chalk/src/message.scss b/packages/theme-chalk/src/message.scss
index 5240595a87..a271153ddc 100644
--- a/packages/theme-chalk/src/message.scss
+++ b/packages/theme-chalk/src/message.scss
@@ -23,17 +23,12 @@
   padding: getCssVar('message', 'padding');
   display: flex;
   align-items: center;
+  gap: 8px;
 
   @include when(center) {
     justify-content: center;
   }
 
-  @include when(closable) {
-    .#{$namespace}-message__content {
-      padding-right: 31px;
-    }
-  }
-
   p {
     margin: 0;
   }
@@ -61,10 +56,6 @@
     }
   }
 
-  @include e(icon) {
-    margin-right: 10px;
-  }
-
   .#{$namespace}-message__badge {
     position: absolute;
     top: -8px;
@@ -81,10 +72,6 @@
   }
 
   & .#{$namespace}-message__closeBtn {
-    position: absolute;
-    top: 50%;
-    right: 19px;
-    transform: translateY(-50%);
     cursor: pointer;
     color: getCssVar('message', 'close-icon-color');
     font-size: getCssVar('message', 'close-size');