feat: Description list plus extra operation area (#25512)

* feat: Description list plus extra operation area

* 修复title与extra对齐，加版本等问题

* 去掉basic里extra

* 修改extra样式

* title与extra都没有的时候不展示header

* 更新测试用例

Co-authored-by: chenshuai2144 <qixian.cs@outlook.com>

components/descriptions/__tests__/__snapshots__/demo.test.js.snap

@@ -5,9 +5,13 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
   class="ant-descriptions"
 >
   <div
-    class="ant-descriptions-title"
+    class="ant-descriptions-header"
   >
-    User Info
+    <div
+      class="ant-descriptions-title"
+    >
+      User Info
+    </div>
   </div>
   <div
     class="ant-descriptions-view"
@@ -108,9 +112,13 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
   class="ant-descriptions ant-descriptions-bordered"
 >
   <div
-    class="ant-descriptions-title"
+    class="ant-descriptions-header"
   >
-    User Info
+    <div
+      class="ant-descriptions-title"
+    >
+      User Info
+    </div>
   </div>
   <div
     class="ant-descriptions-view"
@@ -291,9 +299,13 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
     class="ant-descriptions ant-descriptions-bordered"
   >
     <div
-      class="ant-descriptions-title"
+      class="ant-descriptions-header"
     >
-      Responsive Descriptions
+      <div
+        class="ant-descriptions-title"
+      >
+        Responsive Descriptions
+      </div>
     </div>
     <div
       class="ant-descriptions-view"
@@ -483,9 +495,25 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
     class="ant-descriptions ant-descriptions-bordered"
   >
     <div
-      class="ant-descriptions-title"
+      class="ant-descriptions-header"
     >
-      Custom Size
+      <div
+        class="ant-descriptions-title"
+      >
+        Custom Size
+      </div>
+      <div
+        class="ant-descriptions-extra"
+      >
+        <button
+          class="ant-btn ant-btn-primary"
+          type="button"
+        >
+          <span>
+            Edit
+          </span>
+        </button>
+      </div>
     </div>
     <div
       class="ant-descriptions-view"
@@ -609,9 +637,25 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
     class="ant-descriptions"
   >
     <div
-      class="ant-descriptions-title"
+      class="ant-descriptions-header"
     >
-      Custom Size
+      <div
+        class="ant-descriptions-title"
+      >
+        Custom Size
+      </div>
+      <div
+        class="ant-descriptions-extra"
+      >
+        <button
+          class="ant-btn ant-btn-primary"
+          type="button"
+        >
+          <span>
+            Edit
+          </span>
+        </button>
+      </div>
     </div>
     <div
       class="ant-descriptions-view"
@@ -728,9 +772,13 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
   class="ant-descriptions"
 >
   <div
-    class="ant-descriptions-title"
+    class="ant-descriptions-header"
   >
-    User Info
+    <div
+      class="ant-descriptions-title"
+    >
+      User Info
+    </div>
   </div>
   <div
     class="ant-descriptions-view"
@@ -864,9 +912,13 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
   class="ant-descriptions ant-descriptions-bordered"
 >
   <div
-    class="ant-descriptions-title"
+    class="ant-descriptions-header"
   >
-    User Info
+    <div
+      class="ant-descriptions-title"
+    >
+      User Info
+    </div>
   </div>
   <div
     class="ant-descriptions-view"

components/descriptions/__tests__/index.test.js

@@ -227,4 +227,15 @@ describe('Descriptions', () => {
     expect(wrapper.find('th').hasClass('ant-descriptions-item-label')).toBeTruthy();
     expect(wrapper.find('td').hasClass('ant-descriptions-item-content')).toBeTruthy();
   });
+
+  it('Descriptions support extra', () => {
+    const wrapper = mount(
+      <Descriptions extra="Edit">
+        <Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
+      </Descriptions>,
+    );
+    expect(wrapper.find('.ant-descriptions-extra').exists()).toBe(true);
+    wrapper.setProps({ extra: undefined });
+    expect(wrapper.find('.ant-descriptions-extra').exists()).toBe(false);
+  });
 });

components/descriptions/demo/size.md

@@ -14,7 +14,7 @@ title:
 Custom sizes to fit in a variety of containers.
 
 ```jsx
-import { Descriptions, Radio } from 'antd';
+import { Descriptions, Radio, Button } from 'antd';
 
 class Demo extends React.Component {
   state = {
@@ -38,7 +38,12 @@ class Demo extends React.Component {
         </Radio.Group>
         <br />
         <br />
-        <Descriptions bordered title="Custom Size" size={this.state.size}>
+        <Descriptions
+          bordered
+          title="Custom Size"
+          size={this.state.size}
+          extra={<Button type="primary">Edit</Button>}
+        >
           <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
           <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
           <Descriptions.Item label="time">18:00:00</Descriptions.Item>
@@ -61,7 +66,11 @@ class Demo extends React.Component {
         </Descriptions>
         <br />
         <br />
-        <Descriptions title="Custom Size" size={this.state.size}>
+        <Descriptions
+          title="Custom Size"
+          size={this.state.size}
+          extra={<Button type="primary">Edit</Button>}
+        >
           <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
           <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
           <Descriptions.Item label="time">18:00:00</Descriptions.Item>

components/descriptions/index.en-US.md

@@ -19,6 +19,7 @@ Commonly displayed on the details page.
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | title | The title of the description list, placed at the top | ReactNode | - |  |
+| extra | The action area of the description list, placed at the top-right | string \| ReactNode | - | 4.5.0 |
 | bordered | Whether to display the border | boolean | false |  |
 | column | The number of `DescriptionItems` in a row,could be a number or a object like `{ xs: 8, sm: 16, md: 24}`,(Only set `bordered={true}` to take effect) | number | 3 |  |
 | size | Set the size of the list. Can be set to `middle`,`small`, or not filled | `default` \| `middle` \| `small` | - |  |

components/descriptions/index.tsx

@@ -100,6 +100,7 @@ export interface DescriptionsProps {
   size?: 'middle' | 'small' | 'default';
   children?: React.ReactNode;
   title?: React.ReactNode;
+  extra?: React.ReactNode;
   column?: number | Partial<Record<Breakpoint, number>>;
   layout?: 'horizontal' | 'vertical';
   colon?: boolean;
@@ -108,6 +109,7 @@ export interface DescriptionsProps {
 function Descriptions({
   prefixCls: customizePrefixCls,
   title,
+  extra,
   column = DEFAULT_COLUMN_MAP,
   colon = true,
   bordered,
@@ -148,7 +150,12 @@ function Descriptions({
       })}
       style={style}
     >
-      {title && <div className={`${prefixCls}-title`}>{title}</div>}
+      {(title || extra) && (
+        <div className={`${prefixCls}-header`}>
+          {title && <div className={`${prefixCls}-title`}>{title}</div>}
+          {extra && <div className={`${prefixCls}-extra`}>{extra}</div>}
+        </div>
+      )}
 
       <div className={`${prefixCls}-view`}>
         <table>

components/descriptions/index.zh-CN.md

@@ -20,6 +20,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/MjtG9_FOI/Descriptions.svg
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | title | 描述列表的标题，显示在最顶部 | ReactNode | - |  |
+| extra | 描述列表的操作区域，显示在右上方 | string \| ReactNode | - | 4.5.0 |
 | bordered | 是否展示边框 | boolean | false |  |
 | column | 一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number | 3 |  |
 | size | 设置列表的大小。可以设置为 `middle` 、`small`, 或不填（只有设置 `bordered={true}` 生效） | `default` \| `middle` \| `small` | - |  |

components/descriptions/style/index.less

@@ -4,12 +4,27 @@
 @descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
 
 .@{descriptions-prefix-cls} {
-  &-title {
+  &-header {
+    display: flex;
+    align-items: center;
     margin-bottom: @descriptions-title-margin-bottom;
+  }
+
+  &-title {
+    flex: auto;
+    overflow: hidden;
     color: @heading-color;
     font-weight: bold;
     font-size: @font-size-lg;
     line-height: @line-height-base;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &-extra {
+    margin-left: auto;
+    color: @descriptions-extra-color;
+    font-size: @font-size-base;
   }
 
   &-view {

components/style/themes/default.less

@@ -239,6 +239,7 @@
 @descriptions-item-trailing-colon: true;
 @descriptions-item-label-colon-margin-right: 8px;
 @descriptions-item-label-colon-margin-left: 2px;
+@descriptions-extra-color: @text-color;
 
 // Divider
 @divider-text-padding: 1em;