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,2 +1,3 @@
 import ro_RO from '../../date-picker/locale/ro_RO';
+
 export default ro_RO;

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>
 `;
 

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>
     );
   }

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.

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 的宽度。

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;