style(components): [message] Update message style (#15912)

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

* test(components): update test
This commit is contained in:
kooriookami 2024-02-23 16:23:32 +08:00 committed by GitHub
parent 41bcd9e1f5
commit d1a7fd102a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 17 additions and 30 deletions

View File

@ -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'),
]),

View File

@ -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>

View File

@ -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({

View File

@ -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',
})

View File

@ -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>

View File

@ -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()

View File

@ -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
}

View File

@ -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'),

View File

@ -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');