feat(components): [description-item] add labelWidth prop (#18673)

* feat(components): [description-item] add labelWidth prop

* feat(docs): [description-item] add labelWidth prop in api

* feat(components): [descriptions] add test code for

* fix(components): [descriptions] more maintainable width compute

* feat(docs): [descriptions] add version tips for label-width prop

* feat(docs): [descriptions] update label-width support version

* chore: code format

* feat(components): [descriptions] add labelWidth to descriptions

* feat(components): [descriptions] add test code for labelWidth

* feat(components): [descriptions] add docs for new labelWidth props

---------

Co-authored-by: warmthsea <2586244885@qq.com>

docs/en-US/component/descriptions.md

@@ -52,13 +52,14 @@ descriptions/customized-style
 ### Descriptions Attributes
 
 | Name                 | Description                                | Type                                           | Default    |
-| --------- | ------------------------------------------ | ---------------------------------------------- | ---------- |
+| -------------------- | ------------------------------------------ | ---------------------------------------------- | ---------- |
 | border               | with or without border                     | ^[boolean]                                     | false      |
 | column               | numbers of `Descriptions Item` in one line | ^[number]                                      | 3          |
 | direction            | direction of list                          | ^[enum]`'vertical' \| 'horizontal'`            | horizontal |
 | size                 | size of list                               | ^[enum]`'' \| 'large' \| 'default' \| 'small'` | —          |
 | title                | title text, display on the top left        | ^[string]                                      | ''         |
 | extra                | extra text, display on the top right       | ^[string]                                      | ''         |
+| label-width ^(2.8.8) | label width of every column                | ^[string] / ^[number]                          | ''         |
 
 ### Descriptions Slots
 
@@ -73,12 +74,13 @@ descriptions/customized-style
 ### DescriptionsItem Attributes
 
 | Name                 | Description                                                                                                                                                                                  | Type                                   | Default |
-| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------- |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------- |
 | label                | label text                                                                                                                                                                                   | ^[string]                              | ''      |
 | span                 | colspan of column                                                                                                                                                                            | ^[number]                              | 1       |
 | rowspan ^(2.8.1)     | the number of rows a cell should span                                                                                                                                                        | ^[number]                              | 1       |
 | width                | column width, the width of the same column in different rows is set by the max value (If no `border`, width contains label and content)                                                      | ^[string] / ^[number]                  | ''      |
 | min-width            | column minimum width, columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion (If no`border`, width contains label and content) | ^[string] / ^[number]                  | ''      |
+| label-width ^(2.8.8) | column label width, if not set, it will be the same as the width of the column. Higher priority than the `label-width` of `Descriptions`                                                     | ^[string] / ^[number]                  | ''      |
 | align                | column content alignment (If no `border`, effective for both label and content)                                                                                                              | ^[enum]`'left' \| 'center' \| 'right'` | left    |
 | label-align          | column label alignment, if omitted, the value of the above `align` attribute will be applied (If no `border`, please use `align` attribute)                                                  | ^[enum]`'left' \| 'center' \| 'right'` | ''      |
 | class-name           | column content custom class name                                                                                                                                                             | ^[string]                              | ''      |

packages/components/descriptions/__tests__/descriptions.test.tsx

@@ -204,4 +204,50 @@ describe('Descriptions.vue', () => {
     await nextTick()
     expect(wrapper.findComponent(ElTag).text()).toBe(CHANGE_VALUE)
   })
+
+  test('should render labelWidth prop of DescriptionsItem', () => {
+    const wrapper = mount(() => (
+      <ElDescriptions border>
+        {Array.from({ length: 3 }).map(() => (
+          <ElDescriptionsItem label="测试标签" labelWidth="150px" />
+        ))}
+      </ElDescriptions>
+    ))
+
+    expect(
+      wrapper.find('.el-descriptions__label').attributes('style')
+    ).toContain('width: 150px')
+  })
+
+  test('should render labelWidth prop of Descriptions', () => {
+    const wrapper = mount(() => (
+      <ElDescriptions label-width="150px" border>
+        {Array.from({ length: 3 }).map(() => (
+          <ElDescriptionsItem label="测试标签" />
+        ))}
+      </ElDescriptions>
+    ))
+
+    expect(
+      wrapper.find('.el-descriptions__label').attributes('style')
+    ).toContain('width: 150px')
+  })
+
+  test('should render labelWidth prop of Descriptions and DescriptionsItem with higher priority', () => {
+    const wrapper = mount(() => (
+      <ElDescriptions label-width="100px" border>
+        <ElDescriptionsItem label="测试标签" />
+        {Array.from({ length: 2 }).map(() => (
+          <ElDescriptionsItem label="测试标签" label-width="150px" />
+        ))}
+      </ElDescriptions>
+    ))
+
+    expect(
+      wrapper.findAll('.el-descriptions__label')[0].attributes('style')
+    ).toContain('width: 100px')
+    expect(
+      wrapper.findAll('.el-descriptions__label')[1].attributes('style')
+    ).toContain('width: 150px')
+  })
 })

packages/components/descriptions/src/description-item.ts

@@ -39,6 +39,13 @@ export const descriptionItemProps = buildProps({
     type: [String, Number],
     default: '',
   },
+  /**
+   * @description column label width, if not set, it will be the same as the width of the column. Higher priority than the `label-width` of `Descriptions`
+   */
+  labelWidth: {
+    type: [String, Number],
+    default: '',
+  },
   /**
    * @description column content alignment (If no `border`, effective for both label and content)
    */

packages/components/descriptions/src/description.ts

@@ -42,6 +42,13 @@ export const descriptionProps = buildProps({
     type: String,
     default: '',
   },
+  /**
+   * @description width of every label column
+   */
+  labelWidth: {
+    type: [String, Number],
+    default: '',
+  },
 } as const)
 
 export type DescriptionProps = ExtractPropTypes<typeof descriptionProps>

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

@@ -52,8 +52,13 @@ export default defineComponent({
     const labelAlign = item.labelAlign ? `is-${item.labelAlign}` : align
     const className = item.className
     const labelClassName = item.labelClassName
+    const width =
+      this.type === 'label'
+        ? item.labelWidth || this.descriptions.labelWidth || item.width
+        : item.width
+
     const style = {
-      width: addUnit(item.width),
+      width: addUnit(width),
       minWidth: addUnit(item.minWidth),
     }
     const ns = useNamespace('descriptions')

packages/components/descriptions/src/descriptions.type.ts

@@ -7,6 +7,7 @@ export interface IDescriptionsInject {
   size: ComponentSize
   title: string
   extra: string
+  labelWidth: string | number
 }
 
 export interface IDescriptionsItemInject {
@@ -15,6 +16,7 @@ export interface IDescriptionsItemInject {
   rowspan: number
   width: string | number
   minWidth: string | number
+  labelWidth: string | number
   align: string
   labelAlign: string
   className: string