From b133c4a2c476c810eab00e466eb14613342b58b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B8=85?= <qixian.cs@outlook.com>
Date: Fri, 16 Aug 2019 10:01:46 +0800
Subject: [PATCH] style: descriptions style update (#18270)

* padding bottom support size

* add toc readme

* add demo

* fix lint

* snapshot updated
---
 components/calendar/locale/ro_RO.tsx          |   1 +
 .../__tests__/__snapshots__/demo.test.js.snap | 117 ++++++++++++++++++
 components/descriptions/demo/size.md          |  10 ++
 components/descriptions/index.en-US.md        |   2 +
 components/descriptions/index.zh-CN.md        |   2 +
 components/descriptions/style/index.less      |  18 +++
 6 files changed, 150 insertions(+)

diff --git a/components/calendar/locale/ro_RO.tsx b/components/calendar/locale/ro_RO.tsx
index c72d7a0400..e4e9ec0c3f 100644
--- a/components/calendar/locale/ro_RO.tsx
+++ b/components/calendar/locale/ro_RO.tsx
@@ -1,2 +1,3 @@
 import ro_RO from '../../date-picker/locale/ro_RO';
+
 export default ro_RO;
diff --git a/components/descriptions/__tests__/__snapshots__/demo.test.js.snap b/components/descriptions/__tests__/__snapshots__/demo.test.js.snap
index aea44df8d1..886c747392 100644
--- a/components/descriptions/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/descriptions/__tests__/__snapshots__/demo.test.js.snap
@@ -579,6 +579,123 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
       </table>
     </div>
   </div>
+  <br />
+  <br />
+  <div
+    class="ant-descriptions"
+  >
+    <div
+      class="ant-descriptions-title"
+    >
+      Custom Size
+    </div>
+    <div
+      class="ant-descriptions-view"
+    >
+      <table>
+        <tbody>
+          <tr
+            class="ant-descriptions-row"
+          >
+            <td
+              class="ant-descriptions-item"
+              colspan="1"
+            >
+              <span
+                class="ant-descriptions-item-label ant-descriptions-item-colon"
+              >
+                Product
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                Cloud Database
+              </span>
+            </td>
+            <td
+              class="ant-descriptions-item"
+              colspan="1"
+            >
+              <span
+                class="ant-descriptions-item-label ant-descriptions-item-colon"
+              >
+                Billing
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                Prepaid
+              </span>
+            </td>
+            <td
+              class="ant-descriptions-item"
+              colspan="1"
+            >
+              <span
+                class="ant-descriptions-item-label ant-descriptions-item-colon"
+              >
+                time
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                18:00:00
+              </span>
+            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
+            <td
+              class="ant-descriptions-item"
+              colspan="1"
+            >
+              <span
+                class="ant-descriptions-item-label ant-descriptions-item-colon"
+              >
+                Amount
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                $80.00
+              </span>
+            </td>
+            <td
+              class="ant-descriptions-item"
+              colspan="1"
+            >
+              <span
+                class="ant-descriptions-item-label ant-descriptions-item-colon"
+              >
+                Discount
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                $20.00
+              </span>
+            </td>
+            <td
+              class="ant-descriptions-item"
+              colspan="1"
+            >
+              <span
+                class="ant-descriptions-item-label ant-descriptions-item-colon"
+              >
+                Official
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                $60.00
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
 </div>
 `;
 
diff --git a/components/descriptions/demo/size.md b/components/descriptions/demo/size.md
index c321302fc2..d37fd7dba3 100644
--- a/components/descriptions/demo/size.md
+++ b/components/descriptions/demo/size.md
@@ -59,6 +59,16 @@ class Demo extends React.Component {
             Region: East China 1<br />
           </Descriptions.Item>
         </Descriptions>
+        <br />
+        <br />
+        <Descriptions title="Custom Size" border size={this.state.size}>
+          <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
+          <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
+          <Descriptions.Item label="time">18:00:00</Descriptions.Item>
+          <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
+          <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
+          <Descriptions.Item label="Official">$60.00</Descriptions.Item>
+        </Descriptions>
       </div>
     );
   }
diff --git a/components/descriptions/index.en-US.md b/components/descriptions/index.en-US.md
index b10e026387..0c8e8086f8 100644
--- a/components/descriptions/index.en-US.md
+++ b/components/descriptions/index.en-US.md
@@ -30,3 +30,5 @@ Commonly displayed on the details page.
 | -------- | ------------------------------ | --------- | ------- | ------- |
 | label    | description of the content     | ReactNode | -       | 3.19.0  |
 | span     | The number of columns included | number    | 1       | 3.19.0  |
+
+> The number of span Description.Item. Span={2} takes up the width of two DescriptionItems.
diff --git a/components/descriptions/index.zh-CN.md b/components/descriptions/index.zh-CN.md
index b91aa55cbe..ff03bc2174 100644
--- a/components/descriptions/index.zh-CN.md
+++ b/components/descriptions/index.zh-CN.md
@@ -31,3 +31,5 @@ cols: 1
 | ----- | ------------ | --------- | ------ | ------ |
 | label | 内容的描述   | ReactNode | -      | 3.19.0 |
 | span  | 包含列的数量 | number    | 1      | 3.19.0 |
+
+> span Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。
diff --git a/components/descriptions/style/index.less b/components/descriptions/style/index.less
index 074522aa2d..c7ab5fc64f 100644
--- a/components/descriptions/style/index.less
+++ b/components/descriptions/style/index.less
@@ -78,6 +78,24 @@
     }
   }
 
+  &-middle {
+    .@{descriptions-prefix-cls}-row {
+      > th,
+      > td {
+        padding-bottom: 12px;
+      }
+    }
+  }
+
+  &-small {
+    .@{descriptions-prefix-cls}-row {
+      > th,
+      > td {
+        padding-bottom: 8px;
+      }
+    }
+  }
+
   &-bordered {
     .@{descriptions-prefix-cls}-view {
       border: 1px solid @border-color-split;