style: badge

components/anchor/Anchor.tsx

@@ -127,10 +127,10 @@ export default defineComponent({
       emit('change', link);
     };
     const handleScrollTo = (link: string) => {
-      const { offsetTop, getContainer, targetOffset } = props;
+      const { offsetTop, targetOffset } = props;
 
       setCurrentActiveLink(link);
-      const container = getContainer();
+      const container = getContainer.value();
       const scrollTop = getScroll(container, true);
       const sharpLinkMatch = sharpMatcherRegx.exec(link);
       if (!sharpLinkMatch) {
@@ -150,7 +150,7 @@ export default defineComponent({
         callback: () => {
           state.animating = false;
         },
-        getContainer,
+        getContainer: getContainer.value,
       });
     };
     expose({

components/badge/Badge.tsx

@@ -62,7 +62,7 @@ export default defineComponent({
       () => numberedDisplayCount.value === '0' || numberedDisplayCount.value === 0,
     );
 
-    const showAsDot = computed(() => (props.dot && !isZero.value) || hasStatus.value);
+    const showAsDot = computed(() => props.dot && !isZero.value);
 
     const mergedCount = computed(() => (showAsDot.value ? '' : numberedDisplayCount.value));
 

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

@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/badge/demo/basic.vue correctly 1`] = `
-<span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
+<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
-<!----></span><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count" title="0"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">0</p></span></sup>
+<!----></span><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="0"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">0</p></span></sup>
-<!----></span><span class="ant-badge"><a href="#" class="head-example"></a><span style="color: rgb(245, 34, 45);" role="img" aria-label="clock-circle" class="anticon anticon-clock-circle ant-scroll-number-custom-component"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+<!----></span><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><span style="color: rgb(245, 34, 45);" role="img" aria-label="clock-circle" class="anticon anticon-clock-circle ant-scroll-number-custom-component"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
 <!----></span>
 `;
 
 exports[`renders ./components/badge/demo/change.vue correctly 1`] = `
-<div><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
+<div><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
   <!----></span>
   <div class="ant-btn-group"><button class="ant-btn" type="button">
       <!----><span role="img" aria-label="minus" class="anticon anticon-minus"><svg focusable="false" class="" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg></span>
@@ -16,9 +16,12 @@ exports[`renders ./components/badge/demo/change.vue correctly 1`] = `
       <!----><span role="img" aria-label="plus" class="anticon anticon-plus"><svg focusable="false" class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span>
     </button></div>
 </div>
-<div style="margin-top: 10px;"><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup><!----></span><button type="button" role="switch" aria-checked="true" class="ant-switch-checked ant-switch">
+<div class="ant-divider ant-divider-horizontal" role="separator">
+  <!---->
+</div><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup>
+<!----></span><button type="button" role="switch" aria-checked="true" class="ant-switch-checked ant-switch">
   <!----><span class="ant-switch-inner"><!----></span>
-  </button></div>
+</button>
 `;
 
 exports[`renders ./components/badge/demo/colors.vue correctly 1`] = `
@@ -38,19 +41,16 @@ exports[`renders ./components/badge/demo/colors.vue correctly 1`] = `
   <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-gold"></span><span class="ant-badge-status-text">gold</span></span></div>
   <div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-lime"></span><span class="ant-badge-status-text">lime</span></span></div>
 </div>
-<h4 style="margin: 16px 0px;">Custom:</h4>
+<div class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text">Custom</span></div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(255, 85, 0);"></span><span class="ant-badge-status-text">#f50</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(45, 183, 245);"></span><span class="ant-badge-status-text">#2db7f5</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(135, 208, 104);"></span><span class="ant-badge-status-text">#87d068</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(16, 142, 233);"></span><span class="ant-badge-status-text">#108ee9</span></span>
-<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(255, 85, 0);"></span><span class="ant-badge-status-text">#f50</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(45, 183, 245);"></span><span class="ant-badge-status-text">#2db7f5</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(135, 208, 104);"></span><span class="ant-badge-status-text">#87d068</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(16, 142, 233);"></span><span class="ant-badge-status-text">#108ee9</span></span></div>
 `;
 
 exports[`renders ./components/badge/demo/dot.vue correctly 1`] = `
-<div id="components-badge-demo-dot"><span class="ant-badge"><span role="img" aria-label="notification" class="anticon anticon-notification"><svg focusable="false" class="" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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"></path></svg></span><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup>
+<span class="ant-badge"><span style="font-size: 16px;" role="img" aria-label="notification" class="anticon anticon-notification"><svg focusable="false" class="" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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"></path></svg></span><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup>
-  <!----></span><span class="ant-badge"><span role="img" aria-label="notification" class="anticon anticon-notification"><svg focusable="false" class="" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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"></path></svg></span><sup data-show="false" class="ant-scroll-number ant-badge-count" title="0" style="display: none;">0</sup>
 <!----></span><span class="ant-badge"><a href="#">Link something</a><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup><!----></span>
-</div>
 `;
 
 exports[`renders ./components/badge/demo/link.vue correctly 1`] = `
-<a href="#"><span class="ant-badge"><span class="head-example"></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
+<a href="#"><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
   <!----></span>
 </a>
 `;
@@ -62,19 +62,147 @@ exports[`renders ./components/badge/demo/no-wrapper.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/badge/demo/overflow.vue correctly 1`] = `
-<span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="99"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">9</p></span><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">9</p></span></sup>
+<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="99"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">9</p></span><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">9</p></span></sup>
-<!----></span><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="100">99+</sup><!----></span><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="99">10+</sup><!----></span><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="1000">999+</sup><!----></span>
+<!----></span><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="100">99+</sup>
+<!----></span><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="99">10+</sup>
+<!----></span><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="1000">999+</sup>
+<!----></span>
 `;
 
 exports[`renders ./components/badge/demo/ribbon.vue correctly 1`] = `
 <div class="ant-ribbon-wrapper">
-  <div class="ant-card ant-card-bordered">
+  <div class="ant-card ant-card-bordered ant-card-small">
-    <!---->
+    <div class="ant-card-head">
-    <!---->
+      <div class="ant-card-head-wrapper">
-    <div class="ant-card-body">And raises the spyglass.</div>
+        <div class="ant-card-head-title">Pushes open the window</div>
         <!---->
       </div>
-  <div class="ant-ribbon ant-ribbon-placement-end"><span class="ant-ribbon-text">Pushes open the window</span>
+      <!---->
+    </div>
+    <!---->
+    <div class="ant-card-body">and raises the spyglass.</div>
+    <!---->
+  </div>
+  <div class="ant-ribbon ant-ribbon-placement-end"><span class="ant-ribbon-text">Hippies</span>
+    <div class="ant-ribbon-corner"></div>
+  </div>
+</div>
+<div class="ant-ribbon-wrapper">
+  <div class="ant-card ant-card-bordered ant-card-small">
+    <div class="ant-card-head">
+      <div class="ant-card-head-wrapper">
+        <div class="ant-card-head-title">Pushes open the window</div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <!---->
+    <div class="ant-card-body">and raises the spyglass.</div>
+    <!---->
+  </div>
+  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-pink"><span class="ant-ribbon-text">Hippies</span>
+    <div class="ant-ribbon-corner"></div>
+  </div>
+</div>
+<div class="ant-ribbon-wrapper">
+  <div class="ant-card ant-card-bordered ant-card-small">
+    <div class="ant-card-head">
+      <div class="ant-card-head-wrapper">
+        <div class="ant-card-head-title">Pushes open the window</div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <!---->
+    <div class="ant-card-body">and raises the spyglass.</div>
+    <!---->
+  </div>
+  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-red"><span class="ant-ribbon-text">Hippies</span>
+    <div class="ant-ribbon-corner"></div>
+  </div>
+</div>
+<div class="ant-ribbon-wrapper">
+  <div class="ant-card ant-card-bordered ant-card-small">
+    <div class="ant-card-head">
+      <div class="ant-card-head-wrapper">
+        <div class="ant-card-head-title">Pushes open the window</div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <!---->
+    <div class="ant-card-body">and raises the spyglass.</div>
+    <!---->
+  </div>
+  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-cyan"><span class="ant-ribbon-text">Hippies</span>
+    <div class="ant-ribbon-corner"></div>
+  </div>
+</div>
+<div class="ant-ribbon-wrapper">
+  <div class="ant-card ant-card-bordered ant-card-small">
+    <div class="ant-card-head">
+      <div class="ant-card-head-wrapper">
+        <div class="ant-card-head-title">Pushes open the window</div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <!---->
+    <div class="ant-card-body">and raises the spyglass.</div>
+    <!---->
+  </div>
+  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-green"><span class="ant-ribbon-text">Hippies</span>
+    <div class="ant-ribbon-corner"></div>
+  </div>
+</div>
+<div class="ant-ribbon-wrapper">
+  <div class="ant-card ant-card-bordered ant-card-small">
+    <div class="ant-card-head">
+      <div class="ant-card-head-wrapper">
+        <div class="ant-card-head-title">Pushes open the window</div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <!---->
+    <div class="ant-card-body">and raises the spyglass.</div>
+    <!---->
+  </div>
+  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-purple"><span class="ant-ribbon-text">Hippies</span>
+    <div class="ant-ribbon-corner"></div>
+  </div>
+</div>
+<div class="ant-ribbon-wrapper">
+  <div class="ant-card ant-card-bordered ant-card-small">
+    <div class="ant-card-head">
+      <div class="ant-card-head-wrapper">
+        <div class="ant-card-head-title">Pushes open the window</div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <!---->
+    <div class="ant-card-body">and raises the spyglass.</div>
+    <!---->
+  </div>
+  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-volcano"><span class="ant-ribbon-text">Hippies</span>
+    <div class="ant-ribbon-corner"></div>
+  </div>
+</div>
+<div class="ant-ribbon-wrapper">
+  <div class="ant-card ant-card-bordered ant-card-small">
+    <div class="ant-card-head">
+      <div class="ant-card-head-wrapper">
+        <div class="ant-card-head-title">Pushes open the window</div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <!---->
+    <div class="ant-card-body">and raises the spyglass.</div>
+    <!---->
+  </div>
+  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-magenta"><span class="ant-ribbon-text">Hippies</span>
     <div class="ant-ribbon-corner"></div>
   </div>
 </div>
@@ -83,7 +211,6 @@ exports[`renders ./components/badge/demo/ribbon.vue correctly 1`] = `
 exports[`renders ./components/badge/demo/status.vue correctly 1`] = `<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-success"></span><span class="ant-badge-status-text"><!----></span></span><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-error"></span><span class="ant-badge-status-text"><!----></span></span><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-default"></span><span class="ant-badge-status-text"><!----></span></span><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-processing"></span><span class="ant-badge-status-text"><!----></span></span><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-warning"></span><span class="ant-badge-status-text"><!----></span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-success"></span><span class="ant-badge-status-text">Success</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-error"></span><span class="ant-badge-status-text">Error</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-default"></span><span class="ant-badge-status-text">Default</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-processing"></span><span class="ant-badge-status-text">Processing</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-warning"></span><span class="ant-badge-status-text">warning</span></span>`;
 
 exports[`renders ./components/badge/demo/title.vue correctly 1`] = `
-<div id="components-badge-demo-title"><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count" title="Custom hover text"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
+<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="Custom hover text"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
 <!----></span>
-</div>
 `;

components/badge/demo/basic.vue

@@ -17,16 +17,16 @@ Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZe
 </docs>
 <template>
   <a-badge count="5">
-    <a href="#" class="head-example" />
+    <a-avatar shape="square" size="large" />
   </a-badge>
   <a-badge count="0" show-zero>
-    <a href="#" class="head-example" />
+    <a-avatar shape="square" size="large" />
   </a-badge>
   <a-badge>
     <template #count>
       <clock-circle-outlined style="color: #f5222d" />
     </template>
-    <a href="#" class="head-example"></a>
+    <a-avatar shape="square" size="large" />
   </a-badge>
 </template>
 

components/badge/demo/change.vue

@@ -18,7 +18,7 @@ The count will be animated as it changes.
 <template>
   <div>
     <a-badge :count="count">
-      <a href="#" class="head-example" />
+      <a-avatar shape="square" size="large" />
     </a-badge>
     <a-button-group>
       <a-button @click="decline">
@@ -29,12 +29,11 @@ The count will be animated as it changes.
       </a-button>
     </a-button-group>
   </div>
-  <div style="margin-top: 10px">
+  <a-divider />
   <a-badge :dot="show">
-      <a href="#" class="head-example" />
+    <a-avatar shape="square" size="large" />
   </a-badge>
   <a-switch v-model:checked="show" />
-  </div>
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';

components/badge/demo/colors.vue

@@ -23,8 +23,7 @@ New feature after 3.16.0. We preset a series of colorful Badge styles for use in
       <a-badge :color="color" :text="color" />
     </div>
   </div>
-  <h4 style="margin: 16px 0">Custom:</h4>
+  <a-divider orientation="left">Custom</a-divider>
-  <div>
   <a-badge color="#f50" text="#f50" />
   <br />
   <a-badge color="#2db7f5" text="#2db7f5" />
@@ -32,7 +31,6 @@ New feature after 3.16.0. We preset a series of colorful Badge styles for use in
   <a-badge color="#87d068" text="#87d068" />
   <br />
   <a-badge color="#108ee9" text="#108ee9" />
-  </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';

components/badge/demo/dot.vue

@@ -17,17 +17,12 @@ If count equals 0, it won't display the dot.
 </docs>
 
 <template>
-  <div id="components-badge-demo-dot">
   <a-badge dot>
-      <notification-outlined />
+    <notification-outlined style="font-size: 16px" />
-    </a-badge>
-    <a-badge :count="0" dot>
-      <notification-outlined />
   </a-badge>
   <a-badge dot>
     <a href="#">Link something</a>
   </a-badge>
-  </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
@@ -38,11 +33,3 @@ export default defineComponent({
   },
 });
 </script>
-<style scoped>
-#components-badge-demo-dot .anticon-notification {
-  width: 16px;
-  height: 16px;
-  line-height: 16px;
-  font-size: 16px;
-}
-</style>

components/badge/demo/index.vue

@@ -8,8 +8,8 @@
     <Change />
     <Title />
     <Colors />
-    <Link />
     <Ribbon />
+    <Link />
   </demo-sort>
 </template>
 <script lang="ts">

components/badge/demo/link.vue

@@ -18,7 +18,7 @@ The badge can be wrapped with `a` tag to make it linkable.
 <template>
   <a href="#">
     <a-badge count="5">
-      <span class="head-example" />
+      <a-avatar shape="square" size="large" />
     </a-badge>
   </a>
 </template>

components/badge/demo/overflow.vue

@@ -18,15 +18,15 @@ title:
 
 <template>
   <a-badge :count="99">
-    <a href="#" class="head-example" />
+    <a-avatar shape="square" size="large" />
   </a-badge>
   <a-badge :count="100">
-    <a href="#" class="head-example" />
+    <a-avatar shape="square" size="large" />
   </a-badge>
   <a-badge :count="99" :overflow-count="10">
-    <a href="#" class="head-example" />
+    <a-avatar shape="square" size="large" />
   </a-badge>
   <a-badge :count="1000" :overflow-count="999">
-    <a href="#" class="head-example" />
+    <a-avatar shape="square" size="large" />
   </a-badge>
 </template>

components/badge/demo/ribbon.vue

@@ -16,7 +16,28 @@ Use ribbon badge.
 </docs>
 
 <template>
-  <a-badge-ribbon text="Pushes open the window">
+  <a-badge-ribbon text="Hippies">
-    <a-card>And raises the spyglass.</a-card>
+    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+  </a-badge-ribbon>
+  <a-badge-ribbon text="Hippies" color="pink">
+    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+  </a-badge-ribbon>
+  <a-badge-ribbon text="Hippies" color="red">
+    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+  </a-badge-ribbon>
+  <a-badge-ribbon text="Hippies" color="cyan">
+    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+  </a-badge-ribbon>
+  <a-badge-ribbon text="Hippies" color="green">
+    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+  </a-badge-ribbon>
+  <a-badge-ribbon text="Hippies" color="purple">
+    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+  </a-badge-ribbon>
+  <a-badge-ribbon text="Hippies" color="volcano">
+    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+  </a-badge-ribbon>
+  <a-badge-ribbon text="Hippies" color="magenta">
+    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
   </a-badge-ribbon>
 </template>

components/badge/demo/title.vue

@@ -17,21 +17,7 @@ The badge will display `title` when hovered over, instead of `count`.
 </docs>
 
 <template>
-  <div id="components-badge-demo-title">
   <a-badge :count="5" title="Custom hover text">
-      <a href="#" class="head-example" />
+    <a-avatar shape="square" size="large" />
   </a-badge>
-  </div>
 </template>
-<style scoped>
-#components-badge-demo-title .ant-badge:not(.ant-badge-status) {
-  margin-right: 20px;
-}
-.head-example {
-  width: 42px;
-  height: 42px;
-  border-radius: 4px;
-  background: #eee;
-  display: inline-block;
-}
-</style>

components/badge/style/index.less

@@ -25,6 +25,7 @@
     background: @badge-color;
     border-radius: (@badge-height / 2);
     box-shadow: 0 0 0 1px @shadow-color-inverse;
+
     a,
     a:hover {
       color: @badge-text-color;
@@ -54,6 +55,11 @@
     box-shadow: 0 0 0 1px @shadow-color-inverse;
   }
 
+  // Tricky way to resolve https://github.com/ant-design/ant-design/issues/30088
+  &-dot.@{number-prefix-cls} {
+    transition: background 1.5s;
+  }
+
   &-count,
   &-dot,
   .@{number-prefix-cls}-custom-component {
@@ -81,12 +87,15 @@
       vertical-align: middle;
       border-radius: 50%;
     }
+
     &-success {
       background-color: @success-color;
     }
+
     &-processing {
       position: relative;
       background-color: @processing-color;
+
       &::after {
         position: absolute;
         top: 0;
@@ -99,12 +108,15 @@
         content: '';
       }
     }
+
     &-default {
       background-color: @normal-color;
     }
+
     &-error {
       background-color: @error-color;
     }
+
     &-warning {
       background-color: @warning-color;
     }
@@ -152,21 +164,18 @@
       vertical-align: middle;
     }
 
-    .@{number-prefix-cls}-custom-component {
+    .@{number-prefix-cls}-custom-component,
+    .@{badge-prefix-cls}-count {
       transform: none;
     }
 
     .@{number-prefix-cls}-custom-component,
-    .@{ant-prefix}-scroll-number {
+    .@{number-prefix-cls} {
       position: relative;
       top: auto;
       display: block;
       transform-origin: 50% 50%;
     }
-
-    .@{badge-prefix-cls}-count {
-      transform: none;
-    }
   }
 }
 
@@ -175,6 +184,7 @@
     transform: scale(0.8);
     opacity: 0.5;
   }
+
   100% {
     transform: scale(2.4);
     opacity: 0;
@@ -183,12 +193,16 @@
 
 // Safari will blink with transform when inner element has absolute style.
 .safari-fix-motion() {
+  /* stylelint-disable property-no-vendor-prefix */
   -webkit-transform-style: preserve-3d;
   -webkit-backface-visibility: hidden;
+  /* stylelint-enable property-no-vendor-prefix */
 }
 
 .@{number-prefix-cls} {
   overflow: hidden;
+  direction: ltr;
+
   &-only {
     position: relative;
     display: inline-block;
@@ -213,6 +227,7 @@
     transform: scale(0) translate(50%, -50%);
     opacity: 0;
   }
+
   100% {
     transform: scale(1) translate(50%, -50%);
   }
@@ -222,6 +237,7 @@
   0% {
     transform: scale(1) translate(50%, -50%);
   }
+
   100% {
     transform: scale(0) translate(50%, -50%);
     opacity: 0;
@@ -233,6 +249,7 @@
     transform: scale(0);
     opacity: 0;
   }
+
   100% {
     transform: scale(1);
   }
@@ -242,6 +259,7 @@
   0% {
     transform: scale(1);
   }
+
   100% {
     transform: scale(0);
     opacity: 0;

components/badge/style/rtl.less

@@ -3,9 +3,9 @@
     direction: rtl;
   }
 
-  &-count,
+  &:not(&-not-a-wrapper) &-count,
-  &-dot,
+  &:not(&-not-a-wrapper) &-dot,
-  .@{number-prefix-cls}-custom-component {
+  &:not(&-not-a-wrapper) .@{number-prefix-cls}-custom-component {
     .@{badge-prefix-cls}-rtl & {
       right: auto;
       left: 0;
@@ -15,7 +15,7 @@
     }
   }
 
-  .@{badge-prefix-cls}-rtl& .@{number-prefix-cls}-custom-component {
+  &-rtl&:not(&-not-a-wrapper) .@{number-prefix-cls}-custom-component {
     right: auto;
     left: 0;
     transform: translate(-50%, -50%);
@@ -30,25 +30,6 @@
       }
     }
   }
-
-  &-zoom-appear,
-  &-zoom-enter {
-    .@{badge-prefix-cls}-rtl & {
-      animation-name: antZoomBadgeInRtl;
-    }
-  }
-
-  &-zoom-leave {
-    .@{badge-prefix-cls}-rtl & {
-      animation-name: antZoomBadgeOutRtl;
-    }
-  }
-
-  &-not-a-wrapper {
-    .@{badge-prefix-cls}-count {
-      transform: none;
-    }
-  }
 }
 
 .@{ribbon-prefix-cls}-rtl {
@@ -62,6 +43,7 @@
       right: unset;
       left: 0;
       border-color: currentColor currentColor transparent transparent;
+
       &::after {
         border-color: currentColor currentColor transparent transparent;
       }
@@ -76,29 +58,10 @@
       right: 0;
       left: unset;
       border-color: currentColor transparent transparent currentColor;
+
       &::after {
         border-color: currentColor transparent transparent currentColor;
       }
     }
   }
 }
-
-@keyframes antZoomBadgeInRtl {
-  0% {
-    transform: scale(0) translate(-50%, -50%);
-    opacity: 0;
-  }
-  100% {
-    transform: scale(1) translate(-50%, -50%);
-  }
-}
-
-@keyframes antZoomBadgeOutRtl {
-  0% {
-    transform: scale(1) translate(-50%, -50%);
-  }
-  100% {
-    transform: scale(0) translate(-50%, -50%);
-    opacity: 0;
-  }
-}