From 3db32cb6312795a13fab649d54bd26112448c466 Mon Sep 17 00:00:00 2001
From: hengkx <ycxzhkx@gmail.com>
Date: Wed, 10 Jul 2019 10:32:02 +0800
Subject: [PATCH 1/3] feat:Descriptions support colon props

---
 .../__tests__/__snapshots__/demo.test.js.snap | 88 +++++++++----------
 .../__snapshots__/index.test.js.snap          | 78 +++++++++++++---
 .../descriptions/__tests__/index.test.js      |  9 ++
 components/descriptions/index.en-US.md        |  1 +
 components/descriptions/index.tsx             | 37 ++++++--
 components/descriptions/index.zh-CN.md        |  1 +
 components/descriptions/style/index.less      |  6 ++
 7 files changed, 155 insertions(+), 65 deletions(-)

diff --git a/components/descriptions/__tests__/__snapshots__/demo.test.js.snap b/components/descriptions/__tests__/__snapshots__/demo.test.js.snap
index 7ed955a48f..393a8d1772 100644
--- a/components/descriptions/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/descriptions/__tests__/__snapshots__/demo.test.js.snap
@@ -22,7 +22,7 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
             colspan="1"
           >
             <span
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               UserName
             </span>
@@ -37,7 +37,7 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
             colspan="1"
           >
             <span
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Telephone
             </span>
@@ -52,7 +52,7 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
             colspan="1"
           >
             <span
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Live
             </span>
@@ -71,7 +71,7 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
             colspan="1"
           >
             <span
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Remark
             </span>
@@ -86,7 +86,7 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
             colspan="2"
           >
             <span
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Address
             </span>
@@ -121,7 +121,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
           class="ant-descriptions-row"
         >
           <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
           >
             Product
           </th>
@@ -132,7 +132,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
             Cloud Database
           </td>
           <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
           >
             Billing Mode
           </th>
@@ -143,7 +143,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
             Prepaid
           </td>
           <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
           >
             Automatic Renewal
           </th>
@@ -158,7 +158,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
           class="ant-descriptions-row"
         >
           <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
           >
             Order time
           </th>
@@ -169,7 +169,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
             2018-04-24 18:00:00
           </td>
           <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
           >
             Usage Time
           </th>
@@ -184,7 +184,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
           class="ant-descriptions-row"
         >
           <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
           >
             Status
           </th>
@@ -210,7 +210,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
           class="ant-descriptions-row"
         >
           <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
           >
             Negotiated Amount
           </th>
@@ -221,7 +221,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
             $80.00
           </td>
           <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
           >
             Discount
           </th>
@@ -232,7 +232,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
             $20.00
           </td>
           <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
           >
             Official Receipts
           </th>
@@ -247,7 +247,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
           class="ant-descriptions-row"
         >
           <th
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
           >
             Config Info
           </th>
@@ -298,7 +298,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
               colspan="1"
             >
               <span
-                class="ant-descriptions-item-label"
+                class="ant-descriptions-item-label ant-descriptions-item-colon"
               >
                 Product
               </span>
@@ -313,7 +313,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
               colspan="1"
             >
               <span
-                class="ant-descriptions-item-label"
+                class="ant-descriptions-item-label ant-descriptions-item-colon"
               >
                 Billing
               </span>
@@ -328,7 +328,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
               colspan="1"
             >
               <span
-                class="ant-descriptions-item-label"
+                class="ant-descriptions-item-label ant-descriptions-item-colon"
               >
                 time
               </span>
@@ -347,7 +347,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
               colspan="1"
             >
               <span
-                class="ant-descriptions-item-label"
+                class="ant-descriptions-item-label ant-descriptions-item-colon"
               >
                 Amount
               </span>
@@ -362,7 +362,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
               colspan="1"
             >
               <span
-                class="ant-descriptions-item-label"
+                class="ant-descriptions-item-label ant-descriptions-item-colon"
               >
                 Discount
               </span>
@@ -377,7 +377,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
               colspan="1"
             >
               <span
-                class="ant-descriptions-item-label"
+                class="ant-descriptions-item-label ant-descriptions-item-colon"
               >
                 Official
               </span>
@@ -396,7 +396,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
               colspan="3"
             >
               <span
-                class="ant-descriptions-item-label"
+                class="ant-descriptions-item-label ant-descriptions-item-colon"
               >
                 Config Info
               </span>
@@ -507,7 +507,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
             class="ant-descriptions-row"
           >
             <th
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Product
             </th>
@@ -518,7 +518,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
               Cloud Database
             </td>
             <th
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Billing
             </th>
@@ -529,7 +529,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
               Prepaid
             </td>
             <th
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               time
             </th>
@@ -544,7 +544,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
             class="ant-descriptions-row"
           >
             <th
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Amount
             </th>
@@ -555,7 +555,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
               $80.00
             </td>
             <th
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Discount
             </th>
@@ -566,7 +566,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
               $20.00
             </td>
             <th
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Official
             </th>
@@ -581,7 +581,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
             class="ant-descriptions-row"
           >
             <th
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Config Info
             </th>
@@ -632,7 +632,7 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
             colspan="1"
           >
             <span
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               UserName
             </span>
@@ -642,7 +642,7 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
             colspan="1"
           >
             <span
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Telephone
             </span>
@@ -652,7 +652,7 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
             colspan="1"
           >
             <span
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Live
             </span>
@@ -700,7 +700,7 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
             colspan="1"
           >
             <span
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Remark
             </span>
@@ -710,7 +710,7 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
             colspan="2"
           >
             <span
-              class="ant-descriptions-item-label"
+              class="ant-descriptions-item-label ant-descriptions-item-colon"
             >
               Address
             </span>
@@ -764,19 +764,19 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
           class="ant-descriptions-row"
         >
           <td
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="1"
           >
             Product
           </td>
           <td
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="1"
           >
             Billing Mode
           </td>
           <td
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="1"
           >
             Automatic Renewal
@@ -808,13 +808,13 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
           class="ant-descriptions-row"
         >
           <td
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="1"
           >
             Order time
           </td>
           <td
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="5"
           >
             Usage Time
@@ -840,7 +840,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
           class="ant-descriptions-row"
         >
           <td
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="5"
           >
             Status
@@ -871,19 +871,19 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
           class="ant-descriptions-row"
         >
           <td
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="1"
           >
             Negotiated Amount
           </td>
           <td
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="1"
           >
             Discount
           </td>
           <td
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="1"
           >
             Official Receipts
@@ -915,7 +915,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
           class="ant-descriptions-row"
         >
           <td
-            class="ant-descriptions-item-label"
+            class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="5"
           >
             Config Info
diff --git a/components/descriptions/__tests__/__snapshots__/index.test.js.snap b/components/descriptions/__tests__/__snapshots__/index.test.js.snap
index e269a348ff..c90513c35c 100644
--- a/components/descriptions/__tests__/__snapshots__/index.test.js.snap
+++ b/components/descriptions/__tests__/__snapshots__/index.test.js.snap
@@ -1,5 +1,57 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Descriptions Descriptions support colon 1`] = `
+<Descriptions
+  colon={false}
+  column={
+    Object {
+      "lg": 3,
+      "md": 3,
+      "sm": 2,
+      "xl": 3,
+      "xs": 1,
+      "xxl": 3,
+    }
+  }
+  size="default"
+>
+  <div
+    className="ant-descriptions"
+  >
+    <div
+      className="ant-descriptions-view"
+    >
+      <table>
+        <tbody>
+          <tr
+            className="ant-descriptions-row"
+            key="0"
+          >
+            <td
+              className="ant-descriptions-item"
+              colSpan={1}
+            >
+              <span
+                className="ant-descriptions-item-label"
+                key="label"
+              >
+                Product
+              </span>
+              <span
+                className="ant-descriptions-item-content"
+                key="content"
+              >
+                Cloud Database
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</Descriptions>
+`;
+
 exports[`Descriptions Descriptions.Item support className 1`] = `
 <Descriptions
   column={
@@ -31,7 +83,7 @@ exports[`Descriptions Descriptions.Item support className 1`] = `
               colSpan={1}
             >
               <span
-                className="ant-descriptions-item-label"
+                className="ant-descriptions-item-label ant-descriptions-item-colon"
                 key="label"
               >
                 Product
@@ -74,7 +126,7 @@ exports[`Descriptions column is number 1`] = `
               key=".$.0"
             >
               <span
-                className="ant-descriptions-item-label"
+                className="ant-descriptions-item-label ant-descriptions-item-colon"
                 key="label"
               >
                 Product
@@ -92,7 +144,7 @@ exports[`Descriptions column is number 1`] = `
               key=".$.1"
             >
               <span
-                className="ant-descriptions-item-label"
+                className="ant-descriptions-item-label ant-descriptions-item-colon"
                 key="label"
               >
                 Billing
@@ -109,7 +161,7 @@ exports[`Descriptions column is number 1`] = `
               colSpan={1}
             >
               <span
-                className="ant-descriptions-item-label"
+                className="ant-descriptions-item-label ant-descriptions-item-colon"
                 key="label"
               >
                 time
@@ -131,7 +183,7 @@ exports[`Descriptions column is number 1`] = `
               colSpan={3}
             >
               <span
-                className="ant-descriptions-item-label"
+                className="ant-descriptions-item-label ant-descriptions-item-colon"
                 key="label"
               >
                 Amount
@@ -183,7 +235,7 @@ exports[`Descriptions vertical layout 1`] = `
               colSpan={1}
             >
               <span
-                className="ant-descriptions-item-label"
+                className="ant-descriptions-item-label ant-descriptions-item-colon"
                 key="label"
               >
                 Product
@@ -215,7 +267,7 @@ exports[`Descriptions vertical layout 1`] = `
               colSpan={1}
             >
               <span
-                className="ant-descriptions-item-label"
+                className="ant-descriptions-item-label ant-descriptions-item-colon"
                 key="label"
               >
                 Billing
@@ -247,7 +299,7 @@ exports[`Descriptions vertical layout 1`] = `
               colSpan={1}
             >
               <span
-                className="ant-descriptions-item-label"
+                className="ant-descriptions-item-label ant-descriptions-item-colon"
                 key="label"
               >
                 time
@@ -279,7 +331,7 @@ exports[`Descriptions vertical layout 1`] = `
               colSpan={1}
             >
               <span
-                className="ant-descriptions-item-label"
+                className="ant-descriptions-item-label ant-descriptions-item-colon"
                 key="label"
               >
                 Amount
@@ -340,7 +392,7 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
               colSpan={1}
             >
               <span
-                className="ant-descriptions-item-label"
+                className="ant-descriptions-item-label ant-descriptions-item-colon"
                 key="label"
               >
                 Product
@@ -362,7 +414,7 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
               colSpan={1}
             >
               <span
-                className="ant-descriptions-item-label"
+                className="ant-descriptions-item-label ant-descriptions-item-colon"
                 key="label"
               >
                 Billing
@@ -384,7 +436,7 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
               colSpan={1}
             >
               <span
-                className="ant-descriptions-item-label"
+                className="ant-descriptions-item-label ant-descriptions-item-colon"
                 key="label"
               >
                 time
@@ -406,7 +458,7 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
               colSpan={1}
             >
               <span
-                className="ant-descriptions-item-label"
+                className="ant-descriptions-item-label ant-descriptions-item-colon"
                 key="label"
               >
                 Amount
diff --git a/components/descriptions/__tests__/index.test.js b/components/descriptions/__tests__/index.test.js
index 9c20b5523f..a4d01e046f 100644
--- a/components/descriptions/__tests__/index.test.js
+++ b/components/descriptions/__tests__/index.test.js
@@ -151,4 +151,13 @@ describe('Descriptions', () => {
     );
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('Descriptions support colon', () => {
+    const wrapper = mount(
+      <Descriptions colon={false}>
+        <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
+      </Descriptions>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
 });
diff --git a/components/descriptions/index.en-US.md b/components/descriptions/index.en-US.md
index e052191dd4..39e091917e 100644
--- a/components/descriptions/index.en-US.md
+++ b/components/descriptions/index.en-US.md
@@ -22,6 +22,7 @@ Commonly displayed on the details page.
 | 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` | false |
 | layout | Define description layout | `horizontal | vertical` | `horizontal` |
+| colon | change default props `colon` value of `Descriptions.Item` | boolean | true |
 
 ### DescriptionItem
 
diff --git a/components/descriptions/index.tsx b/components/descriptions/index.tsx
index 06cd33365c..13466f2f0a 100644
--- a/components/descriptions/index.tsx
+++ b/components/descriptions/index.tsx
@@ -29,6 +29,7 @@ export interface DescriptionsProps {
   title?: string;
   column?: number | Partial<Record<Breakpoint, number>>;
   layout?: 'horizontal' | 'vertical';
+  colon?: boolean;
 }
 
 /**
@@ -79,12 +80,17 @@ const generateChildrenRows = (
  *   <td>{DescriptionsItem.children}</td>
  * </>
  */
-const renderCol = (child: React.ReactElement<DescriptionsItemProps>, bordered: boolean) => {
+const renderCol = (
+  child: React.ReactElement<DescriptionsItemProps>,
+  bordered: boolean,
+  colon: boolean,
+) => {
   const { prefixCls, label, className, children, span = 1 } = child.props;
   if (bordered) {
     return [
       <th
         className={classNames(`${prefixCls}-item-label`, className, {
+          [`${prefixCls}-item-colon`]: colon,
           [`${prefixCls}-item-no-label`]: !label,
         })}
         key="label"
@@ -104,6 +110,7 @@ const renderCol = (child: React.ReactElement<DescriptionsItemProps>, bordered: b
     <td colSpan={span} className={classNames(`${prefixCls}-item`, className)}>
       <span
         className={classNames(`${prefixCls}-item-label`, {
+          [`${prefixCls}-item-colon`]: colon,
           [`${prefixCls}-item-no-label`]: !label,
         })}
         key="label"
@@ -117,18 +124,29 @@ const renderCol = (child: React.ReactElement<DescriptionsItemProps>, bordered: b
   );
 };
 
-const renderLabelCol = (child: React.ReactElement<DescriptionsItemProps>, bordered: boolean) => {
+const renderLabelCol = (
+  child: React.ReactElement<DescriptionsItemProps>,
+  bordered: boolean,
+  colon: boolean,
+) => {
   const { prefixCls, label, span = 1 } = child.props;
   if (bordered) {
     return (
-      <td className={`${prefixCls}-item-label`} key="label" colSpan={span * 2 - 1}>
+      <td
+        className={classNames(`${prefixCls}-item-label`, { [`${prefixCls}-item-colon`]: colon })}
+        key="label"
+        colSpan={span * 2 - 1}
+      >
         {label}
       </td>
     );
   }
   return (
     <td colSpan={span} className={`${prefixCls}-item`}>
-      <span className={`${prefixCls}-item-label`} key="label">
+      <span
+        className={classNames(`${prefixCls}-item-label`, { [`${prefixCls}-item-colon`]: colon })}
+        key="label"
+      >
         {label}
       </span>
     </td>
@@ -159,6 +177,7 @@ const renderRow = (
   { prefixCls, column, isLast }: { prefixCls: string; column: number; isLast: boolean },
   bordered: boolean,
   layout: string,
+  colon: boolean,
 ) => {
   // copy children,prevent changes to incoming parameters
   const childrenArray = [...children];
@@ -174,7 +193,7 @@ const renderRow = (
     const cloneLabelChildren = React.Children.map(
       childrenArray,
       (childrenItem: React.ReactElement<DescriptionsItemProps>) => {
-        return renderLabelCol(childrenItem, bordered);
+        return renderLabelCol(childrenItem, bordered, colon);
       },
     );
     const cloneContentChildren = React.Children.map(
@@ -186,7 +205,7 @@ const renderRow = (
     return [
       <tr className={`${prefixCls}-row`} key={`label-${index}`}>
         {cloneLabelChildren}
-        {renderLabelCol(lastChildren, bordered)}
+        {renderLabelCol(lastChildren, bordered, colon)}
       </tr>,
       <tr className={`${prefixCls}-row`} key={`content-${index}`}>
         {cloneContentChildren}
@@ -197,13 +216,13 @@ const renderRow = (
   const cloneChildren = React.Children.map(
     childrenArray,
     (childrenItem: React.ReactElement<DescriptionsItemProps>) => {
-      return renderCol(childrenItem, bordered);
+      return renderCol(childrenItem, bordered, colon);
     },
   );
   return (
     <tr className={`${prefixCls}-row`} key={index}>
       {cloneChildren}
-      {renderCol(lastChildren, bordered)}
+      {renderCol(lastChildren, bordered, colon)}
     </tr>
   );
 };
@@ -281,6 +300,7 @@ class Descriptions extends React.Component<
             children,
             bordered = false,
             layout = 'horizontal',
+            colon = true,
           } = this.props;
           const prefixCls = getPrefixCls('descriptions', customizePrefixCls);
 
@@ -322,6 +342,7 @@ class Descriptions extends React.Component<
                         },
                         bordered,
                         layout,
+                        colon,
                       ),
                     )}
                   </tbody>
diff --git a/components/descriptions/index.zh-CN.md b/components/descriptions/index.zh-CN.md
index c200a4dd89..ffd4e5daf0 100644
--- a/components/descriptions/index.zh-CN.md
+++ b/components/descriptions/index.zh-CN.md
@@ -23,6 +23,7 @@ cols: 1
 | column | 一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number | 3 |
 | size | 设置列表的大小。可以设置为 `middle` 、`small`, 或不填（只有设置 `bordered={true}` 生效） | `default | middle | small` | false |
 | layout | 描述布局 | `horizontal | vertical` | `horizontal` |
+| colon | 配置 `Descriptions.Item` 的 `colon` 的默认值 | boolean | true |
 
 ### DescriptionItem
 
diff --git a/components/descriptions/style/index.less b/components/descriptions/style/index.less
index 6282cd7533..ad7dfdbfae 100644
--- a/components/descriptions/style/index.less
+++ b/components/descriptions/style/index.less
@@ -47,6 +47,12 @@
       position: relative;
       top: -0.5px;
       margin: 0 8px 0 2px;
+      content: ' ';
+    }
+  }
+
+  &-item-colon {
+    &::after {
       content: ':';
     }
   }

From 99a2cc201e40a15a0e409b65c42c06afe4462ba1 Mon Sep 17 00:00:00 2001
From: hengkx <ycxzhkx@gmail.com>
Date: Wed, 10 Jul 2019 13:21:56 +0800
Subject: [PATCH 2/3] improve Descriptions code

---
 components/descriptions/Col.tsx               |  75 ++
 .../__tests__/__snapshots__/demo.test.js.snap |  40 +-
 .../__snapshots__/index.test.js.snap          | 741 ++++++++++++------
 components/descriptions/index.tsx             | 158 +---
 4 files changed, 646 insertions(+), 368 deletions(-)
 create mode 100644 components/descriptions/Col.tsx

diff --git a/components/descriptions/Col.tsx b/components/descriptions/Col.tsx
new file mode 100644
index 0000000000..e779b60e1c
--- /dev/null
+++ b/components/descriptions/Col.tsx
@@ -0,0 +1,75 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { DescriptionsItemProps } from './index';
+
+interface ColProps {
+  child: React.ReactElement<DescriptionsItemProps>;
+  bordered: boolean;
+  colon: boolean;
+  type?: 'label' | 'content';
+  layout?: 'horizontal' | 'vertical';
+}
+
+const Col: React.SFC<ColProps> = props => {
+  const { child, bordered, colon, type, layout } = props;
+  const { prefixCls, label, className, children, span = 1 } = child.props;
+  const labelProps: any = {
+    className: classNames(`${prefixCls}-item-label`, className, {
+      [`${prefixCls}-item-colon`]: colon,
+      [`${prefixCls}-item-no-label`]: !label,
+    }),
+    key: 'label',
+  };
+  if (layout === 'vertical') {
+    labelProps.colSpan = span * 2 - 1;
+  }
+
+  if (bordered) {
+    if (type === 'label') {
+      return <th {...labelProps}>{label}</th>;
+    }
+    return (
+      <td
+        className={classNames(`${prefixCls}-item-content`, className)}
+        key="content"
+        colSpan={span * 2 - 1}
+      >
+        {children}
+      </td>
+    );
+  }
+  if (layout === 'vertical') {
+    if (type === 'content') {
+      return (
+        <td colSpan={span} className={classNames(`${prefixCls}-item`, className)}>
+          <span className={`${prefixCls}-item-content`} key="content">
+            {children}
+          </span>
+        </td>
+      );
+    }
+    return (
+      <td
+        colSpan={bordered ? span * 2 - 1 : span}
+        className={classNames(`${prefixCls}-item`, className)}
+      >
+        <span
+          className={classNames(`${prefixCls}-item-label`, { [`${prefixCls}-item-colon`]: colon })}
+          key="label"
+        >
+          {label}
+        </span>
+      </td>
+    );
+  }
+  return (
+    <td colSpan={span} className={classNames(`${prefixCls}-item`, className)}>
+      <span {...labelProps}>{label}</span>
+      <span className={`${prefixCls}-item-content`} key="content">
+        {children}
+      </span>
+    </td>
+  );
+};
+
+export default Col;
diff --git a/components/descriptions/__tests__/__snapshots__/demo.test.js.snap b/components/descriptions/__tests__/__snapshots__/demo.test.js.snap
index 393a8d1772..68791d4000 100644
--- a/components/descriptions/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/descriptions/__tests__/__snapshots__/demo.test.js.snap
@@ -763,24 +763,24 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
         <tr
           class="ant-descriptions-row"
         >
-          <td
+          <th
             class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="1"
           >
             Product
-          </td>
-          <td
+          </th>
+          <th
             class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="1"
           >
             Billing Mode
-          </td>
-          <td
+          </th>
+          <th
             class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="1"
           >
             Automatic Renewal
-          </td>
+          </th>
         </tr>
         <tr
           class="ant-descriptions-row"
@@ -807,18 +807,18 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
         <tr
           class="ant-descriptions-row"
         >
-          <td
+          <th
             class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="1"
           >
             Order time
-          </td>
-          <td
+          </th>
+          <th
             class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="5"
           >
             Usage Time
-          </td>
+          </th>
         </tr>
         <tr
           class="ant-descriptions-row"
@@ -839,12 +839,12 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
         <tr
           class="ant-descriptions-row"
         >
-          <td
+          <th
             class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="5"
           >
             Status
-          </td>
+          </th>
         </tr>
         <tr
           class="ant-descriptions-row"
@@ -870,24 +870,24 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
         <tr
           class="ant-descriptions-row"
         >
-          <td
+          <th
             class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="1"
           >
             Negotiated Amount
-          </td>
-          <td
+          </th>
+          <th
             class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="1"
           >
             Discount
-          </td>
-          <td
+          </th>
+          <th
             class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="1"
           >
             Official Receipts
-          </td>
+          </th>
         </tr>
         <tr
           class="ant-descriptions-row"
@@ -914,12 +914,12 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
         <tr
           class="ant-descriptions-row"
         >
-          <td
+          <th
             class="ant-descriptions-item-label ant-descriptions-item-colon"
             colspan="5"
           >
             Config Info
-          </td>
+          </th>
         </tr>
         <tr
           class="ant-descriptions-row"
diff --git a/components/descriptions/__tests__/__snapshots__/index.test.js.snap b/components/descriptions/__tests__/__snapshots__/index.test.js.snap
index c90513c35c..ec235e8609 100644
--- a/components/descriptions/__tests__/__snapshots__/index.test.js.snap
+++ b/components/descriptions/__tests__/__snapshots__/index.test.js.snap
@@ -27,23 +27,40 @@ exports[`Descriptions Descriptions support colon 1`] = `
             className="ant-descriptions-row"
             key="0"
           >
-            <td
-              className="ant-descriptions-item"
-              colSpan={1}
+            <Col
+              bordered={false}
+              child={
+                <DescriptionsItem
+                  label="Product"
+                  prefixCls="ant-descriptions"
+                  span={1}
+                >
+                  Cloud Database
+                </DescriptionsItem>
+              }
+              colon={false}
+              key="label-0"
+              layout="horizontal"
+              type="label"
             >
-              <span
-                className="ant-descriptions-item-label"
-                key="label"
+              <td
+                className="ant-descriptions-item"
+                colSpan={1}
               >
-                Product
-              </span>
-              <span
-                className="ant-descriptions-item-content"
-                key="content"
-              >
-                Cloud Database
-              </span>
-            </td>
+                <span
+                  className="ant-descriptions-item-label"
+                  key="label"
+                >
+                  Product
+                </span>
+                <span
+                  className="ant-descriptions-item-content"
+                  key="content"
+                >
+                  Cloud Database
+                </span>
+              </td>
+            </Col>
           </tr>
         </tbody>
       </table>
@@ -78,23 +95,41 @@ exports[`Descriptions Descriptions.Item support className 1`] = `
             className="ant-descriptions-row"
             key="0"
           >
-            <td
-              className="ant-descriptions-item my-class"
-              colSpan={1}
+            <Col
+              bordered={false}
+              child={
+                <DescriptionsItem
+                  className="my-class"
+                  label="Product"
+                  prefixCls="ant-descriptions"
+                  span={1}
+                >
+                  Cloud Database
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="label-0"
+              layout="horizontal"
+              type="label"
             >
-              <span
-                className="ant-descriptions-item-label ant-descriptions-item-colon"
-                key="label"
+              <td
+                className="ant-descriptions-item my-class"
+                colSpan={1}
               >
-                Product
-              </span>
-              <span
-                className="ant-descriptions-item-content"
-                key="content"
-              >
-                Cloud Database
-              </span>
-            </td>
+                <span
+                  className="ant-descriptions-item-label my-class ant-descriptions-item-colon"
+                  key="label"
+                >
+                  Product
+                </span>
+                <span
+                  className="ant-descriptions-item-content"
+                  key="content"
+                >
+                  Cloud Database
+                </span>
+              </td>
+            </Col>
           </tr>
         </tbody>
       </table>
@@ -120,81 +155,144 @@ exports[`Descriptions column is number 1`] = `
             className="ant-descriptions-row"
             key="0"
           >
-            <td
-              className="ant-descriptions-item"
-              colSpan={1}
-              key=".$.0"
+            <Col
+              bordered={false}
+              child={
+                <DescriptionsItem
+                  label="Product"
+                  prefixCls="ant-descriptions"
+                >
+                  Cloud Database
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="label-0"
+              layout="horizontal"
+              type="label"
             >
-              <span
-                className="ant-descriptions-item-label ant-descriptions-item-colon"
-                key="label"
+              <td
+                className="ant-descriptions-item"
+                colSpan={1}
               >
-                Product
-              </span>
-              <span
-                className="ant-descriptions-item-content"
-                key="content"
-              >
-                Cloud Database
-              </span>
-            </td>
-            <td
-              className="ant-descriptions-item"
-              colSpan={1}
-              key=".$.1"
+                <span
+                  className="ant-descriptions-item-label ant-descriptions-item-colon"
+                  key="label"
+                >
+                  Product
+                </span>
+                <span
+                  className="ant-descriptions-item-content"
+                  key="content"
+                >
+                  Cloud Database
+                </span>
+              </td>
+            </Col>
+            <Col
+              bordered={false}
+              child={
+                <DescriptionsItem
+                  label="Billing"
+                  prefixCls="ant-descriptions"
+                >
+                  Prepaid
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="label-1"
+              layout="horizontal"
+              type="label"
             >
-              <span
-                className="ant-descriptions-item-label ant-descriptions-item-colon"
-                key="label"
+              <td
+                className="ant-descriptions-item"
+                colSpan={1}
               >
-                Billing
-              </span>
-              <span
-                className="ant-descriptions-item-content"
-                key="content"
-              >
-                Prepaid
-              </span>
-            </td>
-            <td
-              className="ant-descriptions-item"
-              colSpan={1}
+                <span
+                  className="ant-descriptions-item-label ant-descriptions-item-colon"
+                  key="label"
+                >
+                  Billing
+                </span>
+                <span
+                  className="ant-descriptions-item-content"
+                  key="content"
+                >
+                  Prepaid
+                </span>
+              </td>
+            </Col>
+            <Col
+              bordered={false}
+              child={
+                <DescriptionsItem
+                  label="time"
+                  prefixCls="ant-descriptions"
+                >
+                  18:00:00
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="label-2"
+              layout="horizontal"
+              type="label"
             >
-              <span
-                className="ant-descriptions-item-label ant-descriptions-item-colon"
-                key="label"
+              <td
+                className="ant-descriptions-item"
+                colSpan={1}
               >
-                time
-              </span>
-              <span
-                className="ant-descriptions-item-content"
-                key="content"
-              >
-                18:00:00
-              </span>
-            </td>
+                <span
+                  className="ant-descriptions-item-label ant-descriptions-item-colon"
+                  key="label"
+                >
+                  time
+                </span>
+                <span
+                  className="ant-descriptions-item-content"
+                  key="content"
+                >
+                  18:00:00
+                </span>
+              </td>
+            </Col>
           </tr>
           <tr
             className="ant-descriptions-row"
             key="1"
           >
-            <td
-              className="ant-descriptions-item"
-              colSpan={3}
+            <Col
+              bordered={false}
+              child={
+                <DescriptionsItem
+                  label="Amount"
+                  prefixCls="ant-descriptions"
+                  span={3}
+                >
+                  $80.00
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="label-0"
+              layout="horizontal"
+              type="label"
             >
-              <span
-                className="ant-descriptions-item-label ant-descriptions-item-colon"
-                key="label"
+              <td
+                className="ant-descriptions-item"
+                colSpan={3}
               >
-                Amount
-              </span>
-              <span
-                className="ant-descriptions-item-content"
-                key="content"
-              >
-                $80.00
-              </span>
-            </td>
+                <span
+                  className="ant-descriptions-item-label ant-descriptions-item-colon"
+                  key="label"
+                >
+                  Amount
+                </span>
+                <span
+                  className="ant-descriptions-item-content"
+                  key="content"
+                >
+                  $80.00
+                </span>
+              </td>
+            </Col>
           </tr>
         </tbody>
       </table>
@@ -230,129 +328,259 @@ exports[`Descriptions vertical layout 1`] = `
             className="ant-descriptions-row"
             key="label-0"
           >
-            <td
-              className="ant-descriptions-item"
-              colSpan={1}
+            <Col
+              bordered={false}
+              child={
+                <DescriptionsItem
+                  label="Product"
+                  prefixCls="ant-descriptions"
+                >
+                  Cloud Database
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="label-0"
+              layout="vertical"
+              type="label"
             >
-              <span
-                className="ant-descriptions-item-label ant-descriptions-item-colon"
-                key="label"
+              <td
+                className="ant-descriptions-item"
+                colSpan={1}
               >
-                Product
-              </span>
-            </td>
+                <span
+                  className="ant-descriptions-item-label ant-descriptions-item-colon"
+                  key="label"
+                >
+                  Product
+                </span>
+              </td>
+            </Col>
           </tr>
           <tr
             className="ant-descriptions-row"
             key="content-0"
           >
-            <td
-              className="ant-descriptions-item"
-              colSpan={1}
+            <Col
+              bordered={false}
+              child={
+                <DescriptionsItem
+                  label="Product"
+                  prefixCls="ant-descriptions"
+                >
+                  Cloud Database
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="content-0"
+              layout="vertical"
+              type="content"
             >
-              <span
-                className="ant-descriptions-item-content"
-                key="content"
+              <td
+                className="ant-descriptions-item"
+                colSpan={1}
               >
-                Cloud Database
-              </span>
-            </td>
+                <span
+                  className="ant-descriptions-item-content"
+                  key="content"
+                >
+                  Cloud Database
+                </span>
+              </td>
+            </Col>
           </tr>
           <tr
             className="ant-descriptions-row"
             key="label-1"
           >
-            <td
-              className="ant-descriptions-item"
-              colSpan={1}
+            <Col
+              bordered={false}
+              child={
+                <DescriptionsItem
+                  label="Billing"
+                  prefixCls="ant-descriptions"
+                >
+                  Prepaid
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="label-0"
+              layout="vertical"
+              type="label"
             >
-              <span
-                className="ant-descriptions-item-label ant-descriptions-item-colon"
-                key="label"
+              <td
+                className="ant-descriptions-item"
+                colSpan={1}
               >
-                Billing
-              </span>
-            </td>
+                <span
+                  className="ant-descriptions-item-label ant-descriptions-item-colon"
+                  key="label"
+                >
+                  Billing
+                </span>
+              </td>
+            </Col>
           </tr>
           <tr
             className="ant-descriptions-row"
             key="content-1"
           >
-            <td
-              className="ant-descriptions-item"
-              colSpan={1}
+            <Col
+              bordered={false}
+              child={
+                <DescriptionsItem
+                  label="Billing"
+                  prefixCls="ant-descriptions"
+                >
+                  Prepaid
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="content-0"
+              layout="vertical"
+              type="content"
             >
-              <span
-                className="ant-descriptions-item-content"
-                key="content"
+              <td
+                className="ant-descriptions-item"
+                colSpan={1}
               >
-                Prepaid
-              </span>
-            </td>
+                <span
+                  className="ant-descriptions-item-content"
+                  key="content"
+                >
+                  Prepaid
+                </span>
+              </td>
+            </Col>
           </tr>
           <tr
             className="ant-descriptions-row"
             key="label-2"
           >
-            <td
-              className="ant-descriptions-item"
-              colSpan={1}
+            <Col
+              bordered={false}
+              child={
+                <DescriptionsItem
+                  label="time"
+                  prefixCls="ant-descriptions"
+                >
+                  18:00:00
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="label-0"
+              layout="vertical"
+              type="label"
             >
-              <span
-                className="ant-descriptions-item-label ant-descriptions-item-colon"
-                key="label"
+              <td
+                className="ant-descriptions-item"
+                colSpan={1}
               >
-                time
-              </span>
-            </td>
+                <span
+                  className="ant-descriptions-item-label ant-descriptions-item-colon"
+                  key="label"
+                >
+                  time
+                </span>
+              </td>
+            </Col>
           </tr>
           <tr
             className="ant-descriptions-row"
             key="content-2"
           >
-            <td
-              className="ant-descriptions-item"
-              colSpan={1}
+            <Col
+              bordered={false}
+              child={
+                <DescriptionsItem
+                  label="time"
+                  prefixCls="ant-descriptions"
+                >
+                  18:00:00
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="content-0"
+              layout="vertical"
+              type="content"
             >
-              <span
-                className="ant-descriptions-item-content"
-                key="content"
+              <td
+                className="ant-descriptions-item"
+                colSpan={1}
               >
-                18:00:00
-              </span>
-            </td>
+                <span
+                  className="ant-descriptions-item-content"
+                  key="content"
+                >
+                  18:00:00
+                </span>
+              </td>
+            </Col>
           </tr>
           <tr
             className="ant-descriptions-row"
             key="label-3"
           >
-            <td
-              className="ant-descriptions-item"
-              colSpan={1}
+            <Col
+              bordered={false}
+              child={
+                <DescriptionsItem
+                  label="Amount"
+                  prefixCls="ant-descriptions"
+                  span={1}
+                >
+                  $80.00
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="label-0"
+              layout="vertical"
+              type="label"
             >
-              <span
-                className="ant-descriptions-item-label ant-descriptions-item-colon"
-                key="label"
+              <td
+                className="ant-descriptions-item"
+                colSpan={1}
               >
-                Amount
-              </span>
-            </td>
+                <span
+                  className="ant-descriptions-item-label ant-descriptions-item-colon"
+                  key="label"
+                >
+                  Amount
+                </span>
+              </td>
+            </Col>
           </tr>
           <tr
             className="ant-descriptions-row"
             key="content-3"
           >
-            <td
-              className="ant-descriptions-item"
-              colSpan={1}
+            <Col
+              bordered={false}
+              child={
+                <DescriptionsItem
+                  label="Amount"
+                  prefixCls="ant-descriptions"
+                  span={1}
+                >
+                  $80.00
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="content-0"
+              layout="vertical"
+              type="content"
             >
-              <span
-                className="ant-descriptions-item-content"
-                key="content"
+              <td
+                className="ant-descriptions-item"
+                colSpan={1}
               >
-                $80.00
-              </span>
-            </td>
+                <span
+                  className="ant-descriptions-item-content"
+                  key="content"
+                >
+                  $80.00
+                </span>
+              </td>
+            </Col>
           </tr>
         </tbody>
       </table>
@@ -387,89 +615,154 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
             className="ant-descriptions-row"
             key="0"
           >
-            <td
-              className="ant-descriptions-item"
-              colSpan={1}
+            <Col
+              bordered={false}
+              child={
+                <DescriptionsItem
+                  label="Product"
+                  prefixCls="ant-descriptions"
+                >
+                  Cloud Database
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="label-0"
+              layout="horizontal"
+              type="label"
             >
-              <span
-                className="ant-descriptions-item-label ant-descriptions-item-colon"
-                key="label"
+              <td
+                className="ant-descriptions-item"
+                colSpan={1}
               >
-                Product
-              </span>
-              <span
-                className="ant-descriptions-item-content"
-                key="content"
-              >
-                Cloud Database
-              </span>
-            </td>
+                <span
+                  className="ant-descriptions-item-label ant-descriptions-item-colon"
+                  key="label"
+                >
+                  Product
+                </span>
+                <span
+                  className="ant-descriptions-item-content"
+                  key="content"
+                >
+                  Cloud Database
+                </span>
+              </td>
+            </Col>
           </tr>
           <tr
             className="ant-descriptions-row"
             key="1"
           >
-            <td
-              className="ant-descriptions-item"
-              colSpan={1}
+            <Col
+              bordered={false}
+              child={
+                <DescriptionsItem
+                  label="Billing"
+                  prefixCls="ant-descriptions"
+                >
+                  Prepaid
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="label-0"
+              layout="horizontal"
+              type="label"
             >
-              <span
-                className="ant-descriptions-item-label ant-descriptions-item-colon"
-                key="label"
+              <td
+                className="ant-descriptions-item"
+                colSpan={1}
               >
-                Billing
-              </span>
-              <span
-                className="ant-descriptions-item-content"
-                key="content"
-              >
-                Prepaid
-              </span>
-            </td>
+                <span
+                  className="ant-descriptions-item-label ant-descriptions-item-colon"
+                  key="label"
+                >
+                  Billing
+                </span>
+                <span
+                  className="ant-descriptions-item-content"
+                  key="content"
+                >
+                  Prepaid
+                </span>
+              </td>
+            </Col>
           </tr>
           <tr
             className="ant-descriptions-row"
             key="2"
           >
-            <td
-              className="ant-descriptions-item"
-              colSpan={1}
+            <Col
+              bordered={false}
+              child={
+                <DescriptionsItem
+                  label="time"
+                  prefixCls="ant-descriptions"
+                >
+                  18:00:00
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="label-0"
+              layout="horizontal"
+              type="label"
             >
-              <span
-                className="ant-descriptions-item-label ant-descriptions-item-colon"
-                key="label"
+              <td
+                className="ant-descriptions-item"
+                colSpan={1}
               >
-                time
-              </span>
-              <span
-                className="ant-descriptions-item-content"
-                key="content"
-              >
-                18:00:00
-              </span>
-            </td>
+                <span
+                  className="ant-descriptions-item-label ant-descriptions-item-colon"
+                  key="label"
+                >
+                  time
+                </span>
+                <span
+                  className="ant-descriptions-item-content"
+                  key="content"
+                >
+                  18:00:00
+                </span>
+              </td>
+            </Col>
           </tr>
           <tr
             className="ant-descriptions-row"
             key="3"
           >
-            <td
-              className="ant-descriptions-item"
-              colSpan={1}
+            <Col
+              bordered={false}
+              child={
+                <DescriptionsItem
+                  label="Amount"
+                  prefixCls="ant-descriptions"
+                  span={1}
+                >
+                  $80.00
+                </DescriptionsItem>
+              }
+              colon={true}
+              key="label-0"
+              layout="horizontal"
+              type="label"
             >
-              <span
-                className="ant-descriptions-item-label ant-descriptions-item-colon"
-                key="label"
+              <td
+                className="ant-descriptions-item"
+                colSpan={1}
               >
-                Amount
-              </span>
-              <span
-                className="ant-descriptions-item-content"
-                key="content"
-              >
-                $80.00
-              </span>
-            </td>
+                <span
+                  className="ant-descriptions-item-label ant-descriptions-item-colon"
+                  key="label"
+                >
+                  Amount
+                </span>
+                <span
+                  className="ant-descriptions-item-content"
+                  key="content"
+                >
+                  $80.00
+                </span>
+              </td>
+            </Col>
           </tr>
         </tbody>
       </table>
diff --git a/components/descriptions/index.tsx b/components/descriptions/index.tsx
index 13466f2f0a..88990a6a09 100644
--- a/components/descriptions/index.tsx
+++ b/components/descriptions/index.tsx
@@ -7,6 +7,7 @@ import ResponsiveObserve, {
   responsiveArray,
 } from '../_util/responsiveObserve';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import Col from './Col';
 
 export interface DescriptionsItemProps {
   prefixCls?: string;
@@ -70,113 +71,12 @@ const generateChildrenRows = (
   return childrenArray;
 };
 
-/**
- * This code is for handling react15 does not support returning an array,
- * It can convert a children into th and td
- * @param child DescriptionsItem
- * @returns
- * <>
- *   <th>{DescriptionsItem.label}</th>
- *   <td>{DescriptionsItem.children}</td>
- * </>
- */
-const renderCol = (
-  child: React.ReactElement<DescriptionsItemProps>,
-  bordered: boolean,
-  colon: boolean,
-) => {
-  const { prefixCls, label, className, children, span = 1 } = child.props;
-  if (bordered) {
-    return [
-      <th
-        className={classNames(`${prefixCls}-item-label`, className, {
-          [`${prefixCls}-item-colon`]: colon,
-          [`${prefixCls}-item-no-label`]: !label,
-        })}
-        key="label"
-      >
-        {label}
-      </th>,
-      <td
-        className={classNames(`${prefixCls}-item-content`, className)}
-        key="content"
-        colSpan={span * 2 - 1}
-      >
-        {children}
-      </td>,
-    ];
-  }
-  return (
-    <td colSpan={span} className={classNames(`${prefixCls}-item`, className)}>
-      <span
-        className={classNames(`${prefixCls}-item-label`, {
-          [`${prefixCls}-item-colon`]: colon,
-          [`${prefixCls}-item-no-label`]: !label,
-        })}
-        key="label"
-      >
-        {label}
-      </span>
-      <span className={`${prefixCls}-item-content`} key="content">
-        {children}
-      </span>
-    </td>
-  );
-};
-
-const renderLabelCol = (
-  child: React.ReactElement<DescriptionsItemProps>,
-  bordered: boolean,
-  colon: boolean,
-) => {
-  const { prefixCls, label, span = 1 } = child.props;
-  if (bordered) {
-    return (
-      <td
-        className={classNames(`${prefixCls}-item-label`, { [`${prefixCls}-item-colon`]: colon })}
-        key="label"
-        colSpan={span * 2 - 1}
-      >
-        {label}
-      </td>
-    );
-  }
-  return (
-    <td colSpan={span} className={`${prefixCls}-item`}>
-      <span
-        className={classNames(`${prefixCls}-item-label`, { [`${prefixCls}-item-colon`]: colon })}
-        key="label"
-      >
-        {label}
-      </span>
-    </td>
-  );
-};
-
-const renderContentCol = (child: React.ReactElement<DescriptionsItemProps>, bordered: boolean) => {
-  const { prefixCls, children, span = 1 } = child.props;
-  if (bordered) {
-    return (
-      <td className={`${prefixCls}-item-content`} key="content" colSpan={span * 2 - 1}>
-        {children}
-      </td>
-    );
-  }
-  return (
-    <td colSpan={span} className={`${prefixCls}-item`}>
-      <span className={`${prefixCls}-item-content`} key="content">
-        {children}
-      </span>
-    </td>
-  );
-};
-
 const renderRow = (
   children: React.ReactElement<DescriptionsItemProps>[],
   index: number,
   { prefixCls, column, isLast }: { prefixCls: string; column: number; isLast: boolean },
   bordered: boolean,
-  layout: string,
+  layout: 'horizontal' | 'vertical',
   colon: boolean,
 ) => {
   // copy children,prevent changes to incoming parameters
@@ -188,41 +88,51 @@ const renderRow = (
       span,
     });
   }
+  childrenArray.push(lastChildren);
+
+  const renderCol = (
+    childrenItem: React.ReactElement<DescriptionsItemProps>,
+    type: 'label' | 'content',
+    idx: number,
+  ) => (
+    <Col
+      child={childrenItem}
+      bordered={bordered}
+      colon={colon}
+      type={type}
+      key={`${type}-${idx}`}
+      layout={layout}
+    />
+  );
+
+  const cloneChildren: JSX.Element[] = [];
+  const cloneContentChildren: JSX.Element[] = [];
+  React.Children.forEach(
+    childrenArray,
+    (childrenItem: React.ReactElement<DescriptionsItemProps>, idx: number) => {
+      cloneChildren.push(renderCol(childrenItem, 'label', idx));
+      if (layout === 'vertical') {
+        cloneContentChildren.push(renderCol(childrenItem, 'content', idx));
+      } else if (bordered) {
+        cloneChildren.push(renderCol(childrenItem, 'content', idx));
+      }
+    },
+  );
 
   if (layout === 'vertical') {
-    const cloneLabelChildren = React.Children.map(
-      childrenArray,
-      (childrenItem: React.ReactElement<DescriptionsItemProps>) => {
-        return renderLabelCol(childrenItem, bordered, colon);
-      },
-    );
-    const cloneContentChildren = React.Children.map(
-      childrenArray,
-      (childrenItem: React.ReactElement<DescriptionsItemProps>) => {
-        return renderContentCol(childrenItem, bordered);
-      },
-    );
     return [
       <tr className={`${prefixCls}-row`} key={`label-${index}`}>
-        {cloneLabelChildren}
-        {renderLabelCol(lastChildren, bordered, colon)}
+        {cloneChildren}
       </tr>,
       <tr className={`${prefixCls}-row`} key={`content-${index}`}>
         {cloneContentChildren}
-        {renderContentCol(lastChildren, bordered)}
       </tr>,
     ];
   }
-  const cloneChildren = React.Children.map(
-    childrenArray,
-    (childrenItem: React.ReactElement<DescriptionsItemProps>) => {
-      return renderCol(childrenItem, bordered, colon);
-    },
-  );
+
   return (
     <tr className={`${prefixCls}-row`} key={index}>
       {cloneChildren}
-      {renderCol(lastChildren, bordered, colon)}
     </tr>
   );
 };

From 628dbc2d6abdddbe324647de4534551b4136d77e Mon Sep 17 00:00:00 2001
From: hengkx <ycxzhkx@gmail.com>
Date: Wed, 10 Jul 2019 13:46:36 +0800
Subject: [PATCH 3/3] improve Descriptions code

---
 components/descriptions/Col.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/components/descriptions/Col.tsx b/components/descriptions/Col.tsx
index e779b60e1c..f147597dfc 100644
--- a/components/descriptions/Col.tsx
+++ b/components/descriptions/Col.tsx
@@ -49,10 +49,7 @@ const Col: React.SFC<ColProps> = props => {
       );
     }
     return (
-      <td
-        colSpan={bordered ? span * 2 - 1 : span}
-        className={classNames(`${prefixCls}-item`, className)}
-      >
+      <td colSpan={span} className={classNames(`${prefixCls}-item`, className)}>
         <span
           className={classNames(`${prefixCls}-item-label`, { [`${prefixCls}-item-colon`]: colon })}
           key="label"