style(components): [message] Update message style (element-plus#15912)

* style(components): [message] Update message style * test(components): update test
huster-zj · Feb 23, 2024 · d1a7fd1 · d1a7fd1
1 parent 41bcd9e
commit d1a7fd1
Show file tree

Hide file tree

Showing 9 changed files with 17 additions and 30 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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');