fix: Descriptions number 0 can't render span (#34696)

* fix: number 0 can't render span * Update Cell.tsx * chore: add test case
ant-design · Mar 25, 2022 · 5588dae · 5588dae
1 parent be18ea6
commit 5588dae
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 2 deletions.
diff --git a/components/descriptions/Cell.tsx b/components/descriptions/Cell.tsx
@@ -60,7 +60,7 @@ const Cell: React.FC<CellProps> = ({
       colSpan={span}
     >
       <div className={`${itemPrefixCls}-item-container`}>
-        {label && (
+        {(label || label === 0) && (
           <span
             className={classNames(`${itemPrefixCls}-item-label`, {
               [`${itemPrefixCls}-item-no-colon`]: !colon,
@@ -70,7 +70,7 @@ const Cell: React.FC<CellProps> = ({
             {label}
           </span>
         )}
-        {content && (
+        {(content || content === 0) && (
           <span className={classNames(`${itemPrefixCls}-item-content`)} style={contentStyle}>
             {content}
           </span>

diff --git a/components/descriptions/__tests__/__snapshots__/index.test.js.snap b/components/descriptions/__tests__/__snapshots__/index.test.js.snap
@@ -209,6 +209,46 @@ exports[`Descriptions column is number 1`] = `
 </div>
 `;
 
+exports[`Descriptions number 0 should render correct 1`] = `
+<div
+  class="ant-descriptions"
+>
+  <div
+    class="ant-descriptions-view"
+  >
+    <table>
+      <tbody>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item"
+            colspan="1"
+          >
+            <div
+              class="ant-descriptions-item-container"
+            >
+              <span
+                class="ant-descriptions-item-label"
+                style="color: red;"
+              >
+                0
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+                style="color: red;"
+              >
+                0
+              </span>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`;
+
 exports[`Descriptions should work with React Fragment 1`] = `
 <div
   class="ant-descriptions"

diff --git a/components/descriptions/__tests__/index.test.js b/components/descriptions/__tests__/index.test.js
@@ -238,4 +238,15 @@ describe('Descriptions', () => {
     wrapper.setProps({ extra: undefined });
     expect(wrapper.find('.ant-descriptions-extra').exists()).toBe(false);
   });
+
+  it('number 0 should render correct', () => {
+    const wrapper = mount(
+      <Descriptions>
+        <Descriptions.Item label={0} labelStyle={{ color: 'red' }} contentStyle={{ color: 'red' }}>
+          {0}
+        </Descriptions.Item>
+      </Descriptions>,
+    );
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });