fix: Badge count style when customize color (#31617)

* fix: Badge count style when customize color

close #31590
close #31591

* add demo for debug

* update badge demos

* create ribbon.test.tsx

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

@@ -1,14 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/badge/demo/basic.md correctly 1`] = `
-<div>
+Array [
   <span
     class="ant-badge"
   >
-    <a
+    <span
-      class="head-example"
+      class="ant-avatar ant-avatar-lg ant-avatar-square"
-      href="#"
+    >
+      <span
+        class="ant-avatar-string"
+        style="opacity:0"
       />
+    </span>
     <sup
       class="ant-scroll-number ant-badge-count"
       data-show="true"
@@ -25,14 +29,18 @@ exports[`renders ./components/badge/demo/basic.md correctly 1`] = `
         </span>
       </span>
     </sup>
-  </span>
+  </span>,
   <span
     class="ant-badge"
   >
-    <a
+    <span
-      class="head-example"
+      class="ant-avatar ant-avatar-lg ant-avatar-square"
-      href="#"
+    >
+      <span
+        class="ant-avatar-string"
+        style="opacity:0"
       />
+    </span>
     <sup
       class="ant-scroll-number ant-badge-count"
       data-show="true"
@@ -40,14 +48,18 @@ exports[`renders ./components/badge/demo/basic.md correctly 1`] = `
     >
       0
     </sup>
-  </span>
+  </span>,
   <span
     class="ant-badge"
   >
-    <a
+    <span
-      class="head-example"
+      class="ant-avatar ant-avatar-lg ant-avatar-square"
-      href="#"
+    >
+      <span
+        class="ant-avatar-string"
+        style="opacity:0"
       />
+    </span>
     <span
       aria-label="clock-circle"
       class="anticon anticon-clock-circle ant-scroll-number-custom-component"
@@ -71,20 +83,23 @@ exports[`renders ./components/badge/demo/basic.md correctly 1`] = `
         />
       </svg>
     </span>
-  </span>
+  </span>,
-</div>
+]
 `;
 
 exports[`renders ./components/badge/demo/change.md correctly 1`] = `
-<div>
+Array [
-  <div>
   <span
     class="ant-badge"
   >
-      <a
+    <span
-        class="head-example"
+      class="ant-avatar ant-avatar-lg ant-avatar-square"
-        href="#"
+    >
+      <span
+        class="ant-avatar-string"
+        style="opacity:0"
       />
+    </span>
     <sup
       class="ant-scroll-number ant-badge-count"
       data-show="true"
@@ -101,7 +116,7 @@ exports[`renders ./components/badge/demo/change.md correctly 1`] = `
         </span>
       </span>
     </sup>
-    </span>
+  </span>,
   <div
     class="ant-btn-group"
   >
@@ -181,23 +196,27 @@ exports[`renders ./components/badge/demo/change.md correctly 1`] = `
         </svg>
       </span>
     </button>
-    </div>
+  </div>,
-  </div>
   <div
-    style="margin-top:10px"
+    class="ant-divider ant-divider-horizontal"
-  >
+    role="separator"
+  />,
   <span
     class="ant-badge"
   >
-      <a
+    <span
-        class="head-example"
+      class="ant-avatar ant-avatar-lg ant-avatar-square"
-        href="#"
+    >
+      <span
+        class="ant-avatar-string"
+        style="opacity:0"
       />
+    </span>
     <sup
       class="ant-scroll-number ant-badge-dot"
       data-show="true"
     />
-    </span>
+  </span>,
   <button
     aria-checked="true"
     class="ant-switch ant-switch-checked"
@@ -210,9 +229,8 @@ exports[`renders ./components/badge/demo/change.md correctly 1`] = `
     <span
       class="ant-switch-inner"
     />
-    </button>
+  </button>,
-  </div>
+]
-</div>
 `;
 
 exports[`renders ./components/badge/demo/colorful.md correctly 1`] = `
@@ -421,7 +439,6 @@ Array [
       Custom
     </span>
   </div>,
-  <div>
   <span
     class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
   >
@@ -434,8 +451,8 @@ Array [
     >
       #f50
     </span>
-    </span>
+  </span>,
-    <br />
+  <br />,
   <span
     class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
   >
@@ -448,8 +465,8 @@ Array [
     >
       #2db7f5
     </span>
-    </span>
+  </span>,
-    <br />
+  <br />,
   <span
     class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
   >
@@ -462,8 +479,8 @@ Array [
     >
       #87d068
     </span>
-    </span>
+  </span>,
-    <br />
+  <br />,
   <span
     class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
   >
@@ -476,13 +493,12 @@ Array [
     >
       #108ee9
     </span>
-    </span>
+  </span>,
-  </div>,
 ]
 `;
 
 exports[`renders ./components/badge/demo/dot.md correctly 1`] = `
-<div>
+Array [
   <span
     class="ant-badge"
   >
@@ -490,6 +506,7 @@ exports[`renders ./components/badge/demo/dot.md correctly 1`] = `
       aria-label="notification"
       class="anticon anticon-notification"
       role="img"
+      style="font-size:16px"
     >
       <svg
         aria-hidden="true"
@@ -509,30 +526,7 @@ exports[`renders ./components/badge/demo/dot.md correctly 1`] = `
       class="ant-scroll-number ant-badge-dot"
       data-show="true"
     />
-  </span>
+  </span>,
-  <span
-    class="ant-badge"
-  >
-    <span
-      aria-label="notification"
-      class="anticon anticon-notification"
-      role="img"
-    >
-      <svg
-        aria-hidden="true"
-        data-icon="notification"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"
-        />
-      </svg>
-    </span>
-  </span>
   <span
     class="ant-badge"
   >
@@ -545,8 +539,8 @@ exports[`renders ./components/badge/demo/dot.md correctly 1`] = `
       class="ant-scroll-number ant-badge-dot"
       data-show="true"
     />
-  </span>
+  </span>,
-</div>
+]
 `;
 
 exports[`renders ./components/badge/demo/link.md correctly 1`] = `
@@ -557,8 +551,13 @@ exports[`renders ./components/badge/demo/link.md correctly 1`] = `
     class="ant-badge"
   >
     <span
-      class="head-example"
+      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"
@@ -579,6 +578,189 @@ exports[`renders ./components/badge/demo/link.md correctly 1`] = `
 </a>
 `;
 
+exports[`renders ./components/badge/demo/mix.md correctly 1`] = `
+Array [
+  <span
+    class="ant-badge ant-badge-status"
+  >
+    <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-success"
+      data-show="true"
+      title="5"
+    >
+      <span
+        class="ant-scroll-number-only"
+        style="transition:none"
+      >
+        <span
+          class="ant-scroll-number-only-unit current"
+        >
+          5
+        </span>
+      </span>
+    </sup>
+  </span>,
+  <span
+    class="ant-badge ant-badge-status"
+  >
+    <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-warning"
+      data-show="true"
+      title="5"
+    >
+      <span
+        class="ant-scroll-number-only"
+        style="transition:none"
+      >
+        <span
+          class="ant-scroll-number-only-unit current"
+        >
+          5
+        </span>
+      </span>
+    </sup>
+  </span>,
+  <span
+    class="ant-badge ant-badge-status"
+  >
+    <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="5"
+    >
+      <span
+        class="ant-scroll-number-only"
+        style="transition:none"
+      >
+        <span
+          class="ant-scroll-number-only-unit current"
+        >
+          5
+        </span>
+      </span>
+    </sup>
+  </span>,
+  <span
+    class="ant-badge ant-badge-status"
+  >
+    <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"
+      style="background:#fa541c"
+      title="5"
+    >
+      <span
+        class="ant-scroll-number-only"
+        style="transition:none"
+      >
+        <span
+          class="ant-scroll-number-only-unit current"
+        >
+          5
+        </span>
+      </span>
+    </sup>
+  </span>,
+  <span
+    class="ant-badge ant-badge-status"
+  >
+    <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-dot ant-badge-status-success"
+      data-show="true"
+    />
+  </span>,
+  <span
+    class="ant-badge ant-badge-status"
+  >
+    <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-dot ant-badge-status-warning"
+      data-show="true"
+    />
+  </span>,
+  <span
+    class="ant-badge ant-badge-status"
+  >
+    <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-dot ant-badge-status-blue"
+      data-show="true"
+    />
+  </span>,
+  <span
+    class="ant-badge ant-badge-status"
+  >
+    <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-dot"
+      data-show="true"
+      style="background:#fa541c"
+    />
+  </span>,
+]
+`;
+
 exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
@@ -668,31 +850,6 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
       </span>
     </span>
   </div>
-  <div
-    class="ant-space-item"
-    style="margin-right:8px"
-  >
-    <span
-      class="ant-badge ant-badge-not-a-wrapper site-badge-count-4"
-    >
-      <sup
-        class="ant-scroll-number ant-badge-count"
-        data-show="true"
-        title="4"
-      >
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
-        </span>
-      </sup>
-    </span>
-  </div>
   <div
     class="ant-space-item"
   >
@@ -716,10 +873,14 @@ exports[`renders ./components/badge/demo/offset.md correctly 1`] = `
 <span
   class="ant-badge"
 >
-  <a
+  <span
-    class="head-example"
+    class="ant-avatar ant-avatar-lg ant-avatar-square"
-    href="#"
+  >
+    <span
+      class="ant-avatar-string"
+      style="opacity:0"
     />
+  </span>
   <sup
     class="ant-scroll-number ant-badge-count"
     data-show="true"
@@ -741,14 +902,18 @@ exports[`renders ./components/badge/demo/offset.md correctly 1`] = `
 `;
 
 exports[`renders ./components/badge/demo/overflow.md correctly 1`] = `
-<div>
+Array [
   <span
     class="ant-badge"
   >
-    <a
+    <span
-      class="head-example"
+      class="ant-avatar ant-avatar-lg ant-avatar-square"
-      href="#"
+    >
+      <span
+        class="ant-avatar-string"
+        style="opacity:0"
       />
+    </span>
     <sup
       class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
       data-show="true"
@@ -775,14 +940,18 @@ exports[`renders ./components/badge/demo/overflow.md correctly 1`] = `
         </span>
       </span>
     </sup>
-  </span>
+  </span>,
   <span
     class="ant-badge"
   >
-    <a
+    <span
-      class="head-example"
+      class="ant-avatar ant-avatar-lg ant-avatar-square"
-      href="#"
+    >
+      <span
+        class="ant-avatar-string"
+        style="opacity:0"
       />
+    </span>
     <sup
       class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
       data-show="true"
@@ -790,14 +959,18 @@ exports[`renders ./components/badge/demo/overflow.md correctly 1`] = `
     >
       99+
     </sup>
-  </span>
+  </span>,
   <span
     class="ant-badge"
   >
-    <a
+    <span
-      class="head-example"
+      class="ant-avatar ant-avatar-lg ant-avatar-square"
-      href="#"
+    >
+      <span
+        class="ant-avatar-string"
+        style="opacity:0"
       />
+    </span>
     <sup
       class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
       data-show="true"
@@ -805,14 +978,18 @@ exports[`renders ./components/badge/demo/overflow.md correctly 1`] = `
     >
       10+
     </sup>
-  </span>
+  </span>,
   <span
     class="ant-badge"
   >
-    <a
+    <span
-      class="head-example"
+      class="ant-avatar ant-avatar-lg ant-avatar-square"
-      href="#"
+    >
+      <span
+        class="ant-avatar-string"
+        style="opacity:0"
       />
+    </span>
     <sup
       class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
       data-show="true"
@@ -820,8 +997,8 @@ exports[`renders ./components/badge/demo/overflow.md correctly 1`] = `
     >
       999+
     </sup>
-  </span>
+  </span>,
-</div>
+]
 `;
 
 exports[`renders ./components/badge/demo/ribbbon.md correctly 1`] = `
@@ -1301,10 +1478,14 @@ Array [
   <span
     class="ant-badge"
   >
-    <a
+    <span
-      class="head-example"
+      class="ant-avatar ant-avatar-lg ant-avatar-square"
-      href="#"
+    >
+      <span
+        class="ant-avatar-string"
+        style="opacity:0"
       />
+    </span>
     <sup
       class="ant-scroll-number ant-badge-count"
       data-show="true"
@@ -1325,10 +1506,14 @@ Array [
   <span
     class="ant-badge"
   >
-    <a
+    <span
-      class="head-example"
+      class="ant-avatar ant-avatar-lg ant-avatar-square"
-      href="#"
+    >
+      <span
+        class="ant-avatar-string"
+        style="opacity:0"
       />
+    </span>
     <sup
       class="ant-scroll-number ant-badge-count ant-badge-count-sm"
       data-show="true"
@@ -1350,7 +1535,7 @@ Array [
 `;
 
 exports[`renders ./components/badge/demo/status.md correctly 1`] = `
-<div>
+Array [
   <span
     class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
   >
@@ -1360,7 +1545,7 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = `
     <span
       class="ant-badge-status-text"
     />
-  </span>
+  </span>,
   <span
     class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
   >
@@ -1370,7 +1555,7 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = `
     <span
       class="ant-badge-status-text"
     />
-  </span>
+  </span>,
   <span
     class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
   >
@@ -1380,7 +1565,7 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = `
     <span
       class="ant-badge-status-text"
     />
-  </span>
+  </span>,
   <span
     class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
   >
@@ -1390,7 +1575,7 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = `
     <span
       class="ant-badge-status-text"
     />
-  </span>
+  </span>,
   <span
     class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
   >
@@ -1400,8 +1585,8 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = `
     <span
       class="ant-badge-status-text"
     />
-  </span>
+  </span>,
-  <br />
+  <br />,
   <span
     class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
   >
@@ -1413,8 +1598,8 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = `
     >
       Success
     </span>
-  </span>
+  </span>,
-  <br />
+  <br />,
   <span
     class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
   >
@@ -1426,8 +1611,8 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = `
     >
       Error
     </span>
-  </span>
+  </span>,
-  <br />
+  <br />,
   <span
     class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
   >
@@ -1439,8 +1624,8 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = `
     >
       Default
     </span>
-  </span>
+  </span>,
-  <br />
+  <br />,
   <span
     class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
   >
@@ -1452,8 +1637,8 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = `
     >
       Processing
     </span>
-  </span>
+  </span>,
-  <br />
+  <br />,
   <span
     class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
   >
@@ -1465,19 +1650,23 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = `
     >
       Warning
     </span>
-  </span>
+  </span>,
-</div>
+]
 `;
 
 exports[`renders ./components/badge/demo/title.md correctly 1`] = `
-<div>
+Array [
   <span
     class="ant-badge"
   >
-    <a
+    <span
-      class="head-example"
+      class="ant-avatar ant-avatar-lg ant-avatar-square"
-      href="#"
+    >
+      <span
+        class="ant-avatar-string"
+        style="opacity:0"
       />
+    </span>
     <sup
       class="ant-scroll-number ant-badge-count"
       data-show="true"
@@ -1494,14 +1683,18 @@ exports[`renders ./components/badge/demo/title.md correctly 1`] = `
         </span>
       </span>
     </sup>
-  </span>
+  </span>,
   <span
     class="ant-badge"
   >
-    <a
+    <span
-      class="head-example"
+      class="ant-avatar ant-avatar-lg ant-avatar-square"
-      href="#"
+    >
+      <span
+        class="ant-avatar-string"
+        style="opacity:0"
       />
+    </span>
     <sup
       class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
       data-show="true"
@@ -1528,6 +1721,6 @@ exports[`renders ./components/badge/demo/title.md correctly 1`] = `
         </span>
       </span>
     </sup>
-  </span>
+  </span>,
-</div>
+]
 `;

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

@@ -7,31 +7,64 @@ exports[`Badge render Badge status/color when contains children 1`] = `
   >
     <a />
     <sup
-      class="ant-scroll-number ant-badge-dot ant-badge-status-success"
+      class="ant-scroll-number ant-badge-count ant-badge-status-success"
       data-show="true"
       title="5"
-    />
+    >
+      <span
+        class="ant-scroll-number-only"
+        style="transition: none;"
+      >
+        <span
+          class="ant-scroll-number-only-unit current"
+        >
+          5
+        </span>
+      </span>
+    </sup>
   </span>
   <span
     class="ant-badge ant-badge-status"
   >
     <a />
     <sup
-      class="ant-scroll-number ant-badge-dot ant-badge-status-blue"
+      class="ant-scroll-number ant-badge-count ant-badge-status-blue"
       data-show="true"
       title="5"
-    />
+    >
+      <span
+        class="ant-scroll-number-only"
+        style="transition: none;"
+      >
+        <span
+          class="ant-scroll-number-only-unit current"
+        >
+          5
+        </span>
+      </span>
+    </sup>
   </span>
   <span
     class="ant-badge ant-badge-status"
   >
     <a />
     <sup
-      class="ant-scroll-number ant-badge-dot"
+      class="ant-scroll-number ant-badge-count"
       data-show="true"
       style="background: rgb(0, 136, 204);"
       title="5"
-    />
+    >
+      <span
+        class="ant-scroll-number-only"
+        style="transition: none;"
+      >
+        <span
+          class="ant-scroll-number-only-unit current"
+        >
+          5
+        </span>
+      </span>
+    </sup>
   </span>
 </div>
 `;
@@ -547,20 +580,3 @@ exports[`Badge should support offset when count is a ReactNode 1`] = `
   />
 </span>
 `;
-
-exports[`Ribbon rtl render component should be rendered correctly in RTL direction 1`] = `
-<div
-  class="ant-ribbon-wrapper"
->
-  <div
-    class="ant-ribbon ant-ribbon-placement-end ant-ribbon-rtl"
-  >
-    <span
-      class="ant-ribbon-text"
-    />
-    <div
-      class="ant-ribbon-corner"
-    />
-  </div>
-</div>
-`;

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

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Ribbon rtl render component should be rendered correctly in RTL direction 1`] = `
+<div
+  class="ant-ribbon-wrapper"
+>
+  <div
+    class="ant-ribbon ant-ribbon-placement-end ant-ribbon-rtl"
+  >
+    <span
+      class="ant-ribbon-text"
+    />
+    <div
+      class="ant-ribbon-corner"
+    />
+  </div>
+</div>
+`;

components/badge/__tests__/index.test.js

@@ -128,6 +128,7 @@ describe('Badge', () => {
   });
 
   // https://github.com/ant-design/ant-design/issues/21331
+  // https://github.com/ant-design/ant-design/issues/31590
   it('render Badge status/color when contains children', () => {
     const wrapper = mount(
       <div>
@@ -143,6 +144,9 @@ describe('Badge', () => {
       </div>,
     );
     expect(wrapper.render()).toMatchSnapshot();
+    expect(wrapper.find(Badge).at(0).find('.ant-scroll-number-only-unit').text()).toBe('5');
+    expect(wrapper.find(Badge).at(1).find('.ant-scroll-number-only-unit').text()).toBe('5');
+    expect(wrapper.find(Badge).at(2).find('.ant-scroll-number-only-unit').text()).toBe('5');
   });
 
   it('Badge should work when status/color is empty string', () => {
@@ -156,72 +160,3 @@ describe('Badge', () => {
     expect(wrapper.find('.ant-badge')).toHaveLength(2);
   });
 });
-
-describe('Ribbon', () => {
-  mountTest(Badge.Ribbon);
-  rtlTest(Badge.Ribbon);
-
-  describe('placement', () => {
-    it('works with `start` & `end` placement', () => {
-      const wrapperStart = mount(
-        <Badge.Ribbon placement="start">
-          <div />
-        </Badge.Ribbon>,
-      );
-      expect(wrapperStart.find('.ant-ribbon-placement-start').length).toEqual(1);
-
-      const wrapperEnd = mount(
-        <Badge.Ribbon placement="end">
-          <div />
-        </Badge.Ribbon>,
-      );
-      expect(wrapperEnd.find('.ant-ribbon-placement-end').length).toEqual(1);
-    });
-  });
-
-  describe('color', () => {
-    it('works with preset color', () => {
-      const wrapper = mount(
-        <Badge.Ribbon color="green">
-          <div />
-        </Badge.Ribbon>,
-      );
-      expect(wrapper.find('.ant-ribbon-color-green').length).toEqual(1);
-    });
-    it('works with custom color', () => {
-      const wrapperLeft = mount(
-        <Badge.Ribbon color="#888" placement="start">
-          <div />
-        </Badge.Ribbon>,
-      );
-      expect(wrapperLeft.find('.ant-ribbon').prop('style').background).toEqual('#888');
-      expect(wrapperLeft.find('.ant-ribbon-corner').prop('style').color).toEqual('#888');
-      const wrapperRight = mount(
-        <Badge.Ribbon color="#888" placement="end">
-          <div />
-        </Badge.Ribbon>,
-      );
-      expect(wrapperRight.find('.ant-ribbon').prop('style').background).toEqual('#888');
-      expect(wrapperRight.find('.ant-ribbon-corner').prop('style').color).toEqual('#888');
-    });
-  });
-
-  describe('text', () => {
-    it('works with string', () => {
-      const wrapper = mount(
-        <Badge.Ribbon text="cool">
-          <div />
-        </Badge.Ribbon>,
-      );
-      expect(wrapper.find('.ant-ribbon').text()).toEqual('cool');
-    });
-    it('works with element', () => {
-      const wrapper = mount(
-        <Badge.Ribbon text={<span className="cool" />}>
-          <div />
-        </Badge.Ribbon>,
-      );
-      expect(wrapper.find('.cool').length).toEqual(1);
-    });
-  });
-});

components/badge/__tests__/ribbon.test.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Badge from '../index';
+import mountTest from '../../../tests/shared/mountTest';
+import rtlTest from '../../../tests/shared/rtlTest';
+
+describe('Ribbon', () => {
+  mountTest(Badge.Ribbon);
+  rtlTest(Badge.Ribbon);
+
+  describe('placement', () => {
+    it('works with `start` & `end` placement', () => {
+      const wrapperStart = mount(
+        <Badge.Ribbon placement="start">
+          <div />
+        </Badge.Ribbon>,
+      );
+      expect(wrapperStart.find('.ant-ribbon-placement-start').length).toEqual(1);
+
+      const wrapperEnd = mount(
+        <Badge.Ribbon placement="end">
+          <div />
+        </Badge.Ribbon>,
+      );
+      expect(wrapperEnd.find('.ant-ribbon-placement-end').length).toEqual(1);
+    });
+  });
+
+  describe('color', () => {
+    it('works with preset color', () => {
+      const wrapper = mount(
+        <Badge.Ribbon color="green">
+          <div />
+        </Badge.Ribbon>,
+      );
+      expect(wrapper.find('.ant-ribbon-color-green').length).toEqual(1);
+    });
+    it('works with custom color', () => {
+      const wrapperLeft = mount(
+        <Badge.Ribbon color="#888" placement="start">
+          <div />
+        </Badge.Ribbon>,
+      );
+      expect(wrapperLeft.find('.ant-ribbon').prop('style')?.background).toEqual('#888');
+      expect(wrapperLeft.find('.ant-ribbon-corner').prop('style')?.color).toEqual('#888');
+      const wrapperRight = mount(
+        <Badge.Ribbon color="#888" placement="end">
+          <div />
+        </Badge.Ribbon>,
+      );
+      expect(wrapperRight.find('.ant-ribbon').prop('style')?.background).toEqual('#888');
+      expect(wrapperRight.find('.ant-ribbon-corner').prop('style')?.color).toEqual('#888');
+    });
+  });
+
+  describe('text', () => {
+    it('works with string', () => {
+      const wrapper = mount(
+        <Badge.Ribbon text="cool">
+          <div />
+        </Badge.Ribbon>,
+      );
+      expect(wrapper.find('.ant-ribbon').text()).toEqual('cool');
+    });
+    it('works with element', () => {
+      const wrapper = mount(
+        <Badge.Ribbon text={<span className="cool" />}>
+          <div />
+        </Badge.Ribbon>,
+      );
+      expect(wrapper.find('.cool').length).toEqual(1);
+    });
+  });
+});

components/badge/demo/basic.md

@@ -14,21 +14,21 @@ title:
 Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it.
 
 ```jsx
-import { Badge } from 'antd';
+import { Badge, Avatar } from 'antd';
 import { ClockCircleOutlined } from '@ant-design/icons';
 
 ReactDOM.render(
-  <div>
+  <>
     <Badge count={5}>
-      <a href="#" className="head-example" />
+      <Avatar shape="square" size="large" />
     </Badge>
     <Badge count={0} showZero>
-      <a href="#" className="head-example" />
+      <Avatar shape="square" size="large" />
     </Badge>
     <Badge count={<ClockCircleOutlined style={{ color: '#f5222d' }} />}>
-      <a href="#" className="head-example" />
+      <Avatar shape="square" size="large" />
     </Badge>
-  </div>,
+  </>,
   mountNode,
 );
 ```
@@ -41,15 +41,4 @@ ReactDOM.render(
   margin-right: 0;
   margin-left: 20px;
 }
-.head-example {
-  width: 42px;
-  height: 42px;
-  border-radius: 2px;
-  background: #eee;
-  display: inline-block;
-  vertical-align: middle;
-}
-[data-theme="dark"] .head-example {
-  background: rgba(255,255,255,.12);
-}
 </style>

components/badge/demo/change.md

@@ -14,7 +14,7 @@ title:
 The count will be animated as it changes.
 
 ```jsx
-import { Badge, Button, Switch } from 'antd';
+import { Badge, Button, Switch, Divider, Avatar } from 'antd';
 import { MinusOutlined, PlusOutlined, QuestionOutlined } from '@ant-design/icons';
 
 const ButtonGroup = Button.Group;
@@ -49,10 +49,9 @@ class Demo extends React.Component {
 
   render() {
     return (
-      <div>
+      <>
-        <div>
         <Badge count={this.state.count}>
-            <a href="#" className="head-example" />
+          <Avatar shape="square" size="large" />
         </Badge>
         <ButtonGroup>
           <Button onClick={this.decline}>
@@ -65,14 +64,12 @@ class Demo extends React.Component {
             <QuestionOutlined />
           </Button>
         </ButtonGroup>
-        </div>
+        <Divider />
-        <div style={{ marginTop: 10 }}>
         <Badge dot={this.state.show}>
-            <a href="#" className="head-example" />
+          <Avatar shape="square" size="large" />
         </Badge>
         <Switch onChange={this.onChange} checked={this.state.show} />
-        </div>
+      </>
-      </div>
     );
   }
 }

components/badge/demo/colorful.md

@@ -1,5 +1,5 @@
 ---
-order: 8
+order: 9
 title:
   zh-CN: 多彩徽标
   en-US: Colorful Badge
@@ -43,7 +43,7 @@ ReactDOM.render(
       ))}
     </div>
     <Divider orientation="left">Custom</Divider>
-    <div>
+    <>
       <Badge color="#f50" text="#f50" />
       <br />
       <Badge color="#2db7f5" text="#2db7f5" />
@@ -51,7 +51,7 @@ ReactDOM.render(
       <Badge color="#87d068" text="#87d068" />
       <br />
       <Badge color="#108ee9" text="#108ee9" />
-    </div>
+    </>
   </>,
   mountNode,
 );

components/badge/demo/dot.md

@@ -18,26 +18,14 @@ import { Badge } from 'antd';
 import { NotificationOutlined } from '@ant-design/icons';
 
 ReactDOM.render(
-  <div>
+  <>
     <Badge dot>
-      <NotificationOutlined />
+      <NotificationOutlined style={{ fontSize: 16 }} />
-    </Badge>
-    <Badge count={0} dot>
-      <NotificationOutlined />
     </Badge>
     <Badge dot>
       <a href="#">Link something</a>
     </Badge>
-  </div>,
+  </>,
   mountNode,
 );
 ```
-
-<style>
-.anticon-notification {
-  width: 16px;
-  height: 16px;
-  line-height: 16px;
-  font-size: 16px;
-}
-</style>

components/badge/demo/link.md

@@ -1,5 +1,5 @@
 ---
-order: 3
+order: 5
 title:
   zh-CN: 可点击
   en-US: Clickable
@@ -14,12 +14,12 @@ title:
 The badge can be wrapped with `a` tag to make it linkable.
 
 ```jsx
-import { Badge } from 'antd';
+import { Badge, Avatar } from 'antd';
 
 ReactDOM.render(
   <a href="#">
     <Badge count={5}>
-      <span className="head-example" />
+      <Avatar shape="square" size="large" />
     </Badge>
   </a>,
   mountNode,

components/badge/demo/mix.md

@@ -0,0 +1,49 @@
+---
+order: 99
+title:
+  zh-CN: 各种混用的情况
+  en-US: Mixed usage
+debug: true
+---
+
+## zh-CN
+
+测试 `count` `stauts` `color` `dot` 共用的情况。
+
+## en-US
+
+Using `count/dot` with custom `stauts/color`.
+
+```jsx
+import { Badge, Avatar } from 'antd';
+
+ReactDOM.render(
+  <>
+    <Badge count={5} status="success">
+      <Avatar shape="square" size="large" />
+    </Badge>
+    <Badge count={5} status="warning">
+      <Avatar shape="square" size="large" />
+    </Badge>
+    <Badge count={5} color="blue">
+      <Avatar shape="square" size="large" />
+    </Badge>
+    <Badge count={5} color="#fa541c">
+      <Avatar shape="square" size="large" />
+    </Badge>
+    <Badge dot status="success">
+      <Avatar shape="square" size="large" />
+    </Badge>
+    <Badge dot status="warning">
+      <Avatar shape="square" size="large" />
+    </Badge>
+    <Badge dot color="blue">
+      <Avatar shape="square" size="large" />
+    </Badge>
+    <Badge dot color="#fa541c">
+      <Avatar shape="square" size="large" />
+    </Badge>
+  </>,
+  mountNode,
+);
+```

components/badge/demo/no-wrapper.md

@@ -24,15 +24,9 @@ const Demo = () => {
 
   return (
     <Space>
-      <Switch
+      <Switch checked={show} onChange={() => setShow(!show)} />
-        checked={show}
-        onChange={() => {
-          setShow(!show);
-        }}
-      />
       <Badge count={show ? 25 : 0} />
       <Badge count={show ? <ClockCircleOutlined style={{ color: '#f5222d' }} /> : 0} />
-      <Badge count={show ? 4 : 0} className="site-badge-count-4" />
       <Badge
         className="site-badge-count-109"
         count={show ? 109 : 0}
@@ -44,18 +38,3 @@ const Demo = () => {
 
 ReactDOM.render(<Demo />, mountNode);
 ```
-
-```css
-.site-badge-count-4 .ant-badge-count {
-  color: #999;
-  background-color: #fff;
-  box-shadow: 0 0 0 1px #d9d9d9 inset;
-}
-```
-
-<style>
-[data-theme="dark"] .site-badge-count-4 .ant-badge-count {
-  background-color: #141414;
-  box-shadow: 0 0 0 1px #434343 inset;
-}
-</style>

components/badge/demo/offset.md

@@ -1,5 +1,5 @@
 ---
-order: 5
+order: 6
 title:
   zh-CN: 自定义位置偏移
   en-US: Offset
@@ -14,14 +14,12 @@ title:
 Set offset of the badge dot, the format is `[left, top]`, which represents the offset of the status dot from the left and top of the default position.
 
 ```jsx
-import { Badge } from 'antd';
+import { Badge, Avatar } from 'antd';
 
 ReactDOM.render(
-  <>
   <Badge count={5} offset={[10, 10]}>
-      <a href="#" className="head-example" />
+    <Avatar shape="square" size="large" />
-    </Badge>
+  </Badge>,
-  </>,
   mountNode,
 );
 ```

components/badge/demo/overflow.md

@@ -14,23 +14,23 @@ title:
 `${overflowCount}+` is displayed when count is larger than `overflowCount`. The default value of `overflowCount` is `99`.
 
 ```jsx
-import { Badge } from 'antd';
+import { Badge, Avatar } from 'antd';
 
 ReactDOM.render(
-  <div>
+  <>
     <Badge count={99}>
-      <a href="#" className="head-example" />
+      <Avatar shape="square" size="large" />
     </Badge>
     <Badge count={100}>
-      <a href="#" className="head-example" />
+      <Avatar shape="square" size="large" />
     </Badge>
     <Badge count={99} overflowCount={10}>
-      <a href="#" className="head-example" />
+      <Avatar shape="square" size="large" />
     </Badge>
     <Badge count={1000} overflowCount={999}>
-      <a href="#" className="head-example" />
+      <Avatar shape="square" size="large" />
     </Badge>
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/badge/demo/ribbbon.md

@@ -1,5 +1,5 @@
 ---
-order: 15
+order: 10
 title:
   zh-CN: 缎带
   en-US: Ribbon

components/badge/demo/size.md

@@ -1,5 +1,5 @@
 ---
-order: 9
+order: 7
 title:
   zh-CN: 大小
   en-US: Size
@@ -14,15 +14,15 @@ title:
 Set size of numeral Badge.
 
 ```jsx
-import { Badge } from 'antd';
+import { Badge, Avatar } from 'antd';
 
 ReactDOM.render(
   <>
     <Badge size="default" count={5}>
-      <a href="#" className="head-example" />
+      <Avatar shape="square" size="large" />
     </Badge>
     <Badge size="small" count={5}>
-      <a href="#" className="head-example" />
+      <Avatar shape="square" size="large" />
     </Badge>
   </>,
   mountNode,

components/badge/demo/status.md

@@ -1,5 +1,5 @@
 ---
-order: 6
+order: 8
 title:
   zh-CN: 状态点
   en-US: Status
@@ -17,7 +17,7 @@ Standalone badge with status.
 import { Badge } from 'antd';
 
 ReactDOM.render(
-  <div>
+  <>
     <Badge status="success" />
     <Badge status="error" />
     <Badge status="default" />
@@ -33,7 +33,7 @@ ReactDOM.render(
     <Badge status="processing" text="Processing" />
     <br />
     <Badge status="warning" text="Warning" />
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/badge/demo/title.md

@@ -15,39 +15,17 @@ debug: true
 The badge will display `title` when hovered over, instead of `count`.
 
 ```jsx
-import { Badge } from 'antd';
+import { Badge, Avatar } from 'antd';
 
 ReactDOM.render(
-  <div>
+  <>
     <Badge count={5} title="Custom hover text">
-      <a href="#" className="head-example" />
+      <Avatar shape="square" size="large" />
     </Badge>
     <Badge count={-5} title="Negative">
-      <a href="#" className="head-example" />
+      <Avatar shape="square" size="large" />
     </Badge>
-  </div>,
+  </>,
   mountNode,
 );
 ```
-
-<style>
-.ant-badge:not(.ant-badge-not-a-wrapper) {
-  margin-right: 20px;
-}
-
-.ant-badge.ant-badge-rtl:not(.ant-badge-not-a-wrapper) {
-  margin-right: 0;
-  margin-left: 20px;
-}
-
-.head-example {
-  width: 42px;
-  height: 42px;
-  border-radius: 2px;
-  background: #eee;
-  display: inline-block;
-}
-[data-theme="dark"] .head-example {
-  background: rgba(255,255,255,.12);
-}
-</style>

components/badge/index.tsx

@@ -58,16 +58,16 @@ const Badge: CompoundedComponent = ({
   const prefixCls = getPrefixCls('badge', customizePrefixCls);
 
   // ================================ Misc ================================
-  const numberedDisplayCount = ((count as number) > (overflowCount as number)
+  const numberedDisplayCount = (
-    ? `${overflowCount}+`
+    (count as number) > (overflowCount as number) ? `${overflowCount}+` : count
-    : count) as string | number | null;
+  ) as string | number | null;
 
   const hasStatus =
     (status !== null && status !== undefined) || (color !== null && color !== undefined);
 
   const isZero = numberedDisplayCount === '0' || numberedDisplayCount === 0;
 
-  const showAsDot = (dot && !isZero) || hasStatus;
+  const showAsDot = dot && !isZero;
 
   const mergedCount = showAsDot ? '' : numberedDisplayCount;