fix: Descriptions.Item not support className (#17280)

* 🐛 Fix Desciptions.Item not support className

close #17276

* refactor descriptions styles implementation

* use `th` as label elements in bordered situation

* ✅ update snapshots

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

@@ -105,7 +105,7 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
 
 exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
 <div
-  class="ant-descriptions bordered"
+  class="ant-descriptions ant-descriptions-bordered"
 >
   <div
     class="ant-descriptions-title"
@@ -120,33 +120,33 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
         <tr
           class="ant-descriptions-row"
         >
-          <td
+          <th
             class="ant-descriptions-item-label"
           >
             Product
-          </td>
+          </th>
           <td
             class="ant-descriptions-item-content"
             colspan="1"
           >
             Cloud Database
           </td>
-          <td
+          <th
             class="ant-descriptions-item-label"
           >
             Billing Mode
-          </td>
+          </th>
           <td
             class="ant-descriptions-item-content"
             colspan="1"
           >
             Prepaid
           </td>
-          <td
+          <th
             class="ant-descriptions-item-label"
           >
             Automatic Renewal
-          </td>
+          </th>
           <td
             class="ant-descriptions-item-content"
             colspan="1"
@@ -157,22 +157,22 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
         <tr
           class="ant-descriptions-row"
         >
-          <td
+          <th
             class="ant-descriptions-item-label"
           >
             Order time
-          </td>
+          </th>
           <td
             class="ant-descriptions-item-content"
             colspan="1"
           >
             2018-04-24 18:00:00
           </td>
-          <td
+          <th
             class="ant-descriptions-item-label"
           >
             Usage Time
-          </td>
+          </th>
           <td
             class="ant-descriptions-item-content"
             colspan="5"
@@ -183,11 +183,11 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
         <tr
           class="ant-descriptions-row"
         >
-          <td
+          <th
             class="ant-descriptions-item-label"
           >
             Status
-          </td>
+          </th>
           <td
             class="ant-descriptions-item-content"
             colspan="5"
@@ -209,33 +209,33 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
         <tr
           class="ant-descriptions-row"
         >
-          <td
+          <th
             class="ant-descriptions-item-label"
           >
             Negotiated Amount
-          </td>
+          </th>
           <td
             class="ant-descriptions-item-content"
             colspan="1"
           >
             $80.00
           </td>
-          <td
+          <th
             class="ant-descriptions-item-label"
           >
             Discount
-          </td>
+          </th>
           <td
             class="ant-descriptions-item-content"
             colspan="1"
           >
             $20.00
           </td>
-          <td
+          <th
             class="ant-descriptions-item-label"
           >
             Official Receipts
-          </td>
+          </th>
           <td
             class="ant-descriptions-item-content"
             colspan="1"
@@ -246,11 +246,11 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
         <tr
           class="ant-descriptions-row"
         >
-          <td
+          <th
             class="ant-descriptions-item-label"
           >
             Config Info
-          </td>
+          </th>
           <td
             class="ant-descriptions-item-content"
             colspan="5"
@@ -491,7 +491,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
   <br />
   <br />
   <div
-    class="ant-descriptions bordered"
+    class="ant-descriptions ant-descriptions-bordered"
   >
     <div
       class="ant-descriptions-title"
@@ -506,33 +506,33 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
           <tr
             class="ant-descriptions-row"
           >
-            <td
+            <th
               class="ant-descriptions-item-label"
             >
               Product
-            </td>
+            </th>
             <td
               class="ant-descriptions-item-content"
               colspan="1"
             >
               Cloud Database
             </td>
-            <td
+            <th
               class="ant-descriptions-item-label"
             >
               Billing
-            </td>
+            </th>
             <td
               class="ant-descriptions-item-content"
               colspan="1"
             >
               Prepaid
             </td>
-            <td
+            <th
               class="ant-descriptions-item-label"
             >
               time
-            </td>
+            </th>
             <td
               class="ant-descriptions-item-content"
               colspan="1"
@@ -543,33 +543,33 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
           <tr
             class="ant-descriptions-row"
           >
-            <td
+            <th
               class="ant-descriptions-item-label"
             >
               Amount
-            </td>
+            </th>
             <td
               class="ant-descriptions-item-content"
               colspan="1"
             >
               $80.00
             </td>
-            <td
+            <th
               class="ant-descriptions-item-label"
             >
               Discount
-            </td>
+            </th>
             <td
               class="ant-descriptions-item-content"
               colspan="1"
             >
               $20.00
             </td>
-            <td
+            <th
               class="ant-descriptions-item-label"
             >
               Official
-            </td>
+            </th>
             <td
               class="ant-descriptions-item-content"
               colspan="1"
@@ -580,11 +580,11 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
           <tr
             class="ant-descriptions-row"
           >
-            <td
+            <th
               class="ant-descriptions-item-label"
             >
               Config Info
-            </td>
+            </th>
             <td
               class="ant-descriptions-item-content"
               colspan="5"

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

@@ -1,5 +1,56 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Descriptions Descriptions.Item support className 1`] = `
+<Descriptions
+  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 my-class"
+              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 column is number 1`] = `
 <Descriptions
   column="3"

components/descriptions/__tests__/index.test.js

@@ -124,4 +124,15 @@ describe('Descriptions', () => {
     expect(wrapper).toMatchSnapshot();
     wrapper.unmount();
   });
+
+  it('Descriptions.Item support className', () => {
+    const wrapper = mount(
+      <Descriptions>
+        <Descriptions.Item label="Product" className="my-class">
+          Cloud Database
+        </Descriptions.Item>
+      </Descriptions>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
 });

components/descriptions/index.tsx

@@ -10,6 +10,7 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 
 export interface DescriptionsItemProps {
   prefixCls?: string;
+  className?: string;
   label?: React.ReactNode;
   children: React.ReactNode;
   span?: number;
@@ -69,28 +70,32 @@ const generateChildrenRows = (
 
 /**
  * This code is for handling react15 does not support returning an array,
- * It can convert a children into two td
+ * It can convert a children into th and td
  * @param child DescriptionsItem
  * @returns
  * <>
- *   <td>{DescriptionsItem.label}</td>
+ *   <th>{DescriptionsItem.label}</th>
  *   <td>{DescriptionsItem.children}</td>
  * </>
  */
 const renderCol = (child: React.ReactElement<DescriptionsItemProps>, bordered: boolean) => {
-  const { prefixCls, label, children, span = 1 } = child.props;
+  const { prefixCls, label, className, children, span = 1 } = child.props;
   if (bordered) {
     return [
-      <td className={`${prefixCls}-item-label`} key="label">
+      <th className={classNames(`${prefixCls}-item-label`, className)} key="label">
         {label}
-      </td>,
-      <td className={`${prefixCls}-item-content`} key="content" colSpan={span * 2 - 1}>
+      </th>,
+      <td
+        className={classNames(`${prefixCls}-item-content`, className)}
+        key="content"
+        colSpan={span * 2 - 1}
+      >
         {children}
       </td>,
     ];
   }
   return (
-    <td colSpan={span} className={`${prefixCls}-item`}>
+    <td colSpan={span} className={classNames(`${prefixCls}-item`, className)}>
       <span className={`${prefixCls}-item-label`} key="label">
         {label}
       </span>
@@ -224,8 +229,8 @@ class Descriptions extends React.Component<
           return (
             <div
               className={classNames(prefixCls, className, {
-                [size as string]: size !== 'default',
-                bordered,
+                [`${prefixCls}-${size}`]: size !== 'default',
+                [`${prefixCls}-bordered`]: !!bordered,
               })}
             >
               {title && <div className={`${prefixCls}-title`}>{title}</div>}

components/descriptions/style/index.less

@@ -27,6 +27,7 @@
   }
 
   &-row {
+    > th,
     > td {
       padding-bottom: 16px;
     }
@@ -37,9 +38,11 @@
 
   &-item-label {
     color: @heading-color;
+    font-weight: normal;
     font-size: @font-size-base;
     line-height: @line-height-base;
     white-space: nowrap;
+
     &::after {
       position: relative;
       top: -0.5px;
@@ -60,49 +63,31 @@
     > span {
       display: inline-block;
     }
-    .@{descriptions-prefix-cls}-item-label {
-      float: left;
-      padding: 0 !important;
-    }
-    .@{descriptions-prefix-cls}-item-content {
-      float: left;
-      padding: 0 !important;
-    }
-  }
-
-  // padding setting
-  .@{descriptions-prefix-cls}-item-label,
-  .@{descriptions-prefix-cls}-item-content {
-    padding: @descriptions-default-padding;
   }
 
-  &.bordered.middle {
-    .@{descriptions-prefix-cls}-item-label,
-    .@{descriptions-prefix-cls}-item-content {
-      padding: @descriptions-middle-padding;
-    }
-  }
-  &.bordered.small {
-    .@{descriptions-prefix-cls}-item-label,
-    .@{descriptions-prefix-cls}-item-content {
-      padding: @descriptions-small-padding;
-    }
-  }
-  &.bordered {
+  &-bordered {
     .@{descriptions-prefix-cls}-view {
       border: 1px solid @border-color-split;
       > table {
         table-layout: auto;
       }
     }
+
     .@{descriptions-prefix-cls}-item-label,
     .@{descriptions-prefix-cls}-item-content {
+      padding: @descriptions-default-padding;
       border-right: 1px solid @border-color-split;
+
+      &:last-child {
+        border-right: none;
+      }
     }
 
-    .@{descriptions-prefix-cls}-item-label:last-child,
-    .@{descriptions-prefix-cls}-item-content:last-child {
-      border-right: none;
+    .@{descriptions-prefix-cls}-item-label {
+      background-color: #fafafa;
+      &::after {
+        display: none;
+      }
     }
 
     .@{descriptions-prefix-cls}-row {
@@ -112,10 +97,17 @@
       }
     }
 
-    .@{descriptions-prefix-cls}-item-label {
-      background-color: #fafafa;
-      &::after {
-        display: none;
+    &.@{descriptions-prefix-cls}-middle {
+      .@{descriptions-prefix-cls}-item-label,
+      .@{descriptions-prefix-cls}-item-content {
+        padding: @descriptions-middle-padding;
+      }
+    }
+
+    &.@{descriptions-prefix-cls}-small {
+      .@{descriptions-prefix-cls}-item-label,
+      .@{descriptions-prefix-cls}-item-content {
+        padding: @descriptions-small-padding;
       }
     }
   }