style(components): [alert] Update alert style (element-plus#15911)

huster-zj · Feb 23, 2024 · ed98456 · ed98456
1 parent d1a7fd1
commit ed98456
Show file tree

Hide file tree

Showing 10 changed files with 49 additions and 44 deletions.
diff --git a/docs/examples/alert/basic.vue b/docs/examples/alert/basic.vue
@@ -1,9 +1,9 @@
 <template>
   <div style="max-width: 600px">
-    <el-alert title="success alert" type="success" />
-    <el-alert title="info alert" type="info" />
-    <el-alert title="warning alert" type="warning" />
-    <el-alert title="error alert" type="error" />
+    <el-alert title="Success alert" type="success" />
+    <el-alert title="Info alert" type="info" />
+    <el-alert title="Warning alert" type="warning" />
+    <el-alert title="Error alert" type="error" />
   </div>
 </template>
 

diff --git a/docs/examples/alert/center.vue b/docs/examples/alert/center.vue
@@ -1,9 +1,9 @@
 <template>
   <div style="max-width: 600px">
-    <el-alert title="success alert" type="success" center show-icon />
-    <el-alert title="info alert" type="info" center show-icon />
-    <el-alert title="warning alert" type="warning" center show-icon />
-    <el-alert title="error alert" type="error" center show-icon />
+    <el-alert title="Success alert" type="success" center show-icon />
+    <el-alert title="Info alert" type="info" center show-icon />
+    <el-alert title="Warning alert" type="warning" center show-icon />
+    <el-alert title="Error alert" type="error" center show-icon />
   </div>
 </template>
 

diff --git a/docs/examples/alert/close-button.vue b/docs/examples/alert/close-button.vue
@@ -1,8 +1,8 @@
 <template>
   <div style="max-width: 600px">
-    <el-alert title="unclosable alert" type="success" :closable="false" />
-    <el-alert title="customized close-text" type="info" close-text="Gotcha" />
-    <el-alert title="alert with callback" type="warning" @close="hello" />
+    <el-alert title="Unclosable alert" type="success" :closable="false" />
+    <el-alert title="Customized close text" type="info" close-text="Gotcha" />
+    <el-alert title="Alert with callback" type="warning" @close="hello" />
   </div>
 </template>
 

diff --git a/docs/examples/alert/description.vue b/docs/examples/alert/description.vue
@@ -1,7 +1,7 @@
 <template>
   <div style="max-width: 600px">
     <el-alert
-      title="with description"
+      title="With description"
       type="success"
       description="This is a description."
     />

diff --git a/docs/examples/alert/icon-description.vue b/docs/examples/alert/icon-description.vue
@@ -1,27 +1,27 @@
 <template>
   <div style="max-width: 600px">
     <el-alert
-      title="success alert"
+      title="Success alert"
       type="success"
-      description="more text description"
+      description="More text description"
       show-icon
     />
     <el-alert
-      title="info alert"
+      title="Info alert"
       type="info"
-      description="more text description"
+      description="More text description"
       show-icon
     />
     <el-alert
-      title="warning alert"
+      title="Warning alert"
       type="warning"
-      description="more text description"
+      description="More text description"
       show-icon
     />
     <el-alert
-      title="error alert"
+      title="Error alert"
       type="error"
-      description="more text description"
+      description="More text description"
       show-icon
     />
   </div>

diff --git a/docs/examples/alert/icon.vue b/docs/examples/alert/icon.vue
@@ -1,9 +1,9 @@
 <template>
   <div style="max-width: 600px">
-    <el-alert title="success alert" type="success" show-icon />
-    <el-alert title="info alert" type="info" show-icon />
-    <el-alert title="warning alert" type="warning" show-icon />
-    <el-alert title="error alert" type="error" show-icon />
+    <el-alert title="Success alert" type="success" show-icon />
+    <el-alert title="Info alert" type="info" show-icon />
+    <el-alert title="Warning alert" type="warning" show-icon />
+    <el-alert title="Error alert" type="error" show-icon />
   </div>
 </template>
 

diff --git a/docs/examples/alert/theme.vue b/docs/examples/alert/theme.vue
@@ -1,9 +1,9 @@
 <template>
   <div style="max-width: 600px">
-    <el-alert title="success alert" type="success" effect="dark" />
-    <el-alert title="info alert" type="info" effect="dark" />
-    <el-alert title="warning alert" type="warning" effect="dark" />
-    <el-alert title="error alert" type="error" effect="dark" />
+    <el-alert title="Success alert" type="success" effect="dark" />
+    <el-alert title="Info alert" type="info" effect="dark" />
+    <el-alert title="Warning alert" type="warning" effect="dark" />
+    <el-alert title="Error alert" type="error" effect="dark" />
   </div>
 </template>
 

diff --git a/packages/components/alert/src/alert.vue b/packages/components/alert/src/alert.vue
@@ -12,7 +12,7 @@
       <div :class="ns.e('content')">
         <span
           v-if="title || $slots.title"
-          :class="[ns.e('title'), isBoldTitle]"
+          :class="[ns.e('title'), withDescription]"
         >
           <slot name="title">{{ title }}</slot>
         </span>
@@ -65,8 +65,8 @@ const iconClass = computed(() => [
   { [ns.is('big')]: !!props.description || !!slots.default },
 ])
 
-const isBoldTitle = computed(() => {
-  return { [ns.is('bold')]: props.description || slots.default }
+const withDescription = computed(() => {
+  return { 'with-description': props.description || slots.default }
 })
 
 const close = (evt: MouseEvent) => {

diff --git a/packages/theme-chalk/src/alert.scss b/packages/theme-chalk/src/alert.scss
@@ -61,46 +61,50 @@
   }
 
   @include e(content) {
-    display: table-cell;
-    padding: 0 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
   }
 
   & .#{$namespace}-alert__icon {
     font-size: getCssVar('alert', 'icon-size');
     width: getCssVar('alert', 'icon-size');
+    margin-right: 8px;
 
     @include when(big) {
       font-size: getCssVar('alert', 'icon-large-size');
       width: getCssVar('alert', 'icon-large-size');
+      margin-right: 12px;
     }
   }
 
   @include e(title) {
     font-size: getCssVar('alert', 'title-font-size');
-    line-height: 18px;
-    vertical-align: text-top;
-    @include when(bold) {
-      font-weight: bold;
+    line-height: 24px;
+
+    &.with-description {
+      font-size: getCssVar('alert', 'title-with-description-font-size');
     }
   }
 
   & .#{$namespace}-alert__description {
     font-size: getCssVar('alert', 'description-font-size');
-    margin: 5px 0 0 0;
+    margin: 0;
   }
 
   & .#{$namespace}-alert__close-btn {
     font-size: getCssVar('alert', 'close-font-size');
     opacity: 1;
     position: absolute;
     top: 12px;
-    right: 15px;
+    right: 16px;
     cursor: pointer;
 
     @include when(customed) {
       font-style: normal;
       font-size: getCssVar('alert', 'close-customed-font-size');
-      top: 9px;
+      line-height: 24px;
+      top: 8px;
     }
   }
 }

diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
@@ -499,10 +499,11 @@ $alert: map.merge(
   (
     'padding': 8px 16px,
     'border-radius-base': getCssVar('border-radius-base'),
-    'title-font-size': 13px,
-    'description-font-size': 12px,
-    'close-font-size': 12px,
-    'close-customed-font-size': 13px,
+    'title-font-size': 14px,
+    'title-with-description-font-size': 16px,
+    'description-font-size': 14px,
+    'close-font-size': 16px,
+    'close-customed-font-size': 14px,
     'icon-size': 16px,
     'icon-large-size': 28px,
   ),