fix(badge): fix the color cannot be customized when count is 0 (#39062)

* test(badge): add case

* fix(badge): fix the color cannot be customized when count is 0

* test(badge): update snapshots

* docs(badge): update demo

* test: update case

* test(badge): update snapshots

components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1332,6 +1332,78 @@ Array [
       style="background:#fa541c"
     />
   </span>,
+  <span
+    class="ant-badge ant-badge-not-a-wrapper"
+  >
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true"
+      title="0"
+    >
+      0
+    </sup>
+  </span>,
+  <span
+    class="ant-badge ant-badge-not-a-wrapper"
+  >
+    <sup
+      class="ant-scroll-number ant-badge-count ant-badge-status-blue"
+      data-show="true"
+      title="0"
+    >
+      0
+    </sup>
+  </span>,
+  <span
+    class="ant-badge ant-badge-not-a-wrapper"
+  >
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true"
+      style="background:#f0f"
+      title="0"
+    >
+      0
+    </sup>
+  </span>,
+  <span
+    class="ant-badge"
+  >
+    <span
+      class="ant-avatar ant-avatar-lg ant-avatar-square"
+    >
+      <span
+        class="ant-avatar-string"
+        style="opacity:0"
+      />
+    </span>
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true"
+      title="0"
+    >
+      0
+    </sup>
+  </span>,
+  <span
+    class="ant-badge"
+  >
+    <span
+      class="ant-avatar ant-avatar-lg ant-avatar-square"
+    >
+      <span
+        class="ant-avatar-string"
+        style="opacity:0"
+      />
+    </span>
+    <sup
+      class="ant-scroll-number ant-badge-count ant-badge-status-blue"
+      data-show="true"
+      title="0"
+    >
+      0
+    </sup>
+  </span>,
 ]
 `;
 
@@ -1357,6 +1429,42 @@ exports[`renders ./components/badge/demo/no-wrapper.md extend context correctly
       />
     </button>
   </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
+    <span
+      class="ant-badge ant-badge-not-a-wrapper"
+    >
+      <sup
+        class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
+        data-show="true"
+        style="background:#faad14"
+        title="11"
+      >
+        <span
+          class="ant-scroll-number-only"
+          style="transition:none"
+        >
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            1
+          </span>
+        </span>
+        <span
+          class="ant-scroll-number-only"
+          style="transition:none"
+        >
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            1
+          </span>
+        </span>
+      </sup>
+    </span>
+  </div>
   <div
     class="ant-space-item"
     style="margin-right:8px"

components/badge/__tests__/__snapshots__/demo.test.ts.snap

@@ -1332,6 +1332,78 @@ Array [
       style="background:#fa541c"
     />
   </span>,
+  <span
+    class="ant-badge ant-badge-not-a-wrapper"
+  >
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true"
+      title="0"
+    >
+      0
+    </sup>
+  </span>,
+  <span
+    class="ant-badge ant-badge-not-a-wrapper"
+  >
+    <sup
+      class="ant-scroll-number ant-badge-count ant-badge-status-blue"
+      data-show="true"
+      title="0"
+    >
+      0
+    </sup>
+  </span>,
+  <span
+    class="ant-badge ant-badge-not-a-wrapper"
+  >
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true"
+      style="background:#f0f"
+      title="0"
+    >
+      0
+    </sup>
+  </span>,
+  <span
+    class="ant-badge"
+  >
+    <span
+      class="ant-avatar ant-avatar-lg ant-avatar-square"
+    >
+      <span
+        class="ant-avatar-string"
+        style="opacity:0"
+      />
+    </span>
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true"
+      title="0"
+    >
+      0
+    </sup>
+  </span>,
+  <span
+    class="ant-badge"
+  >
+    <span
+      class="ant-avatar ant-avatar-lg ant-avatar-square"
+    >
+      <span
+        class="ant-avatar-string"
+        style="opacity:0"
+      />
+    </span>
+    <sup
+      class="ant-scroll-number ant-badge-count ant-badge-status-blue"
+      data-show="true"
+      title="0"
+    >
+      0
+    </sup>
+  </span>,
 ]
 `;
 
@@ -1357,6 +1429,42 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
       />
     </button>
   </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
+    <span
+      class="ant-badge ant-badge-not-a-wrapper"
+    >
+      <sup
+        class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
+        data-show="true"
+        style="background:#faad14"
+        title="11"
+      >
+        <span
+          class="ant-scroll-number-only"
+          style="transition:none"
+        >
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            1
+          </span>
+        </span>
+        <span
+          class="ant-scroll-number-only"
+          style="transition:none"
+        >
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            1
+          </span>
+        </span>
+      </sup>
+    </span>
+  </div>
   <div
     class="ant-space-item"
     style="margin-right:8px"

components/badge/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,5 +1,58 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Badge Badge should display 0 when count is 0 1`] = `
+<div>
+  <span
+    class="ant-badge ant-badge-not-a-wrapper"
+  >
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true"
+      title="0"
+    >
+      0
+    </sup>
+  </span>
+  <span
+    class="ant-badge ant-badge-not-a-wrapper"
+  >
+    <sup
+      class="ant-scroll-number ant-badge-count ant-badge-status-blue"
+      data-show="true"
+      title="0"
+    >
+      0
+    </sup>
+  </span>
+  <span
+    class="ant-badge ant-badge-not-a-wrapper"
+  >
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true"
+      style="background: rgb(255, 0, 255);"
+      title="0"
+    >
+      0
+    </sup>
+  </span>
+  <span
+    class="ant-badge"
+  >
+    <div>
+      children
+    </div>
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true"
+      title="0"
+    >
+      0
+    </sup>
+  </span>
+</div>
+`;
+
 exports[`Badge render Badge status/color when contains children 1`] = `
 <div>
   <span

components/badge/__tests__/index.test.tsx

@@ -185,4 +185,21 @@ describe('Badge', () => {
 
     expect(container.querySelectorAll('.ant-badge > .ant-badge-status-text')).toHaveLength(0);
   });
+
+  // https://github.com/ant-design/ant-design/issues/38965
+  it('Badge should display 0 when count is 0', () => {
+    const { container } = render(
+      <>
+        <Badge count={0} showZero />
+        <Badge count={0} showZero color="blue" />
+        <Badge count={0} showZero color="#f0f" />
+        <Badge count={0} showZero>
+          <div>children</div>
+        </Badge>
+      </>,
+    );
+
+    expect(container).toMatchSnapshot();
+    expect(container.querySelectorAll('[title="0"]')).toHaveLength(4);
+  });
 });

components/badge/demo/mix.md

@@ -44,6 +44,15 @@ const App: React.FC = () => (
     <Badge dot color="#fa541c">
       <Avatar shape="square" size="large" />
     </Badge>
+    <Badge count={0} showZero />
+    <Badge count={0} showZero color="blue" />
+    <Badge count={0} showZero color="#f0f" />
+    <Badge count={0} showZero>
+      <Avatar shape="square" size="large" />
+    </Badge>
+    <Badge count={0} showZero color="blue">
+      <Avatar shape="square" size="large" />
+    </Badge>
   </>
 );
 

components/badge/demo/no-wrapper.md

@@ -26,6 +26,7 @@ const App: React.FC = () => {
   return (
     <Space>
       <Switch checked={show} onChange={() => setShow(!show)} />
+      <Badge count={show ? 11 : 0} showZero color="#faad14" />
       <Badge count={show ? 25 : 0} />
       <Badge count={show ? <ClockCircleOutlined style={{ color: '#f5222d' }} /> : 0} />
       <Badge

components/badge/index.tsx

@@ -65,7 +65,7 @@ const Badge: CompoundedComponent = ({
 
   const isZero = numberedDisplayCount === '0' || numberedDisplayCount === 0;
 
-  const ignoreCount = count === null || isZero;
+  const ignoreCount = count === null || (isZero && !showZero);
 
   const hasStatus =
     ((status !== null && status !== undefined) || (color !== null && color !== undefined)) &&