style: update descriptions style (#5025)

* style: update descriptions style

* style: update

* style: update demo

* style: update

* style: update

* style: update

* style: update

* style: update

* feat: update

docs/examples/descriptions/sizes.vue

@@ -13,40 +13,60 @@
     border
   >
     <template #extra>
-      <el-button type="primary" size="small">Operation</el-button>
+      <el-button type="primary">Operation</el-button>
     </template>
     <el-descriptions-item>
       <template #label>
-        <el-icon><user /></el-icon>
+        <div class="cell-item">
+          <el-icon :style="iconStyle">
+            <user />
+          </el-icon>
           Username
+        </div>
       </template>
       kooriookami
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
-        <el-icon><iphone /></el-icon>
+        <div class="cell-item">
+          <el-icon :style="iconStyle">
+            <iphone />
+          </el-icon>
           Telephone
+        </div>
       </template>
       18100000000
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
-        <el-icon><location /></el-icon>
+        <div class="cell-item">
+          <el-icon :style="iconStyle">
+            <location />
+          </el-icon>
           Place
+        </div>
       </template>
       Suzhou
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
-        <el-icon><tickets /></el-icon>
+        <div class="cell-item">
+          <el-icon :style="iconStyle">
+            <tickets />
+          </el-icon>
           Remarks
+        </div>
       </template>
       <el-tag size="small">School</el-tag>
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
-        <el-icon><office-building /></el-icon>
+        <div class="cell-item">
+          <el-icon :style="iconStyle">
+            <office-building />
+          </el-icon>
           Address
+        </div>
       </template>
       No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
     </el-descriptions-item>
@@ -57,9 +77,10 @@
     title="Without border"
     :column="3"
     :size="size"
+    :style="blockMargin"
   >
     <template #extra>
-      <el-button type="primary" size="small">Operation</el-button>
+      <el-button type="primary">Operation</el-button>
     </template>
     <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
     <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
@@ -68,14 +89,13 @@
       <el-tag size="small">School</el-tag>
     </el-descriptions-item>
     <el-descriptions-item label="Address"
-      >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
+      >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
-      Province</el-descriptions-item
+    </el-descriptions-item>
-    >
   </el-descriptions>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import {
   User,
   Iphone,
@@ -85,4 +105,35 @@ import {
 } from '@element-plus/icons-vue'
 
 const size = ref('')
+const iconStyle = computed(() => {
+  const marginMap = {
+    large: '8px',
+    default: '6px',
+    small: '4px',
+  }
+  return {
+    marginRight: marginMap[size.value] || marginMap.default,
+  }
+})
+const blockMargin = computed(() => {
+  const marginMap = {
+    large: '32px',
+    default: '28px',
+    small: '24px',
+  }
+  return {
+    marginTop: marginMap[size.value] || marginMap.default,
+  }
+})
 </script>
+
+<style scoped>
+.el-descriptions {
+  margin-top: 20px;
+}
+
+.cell-item {
+  display: flex;
+  align-items: center;
+}
+</style>

docs/examples/descriptions/vertical-list.vue

@@ -1,8 +1,15 @@
 <template>
+  <el-radio-group v-model="size">
+    <el-radio label="large">Large</el-radio>
+    <el-radio>Default</el-radio>
+    <el-radio label="small">Small</el-radio>
+  </el-radio-group>
+
   <el-descriptions
     title="Vertical list with border"
     direction="vertical"
     :column="4"
+    :size="size"
     border
   >
     <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
@@ -12,16 +19,16 @@
       <el-tag size="small">School</el-tag>
     </el-descriptions-item>
     <el-descriptions-item label="Address"
-      >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
+      >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
-      Province</el-descriptions-item
+    </el-descriptions-item>
-    >
   </el-descriptions>
 
   <el-descriptions
-    class="margin-top"
     title="Vertical list without border"
     :column="4"
+    :size="size"
     direction="vertical"
+    :style="blockMargin"
   >
     <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
     <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
@@ -30,8 +37,29 @@
       <el-tag size="small">School</el-tag>
     </el-descriptions-item>
     <el-descriptions-item label="Address"
-      >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
+      >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
-      Province</el-descriptions-item
+    </el-descriptions-item>
-    >
   </el-descriptions>
 </template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+const size = ref('')
+const blockMargin = computed(() => {
+  const marginMap = {
+    large: '32px',
+    default: '28px',
+    small: '24px',
+  }
+  return {
+    marginTop: marginMap[size.value] || marginMap.default,
+  }
+})
+</script>
+
+<style scoped>
+.el-descriptions {
+  margin-top: 20px;
+}
+</style>

packages/components/descriptions/src/descriptions-cell.ts

@@ -34,6 +34,8 @@ export default defineComponent({
       this.cell as VNode
     ) as IDescriptionsItemInject
 
+    const { border, direction } = this.descriptions
+    const isVertical = direction === 'vertical'
     const label = this.cell?.children?.label?.() || item.label
     const content = this.cell?.children?.default?.()
     const span = item.span
@@ -55,11 +57,14 @@ export default defineComponent({
             class: [
               'el-descriptions__cell',
               'el-descriptions__label',
-              { 'is-bordered-label': this.descriptions.border },
+              {
+                'is-bordered-label': border,
+                'is-vertical-label': isVertical,
+              },
               labelAlign,
               labelClassName,
             ],
-            colSpan: this.descriptions.direction === 'vertical' ? span : 1,
+            colSpan: isVertical ? span : 1,
           },
           label
         )
@@ -71,11 +76,14 @@ export default defineComponent({
             class: [
               'el-descriptions__cell',
               'el-descriptions__content',
+              {
+                'is-bordered-content': border,
+                'is-vertical-content': isVertical,
+              },
               align,
               className,
             ],
-            colSpan:
+            colSpan: isVertical ? span : span * 2 - 1,
-              this.descriptions.direction === 'vertical' ? span : span * 2 - 1,
           },
           content
         )

packages/components/descriptions/src/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="el-descriptions">
+  <div :class="descriptionKls">
     <div
       v-if="title || extra || $slots.title || $slots.extra"
       class="el-descriptions__header"
@@ -13,13 +13,7 @@
     </div>
 
     <div class="el-descriptions__body">
-      <table
+      <table :class="['el-descriptions__table', { 'is-bordered': border }]">
-        :class="[
-          'el-descriptions__table',
-          { 'is-bordered': border },
-          descriptionsSize ? `el-descriptions--${descriptionsSize}` : '',
-        ]"
-      >
         <tbody>
           <template v-for="(row, index) in getRows()" :key="index">
             <el-descriptions-row :row="row" />
@@ -31,7 +25,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, provide } from 'vue'
+import { computed, defineComponent, provide } from 'vue'
 import { isValidComponentSize } from '@element-plus/utils/validators'
 import { useSize } from '@element-plus/hooks'
 import DescriptionsRow from './descriptions-row.vue'
@@ -76,6 +70,12 @@ export default defineComponent({
 
     const descriptionsSize = useSize()
 
+    const prefix = 'el-descriptions'
+    const descriptionKls = computed(() => [
+      prefix,
+      descriptionsSize.value ? `${prefix}--${descriptionsSize.value}` : '',
+    ])
+
     const flattedChildren = (children) => {
       const temp = Array.isArray(children) ? children : [children]
       const res = []
@@ -142,7 +142,7 @@ export default defineComponent({
     }
 
     return {
-      descriptionsSize,
+      descriptionKls,
       getRows,
     }
   },

packages/theme-chalk/src/common/var.scss

@@ -1170,10 +1170,8 @@ $empty: map.merge(
 $descriptions: () !default;
 $descriptions: map.merge(
   (
-    'header-margin-bottom': 20px,
-    'title-font-size': 16px,
     'table-border': 1px solid var(--el-border-color-lighter),
-    'item-bordered-label-background': #fafafa,
+    'item-bordered-label-background': #f5f7fa,
   ),
   $descriptions
 );

packages/theme-chalk/src/descriptions-item.scss

@@ -1,19 +1,73 @@
+@use 'sass:map';
+
 @use 'mixins/mixins' as *;
 @use 'common/var' as *;
 
+$descriptions-item-label-margin-right: () !default;
+$descriptions-item-label-margin-right: map.merge(
+  (
+    'large': 16px,
+    'default': 16px,
+    'small': 12px,
+  ),
+  $descriptions-item-label-margin-right
+);
+
+$descriptions-item-vertical-label-padding-bottom: () !default;
+$descriptions-item-vertical-label-padding-bottom: map.merge(
+  (
+    'large': 8px,
+    'default': 6px,
+    'small': 4px,
+  ),
+  $descriptions-item-vertical-label-padding-bottom
+);
+
 @include b(descriptions) {
   @include e(label) {
     &.#{$namespace}-descriptions__cell.is-bordered-label {
       font-weight: bold;
-      color: var(--el-text-color-secondary);
+      color: var(--el-text-color-regular);
       background: var(--el-descriptions-item-bordered-label-background);
     }
 
     &:not(.is-bordered-label) {
-      margin-right: 10px;
+      color: var(--el-text-color-primary);
+      margin-right: map.get($descriptions-item-label-margin-right, 'default');
+    }
+
+    &.#{$namespace}-descriptions__cell:not(.is-bordered-label).is-vertical-label {
+      padding-bottom: map.get(
+        $descriptions-item-vertical-label-padding-bottom,
+        'default'
+      );
     }
   }
 
   @include e(content) {
+    &.#{$namespace}-descriptions__cell.is-bordered-content {
+      color: var(--el-text-color-primary);
+    }
+
+    &:not(.is-bordered-label) {
+      color: var(--el-text-color-regular);
+    }
+  }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      @include e(label) {
+        &:not(.is-bordered-label) {
+          margin-right: map.get($descriptions-item-label-margin-right, $size);
+        }
+
+        &.#{$namespace}-descriptions__cell:not(.is-bordered-label).is-vertical-label {
+          padding-bottom: map.get(
+            $descriptions-item-vertical-label-padding-bottom,
+            $size
+          );
+        }
+      }
+    }
   }
 }

packages/theme-chalk/src/descriptions.scss

@@ -4,12 +4,32 @@
 @use 'mixins/var' as *;
 @use 'common/var' as *;
 
+$descriptions-header-margin-bottom: () !default;
+$descriptions-header-margin-bottom: map.merge(
+  (
+    'large': 20px,
+    'default': 16px,
+    'small': 12px,
+  ),
+  $descriptions-header-margin-bottom
+);
+
+$descriptions-title-font-size: () !default;
+$descriptions-title-font-size: map.merge(
+  (
+    'large': 16px,
+    'default': 16px,
+    'small': 14px,
+  ),
+  $descriptions-title-font-size
+);
+
 $descriptions-cell-padding-bottom: () !default;
 $descriptions-cell-padding-bottom: map.merge(
   (
-    'large': 10px,
+    'large': 16px,
-    'default': 8px,
+    'default': 12px,
-    'small': 6px,
+    'small': 8px,
   ),
   $descriptions-cell-padding-bottom
 );
@@ -17,13 +37,23 @@ $descriptions-cell-padding-bottom: map.merge(
 $descriptions-bordered-cell-padding: () !default;
 $descriptions-bordered-cell-padding: map.merge(
   (
-    'large': 10px,
+    'large': 12px 15px,
-    'default': 8px 10px,
+    'default': 8px 11px,
-    'small': 6px 10px,
+    'small': 4px 7px,
   ),
   $descriptions-bordered-cell-padding
 );
 
+$descriptions-cell-font-size: () !default;
+$descriptions-cell-font-size: map.merge(
+  (
+    'large': 14px,
+    'default': 14px,
+    'small': 12px,
+  ),
+  $descriptions-cell-font-size
+);
+
 @include b(descriptions) {
   @include set-component-css-var('descriptions', $descriptions);
 
@@ -35,16 +65,16 @@ $descriptions-bordered-cell-padding: map.merge(
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: var(--el-descriptions-header-margin-bottom);
+    margin-bottom: map.get($descriptions-header-margin-bottom, 'default');
 
     @include e(title) {
-      font-size: var(--el-descriptions-title-font-size);
+      color: var(--el-text-color-primary);
+      font-size: map.get($descriptions-title-font-size, 'default');
       font-weight: bold;
     }
   }
 
   @include e(body) {
-    color: var(--el-text-color-regular);
     background-color: $color-white;
 
     .#{$namespace}-descriptions__table {
@@ -55,7 +85,8 @@ $descriptions-bordered-cell-padding: map.merge(
         box-sizing: border-box;
         text-align: left;
         font-weight: normal;
-        line-height: 1.5;
+        line-height: 23px;
+        font-size: map.get($descriptions-cell-font-size, 'default');
 
         @include when(left) {
           text-align: left;
@@ -69,25 +100,40 @@ $descriptions-bordered-cell-padding: map.merge(
           text-align: right;
         }
       }
-    }
-  }
 
-  .is-bordered {
+      &.is-bordered {
         .#{$namespace}-descriptions__cell {
           border: var(--el-descriptions-table-border);
           padding: map.get($descriptions-bordered-cell-padding, 'default');
         }
       }
 
-  :not(.is-bordered) {
+      &:not(.is-bordered) {
         .#{$namespace}-descriptions__cell {
           padding-bottom: map.get($descriptions-cell-padding-bottom, 'default');
         }
       }
+    }
+  }
 
   @each $size in (large, small) {
     @include m($size) {
       font-size: map.get($input-font-size, $size);
+
+      @include e(header) {
+        margin-bottom: map.get($descriptions-header-margin-bottom, $size);
+
+        @include e(title) {
+          font-size: map.get($descriptions-title-font-size, $size);
+        }
+      }
+
+      @include e(body) {
+        .#{$namespace}-descriptions__table {
+          .#{$namespace}-descriptions__cell {
+            font-size: map.get($descriptions-cell-font-size, $size);
+          }
+
           &.is-bordered {
             .#{$namespace}-descriptions__cell {
               padding: map.get($descriptions-bordered-cell-padding, $size);
@@ -102,3 +148,5 @@ $descriptions-bordered-cell-padding: map.merge(
         }
       }
     }
+  }
+}