fix: Badge dot with status (ant-design#44153)

* fix: Badge with dot not processing * test: update snapshot
ammar-knowledge · Aug 10, 2023 · 54081c8 · 54081c8
1 parent da35a10
commit 54081c8
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 4 deletions.
diff --git a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1674,6 +1674,27 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
           />
         </span>
       </div>
+      <div
+        class="ant-space-item"
+        style="margin-right: 16px; padding-bottom: 16px;"
+      >
+        <span
+          class="ant-badge ant-badge-status"
+        >
+          <span
+            class="ant-avatar ant-avatar-lg ant-avatar-square"
+          >
+            <span
+              class="ant-avatar-string"
+              style="transform: scale(1) translateX(-50%);"
+            />
+          </span>
+          <sup
+            class="ant-scroll-number ant-badge-dot ant-badge-status-processing"
+            data-show="true"
+          />
+        </span>
+      </div>
       <div
         class="ant-space-item"
         style="margin-right: 16px; padding-bottom: 16px;"

diff --git a/components/badge/__tests__/__snapshots__/demo.test.ts.snap b/components/badge/__tests__/__snapshots__/demo.test.ts.snap
@@ -1663,6 +1663,27 @@ exports[`renders components/badge/demo/mix.tsx correctly 1`] = `
           />
         </span>
       </div>
+      <div
+        class="ant-space-item"
+        style="margin-right:16px;padding-bottom:16px"
+      >
+        <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-processing"
+            data-show="true"
+          />
+        </span>
+      </div>
       <div
         class="ant-space-item"
         style="margin-right:16px;padding-bottom:16px"

diff --git a/components/badge/demo/mix.tsx b/components/badge/demo/mix.tsx
@@ -22,6 +22,9 @@ const App: React.FC = () => (
       <Badge dot status="warning">
         <Avatar shape="square" size="large" />
       </Badge>
+      <Badge dot status="processing">
+        <Avatar shape="square" size="large" />
+      </Badge>
       <Badge dot color="blue">
         <Avatar shape="square" size="large" />
       </Badge>
@@ -32,12 +35,12 @@ const App: React.FC = () => (
 
     <Space size="middle" wrap>
       <Badge count={0} showZero />
-      <Badge count={0} showZero color='blue' />
-      <Badge count={0} showZero color='#f0f' />
+      <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'>
+      <Badge count={0} showZero color="blue">
         <Avatar shape="square" size="large" />
       </Badge>
     </Space>

diff --git a/components/badge/style/index.ts b/components/badge/style/index.ts
@@ -178,7 +178,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
           backgroundColor: token.colorSuccess,
         },
         [`${componentCls}-status-processing`]: {
-          position: 'relative',
+          overflow: 'visible',
           color: token.colorPrimary,
           backgroundColor: token.colorPrimary,