diff --git a/src/UniqueProvider/index.tsx b/src/UniqueProvider/index.tsx index 92c74867..2d8aae34 100644 --- a/src/UniqueProvider/index.tsx +++ b/src/UniqueProvider/index.tsx @@ -216,7 +216,10 @@ const UniqueProvider = ({ children }: UniqueProviderProps) => { offsetY={offsetY} popupSize={popupSize} motion={options.popupMotion} - uniqueBgClassName={options.uniqueBgClassName} + uniqueBgClassName={classNames( + options.uniqueBgClassName, + alignedClassName, + )} uniqueBgStyle={options.uniqueBgStyle} /> diff --git a/tests/unique.test.tsx b/tests/unique.test.tsx index 001a2a1b..ec6f57d2 100644 --- a/tests/unique.test.tsx +++ b/tests/unique.test.tsx @@ -125,9 +125,9 @@ describe('Trigger.Unique', () => { // There should only be one popup element expect(document.querySelectorAll('.rc-trigger-popup').length).toBe(1); - expect(document.querySelectorAll('.rc-trigger-popup-unique-body').length).toBe( - 1, - ); + expect( + document.querySelectorAll('.rc-trigger-popup-unique-body').length, + ).toBe(1); // FloatBg open prop should not have changed during transition (no close animation) expect(global.openChangeLog).toHaveLength(0); @@ -192,7 +192,9 @@ describe('Trigger.Unique', () => { }); it('should apply uniqueBgStyle to UniqueBody component', async () => { - await setupAndOpenPopup({ uniqueBgStyle: { backgroundColor: 'red', border: '1px solid blue' } }); + await setupAndOpenPopup({ + uniqueBgStyle: { backgroundColor: 'red', border: '1px solid blue' }, + }); // Check that UniqueBody has the custom background style const uniqueBody = document.querySelector('.rc-trigger-popup-unique-body'); @@ -211,4 +213,38 @@ describe('Trigger.Unique', () => { expect(uniqueBody).toBeTruthy(); expect(uniqueBody.className).not.toContain('undefined'); }); + + it('should pass alignedClassName on unique body', async () => { + const getPopupClassNameFromAlign = () => 'bamboo'; + + render( + + tooltip} + unique + popupVisible + popupPlacement="bottomLeft" + getPopupClassNameFromAlign={getPopupClassNameFromAlign} + builtinPlacements={{ + bottomLeft: { + points: ['tl', 'bl'], + offset: [0, 4], + overflow: { + adjustX: 0, + adjustY: 1, + }, + }, + }} + > +
click me
+
+
, + ); + + expect(document.querySelector('.rc-trigger-popup')).toHaveClass('bamboo'); + expect(document.querySelector('.rc-trigger-popup-unique-body')).toHaveClass( + 'bamboo', + ); + }); });