fix(Balloon): v2 default offset adjustment

alibaba-fusion · Nov 27, 2024 · 4403727 · 4403727
1 parent c1dd9d8
commit 4403727
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 1 deletion.
diff --git a/components/balloon/__tests__/balloon-v2-spec.tsx b/components/balloon/__tests__/balloon-v2-spec.tsx
@@ -407,5 +407,51 @@ describe('Balloon v2', () => {
             );
             cy.get('span').should('have.length', 1);
         });
+
+        it('default offset should be 12px', () => {
+            const trigger = (
+                <div className="trigger" style={{ margin: '200px', display: 'inline-block' }}>
+                    trigger
+                </div>
+            );
+            cy.mount(
+                <Balloon v2 visible trigger={trigger}>
+                    trigger
+                </Balloon>
+            ).as('Demo');
+            cy.get('.trigger').then($el => {
+                const triggerRect = $el[0].getBoundingClientRect();
+                expect(Math.round(triggerRect.bottom + 12)).to.equal(
+                    Math.round(document.querySelector('.next-balloon')!.getBoundingClientRect().top)
+                );
+            });
+            cy.rerender('Demo', { align: 't' });
+            cy.get('.trigger').then($el => {
+                const triggerRect = $el[0].getBoundingClientRect();
+                expect(Math.round(triggerRect.top - 12)).to.equal(
+                    Math.round(
+                        document.querySelector('.next-balloon')!.getBoundingClientRect().bottom
+                    )
+                );
+            });
+            cy.rerender('Demo', { align: 'l' });
+            cy.get('.trigger').then($el => {
+                const triggerRect = $el[0].getBoundingClientRect();
+                expect(Math.round(triggerRect.left - 12)).to.equal(
+                    Math.round(
+                        document.querySelector('.next-balloon')!.getBoundingClientRect().right
+                    )
+                );
+            });
+            cy.rerender('Demo', { align: 'r' });
+            cy.get('.trigger').then($el => {
+                const triggerRect = $el[0].getBoundingClientRect();
+                expect(Math.round(triggerRect.right + 12)).to.equal(
+                    Math.round(
+                        document.querySelector('.next-balloon')!.getBoundingClientRect().left
+                    )
+                );
+            });
+        });
     });
 });
diff --git a/components/balloon/balloon.tsx b/components/balloon/balloon.tsx
@@ -356,7 +356,7 @@ class Balloon extends React.Component<BalloonProps, BalloonState> {
 
             Object.assign(otherProps, {
                 placement: align,
-                placementOffset: placementOffset + 12,
+                placementOffset: placementOffset,
                 v2: true,
                 beforePosition: this.beforePosition,
                 autoAdjust,