fix(Badge): set alignment by use transform

alibaba-fusion · Dec 6, 2024 · 7984dca · 7984dca
1 parent b7e51de
commit 7984dca
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 0 deletions.
diff --git a/components/badge/__tests__/index-spec.tsx b/components/badge/__tests__/index-spec.tsx
@@ -116,4 +116,37 @@ describe('Badge', () => {
         cy.mount(<Badge count={0} showZero />);
         cy.get('.next-badge-count.next-badge-scroll-number');
     });
+
+    it('should on right when children is block', () => {
+        cy.mount(
+            <Badge count={1}>
+                <div
+                    style={{
+                        width: '200px',
+                        height: '40px',
+                        display: 'block',
+                        background: 'blue',
+                    }}
+                ></div>
+            </Badge>
+        );
+        cy.get('.next-badge-count').then($el => {
+            $el.css({
+                transition: 'none',
+                animation: 'none',
+            });
+        });
+        cy.get('.next-badge-count').then($el => {
+            const targetRect = $el[0].getBoundingClientRect();
+            const badgeRect = document.querySelector('.next-badge')!.getBoundingClientRect();
+            const position = {
+                left: Math.round(targetRect.left),
+                top: Math.round(targetRect.top),
+            };
+            expect(position).to.deep.equal({
+                left: Math.round(badgeRect.left + badgeRect.width - targetRect.width / 2),
+                top: Math.round(badgeRect.top - 4),
+            });
+        });
+    });
 });
diff --git a/components/badge/main.scss b/components/badge/main.scss
@@ -77,6 +77,8 @@
             z-index: 10;
             overflow: hidden;
             transform-origin: left center;
+            transform: translateX(50%);
+            right: 0;
         }
 
         &-scroll-number-only {