refactor: use semantic name (#575)

* refactor: use semantic name

* chore: rename var

Author: zombieJ

assets/index.less

@@ -74,8 +74,8 @@
     }
   }
 
-  // =============== Float BG ===============
-  &-float-bg {
+  // =============== Unique Body ===============
+  &-unique-body {
     position: absolute;
     z-index: 0;
     box-sizing: border-box;

src/UniqueProvider/FloatBg.tsx renamed to src/UniqueProvider/UniqueBody.tsx

@@ -5,8 +5,8 @@ import CSSMotion from '@rc-component/motion';
 import type { CSSMotionProps } from '@rc-component/motion';
 import type { AlignType } from '../interface';
 
-export interface FloatBgProps {
-  prefixCls: string; // ${prefixCls}-float-bg
+export interface UniqueBodyProps {
+  prefixCls: string; // ${prefixCls}-unique-body
   isMobile: boolean;
   ready: boolean;
   open: boolean;
@@ -21,7 +21,7 @@ export interface FloatBgProps {
   uniqueBgStyle?: React.CSSProperties;
 }
 
-const FloatBg = (props: FloatBgProps) => {
+const UniqueBody = (props: UniqueBodyProps) => {
   const {
     prefixCls,
     isMobile,
@@ -38,7 +38,7 @@ const FloatBg = (props: FloatBgProps) => {
     uniqueBgStyle,
   } = props;
 
-  const floatBgCls = `${prefixCls}-float-bg`;
+  const bodyCls = `${prefixCls}-unique-body`;
 
   const [motionVisible, setMotionVisible] = React.useState(false);
 
@@ -68,16 +68,16 @@ const FloatBg = (props: FloatBgProps) => {
       motionEnter
       motionLeave
       removeOnLeave={false}
-      leavedClassName={`${floatBgCls}-hidden`}
+      leavedClassName={`${bodyCls}-hidden`}
       {...motion}
       visible={open}
       onVisibleChanged={(nextVisible) => {
         setMotionVisible(nextVisible);
       }}
     >
       {({ className: motionClassName, style: motionStyle }) => {
-        const cls = classNames(floatBgCls, motionClassName, uniqueBgClassName, {
-          [`${floatBgCls}-visible`]: motionVisible,
+        const cls = classNames(bodyCls, motionClassName, uniqueBgClassName, {
+          [`${bodyCls}-visible`]: motionVisible,
         });
 
         return (
@@ -96,4 +96,4 @@ const FloatBg = (props: FloatBgProps) => {
   );
 };
 
-export default FloatBg;
+export default UniqueBody;

src/UniqueProvider/index.tsx

@@ -12,7 +12,7 @@ import Popup from '../Popup';
 import { useEvent } from '@rc-component/util';
 import useTargetState from './useTargetState';
 import { isDOM } from '@rc-component/util/lib/Dom/findDOMNode';
-import FloatBg from './FloatBg';
+import UniqueBody from './UniqueBody';
 import classNames from 'classnames';
 import { getAlignPopupClassName } from '../util';
 
@@ -204,7 +204,7 @@ const UniqueProvider = ({ children }: UniqueProviderProps) => {
             maskMotion={options.maskMotion}
             // getPopupContainer={options.getPopupContainer}
           >
-            <FloatBg
+            <UniqueBody
               prefixCls={prefixCls}
               isMobile={false}
               ready={ready}

tests/unique.test.tsx

@@ -4,12 +4,12 @@ import Trigger, { UniqueProvider } from '../src';
 import { awaitFakeTimer } from './util';
 import type { TriggerProps } from '../src';
 
-// Mock FloatBg to check if open props changed
+// Mock UniqueBody to check if open props changed
 global.openChangeLog = [];
 
-jest.mock('../src/UniqueProvider/FloatBg', () => {
-  const OriginalFloatBg = jest.requireActual(
-    '../src/UniqueProvider/FloatBg',
+jest.mock('../src/UniqueProvider/UniqueBody', () => {
+  const OriginalUniqueBody = jest.requireActual(
+    '../src/UniqueProvider/UniqueBody',
   ).default;
   const OriginReact = jest.requireActual('react');
 
@@ -24,7 +24,7 @@ jest.mock('../src/UniqueProvider/FloatBg', () => {
       }
     }, [open]);
 
-    return OriginReact.createElement(OriginalFloatBg, props);
+    return OriginReact.createElement(OriginalUniqueBody, props);
   };
 });
 
@@ -103,7 +103,7 @@ describe('Trigger.Unique', () => {
       '-hidden',
     );
     expect(
-      document.querySelector('.rc-trigger-popup-float-bg').className,
+      document.querySelector('.rc-trigger-popup-unique-body').className,
     ).not.toContain('-hidden');
 
     // Move from first to second trigger - popup should not hide, but content should change
@@ -120,12 +120,12 @@ describe('Trigger.Unique', () => {
       '-hidden',
     );
     expect(
-      document.querySelector('.rc-trigger-popup-float-bg').className,
+      document.querySelector('.rc-trigger-popup-unique-body').className,
     ).not.toContain('-hidden');
 
     // There should only be one popup element
     expect(document.querySelectorAll('.rc-trigger-popup').length).toBe(1);
-    expect(document.querySelectorAll('.rc-trigger-popup-float-bg').length).toBe(
+    expect(document.querySelectorAll('.rc-trigger-popup-unique-body').length).toBe(
       1,
     );
 
@@ -182,33 +182,33 @@ describe('Trigger.Unique', () => {
     expect(popup.className).toContain('rc-trigger-popup-unique-controlled');
   });
 
-  it('should apply uniqueBgClassName to FloatBg component', async () => {
+  it('should apply uniqueBgClassName to UniqueBody component', async () => {
     await setupAndOpenPopup({ uniqueBgClassName: 'custom-bg-class' });
 
-    // Check that FloatBg has the custom background className
-    const floatBg = document.querySelector('.rc-trigger-popup-float-bg');
-    expect(floatBg).toBeTruthy();
-    expect(floatBg.className).toContain('custom-bg-class');
+    // Check that UniqueBody has the custom background className
+    const uniqueBody = document.querySelector('.rc-trigger-popup-unique-body');
+    expect(uniqueBody).toBeTruthy();
+    expect(uniqueBody.className).toContain('custom-bg-class');
   });
 
-  it('should apply uniqueBgStyle to FloatBg component', async () => {
+  it('should apply uniqueBgStyle to UniqueBody component', async () => {
     await setupAndOpenPopup({ uniqueBgStyle: { backgroundColor: 'red', border: '1px solid blue' } });
 
-    // Check that FloatBg has the custom background style
-    const floatBg = document.querySelector('.rc-trigger-popup-float-bg');
-    expect(floatBg).toBeTruthy();
-    expect(floatBg).toHaveStyle({
+    // Check that UniqueBody has the custom background style
+    const uniqueBody = document.querySelector('.rc-trigger-popup-unique-body');
+    expect(uniqueBody).toBeTruthy();
+    expect(uniqueBody).toHaveStyle({
       backgroundColor: 'red',
       border: '1px solid blue',
     });
   });
 
-  it('should not apply any additional className to FloatBg when uniqueBgClassName is not provided', async () => {
+  it('should not apply any additional className to UniqueBody when uniqueBgClassName is not provided', async () => {
     await setupAndOpenPopup();
 
-    // Check that FloatBg exists but does not have custom background className
-    const floatBg = document.querySelector('.rc-trigger-popup-float-bg');
-    expect(floatBg).toBeTruthy();
-    expect(floatBg.className).not.toContain('undefined');
+    // Check that UniqueBody exists but does not have custom background className
+    const uniqueBody = document.querySelector('.rc-trigger-popup-unique-body');
+    expect(uniqueBody).toBeTruthy();
+    expect(uniqueBody.className).not.toContain('undefined');
   });
 });