Skip to content

refactor: rename to container #505

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Sep 26, 2025
Merged

refactor: rename to container #505

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4ee6ffd
refactor: rename to container
zombieJ Sep 26, 2025
93f89a1
refactor: uniqueCotnainer
zombieJ Sep 26, 2025
6f730b2
chore: of it
zombieJ Sep 26, 2025
8dce0ef
chore: of it
zombieJ Sep 26, 2025
4294a75
chore: update deps
zombieJ Sep 26, 2025
f0b1fc3
test: update test
zombieJ Sep 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,8 +92,8 @@ Online demo: <https://react-component.github.io/tooltip/demo>
| align | object | | align config of tooltip. Please ref demo for usage example |
| showArrow | boolean \| object | false | whether to show arrow of tooltip |
| zIndex | number | | config popup tooltip zIndex |
| classNames | classNames?: { root?: string; body?: string;}; | | Semantic DOM class |
| styles | styles?: {root?: React.CSSProperties;body?: React.CSSProperties;}; | | Semantic DOM styles |
| classNames | classNames?: { root?: string; container?: string;}; | | Semantic DOM class |
| styles | styles?: {root?: React.CSSProperties;container?: React.CSSProperties;}; | | Semantic DOM styles |
Comment on lines +95 to +96
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The documentation for classNames and styles is incomplete. It should also include arrow and uniqueBody as possible keys, according to the SemanticName type in src/Tooltip.tsx.

Suggested change
| classNames | classNames?: { root?: string; container?: string;}; | | Semantic DOM class |
| styles | styles?: {root?: React.CSSProperties;container?: React.CSSProperties;}; | | Semantic DOM styles |
| classNames | classNames?: { root?: string; container?: string; arrow?: string; uniqueBody?: string; }; | | Semantic DOM class |
| styles | styles?: { root?: React.CSSProperties; container?: React.CSSProperties; arrow?: React.CSSProperties; uniqueBody?: React.CSSProperties; }; | | Semantic DOM styles |


## Important Note

Expand Down
4 changes: 2 additions & 2 deletions docs/examples/placement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,8 +94,8 @@ const Test: React.FC = () => (
<h5>Debug Usage</h5>
<Popup
prefixCls="rc-tooltip"
classNames={{ body: 'rc-tooltip-placement-top' }}
styles={{ body: { display: 'inline-block', position: 'relative' } }}
classNames={{ container: 'rc-tooltip-placement-top' }}
styles={{ container: { display: 'inline-block', position: 'relative' } }}
>
Test
</Popup>
Expand Down
2 changes: 1 addition & 1 deletion docs/examples/point.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const Test: React.FC = () => {
<Tooltip
placement="top"
overlay={text}
styles={{ body: { width: 300, height: 50 } }}
styles={{ container: { width: 300, height: 50 } }}
popupVisible
arrowContent={<div className="rc-tooltip-arrow-inner" />}
>
Expand Down
2 changes: 1 addition & 1 deletion docs/examples/simple.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ class Test extends Component<any, TestState> {
offset: [this.state.offsetX, this.state.offsetY],
}}
motion={{ motionName: this.state.transitionName }}
styles={{ body: state.overlayInnerStyle }}
styles={{ container: state.overlayInnerStyle }}
>
<div style={{ height: 100, width: 100, border: '1px solid red' }}>trigger</div>
</Tooltip>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
"test": "rc-test"
},
"dependencies": {
"@rc-component/trigger": "^3.6.7",
"@rc-component/trigger": "^3.6.15",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

依赖升级合理，但请确认 Trigger 新增属性可用性

升级到 @rc-component/trigger@^3.6.15 看起来是为支持 uniqueBgClassName/uniqueBgStyle 映射。为避免运行期无效属性导致样式不生效，请确认该版本已正式暴露这两个属性。

请用以下 Web 查询确认属性支持与变更日志：

🌐 Web query:

Does @rc-component/trigger v3.6.15 support props `uniqueBgClassName` and `uniqueBgStyle` on Trigger? Provide release notes or code references.

💡 Result:

Short answer: No — @rc-component/trigger (v3.x) does not expose props named uniqueBgClassName or uniqueBgStyle. The component's documented props (README / API) do not list those props. [1]

References:

  • Repository README / API props list for @rc-component/trigger (does not include uniqueBgClassName / uniqueBgStyle). [1]
  • Releases / tags for react-component/trigger (v3.x series). [2]

Sources:
[1] react-component/trigger — README API (props list). (github.com)
[2] react-component/trigger — Releases / tags. (github.com)

If you want, I can search specific release (3.6.15) source files (index.tsx / prop types) and paste the exact code lines from that tag.

Citations:

移除或替换 uniqueBgClassName/uniqueBgStyle，Trigger v3.6.15 未暴露该 props
经核实，v3.x 系列 API 文档和 Release Notes 均未列出这两个属性，运行时会无效。请移除或替换为受支持的属性。

🤖 Prompt for AI Agents 
package.json lines 44–44: the dependency "@rc-component/trigger": "^3.6.15"
points to a version that does not expose uniqueBgClassName/uniqueBgStyle; locate
any usages of uniqueBgClassName and uniqueBgStyle in the codebase and remove
them (or replace with supported alternatives such as applying className/style to
the trigger's child, overlay/popup container, or the library's documented
overlayClassName/overlayStyle prop), then ensure tests/build pass; do not try to
rely on those props for v3.x — if you truly need those props instead of
refactoring, change the dependency to a verified version that documents and
supports them and update package.json accordingly.

"@rc-component/util": "^1.3.0",
"classnames": "^2.3.1"
},
Expand Down
4 changes: 2 additions & 2 deletions src/Popup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ const Popup: React.FC<ContentProps> = (props) => {
return (
<div
id={id}
className={cls(`${prefixCls}-body`, classNames?.body, className)}
style={{ ...styles?.body, ...style }}
className={cls(`${prefixCls}-container`, classNames?.container, className)}
style={{ ...styles?.container, ...style }}
role="tooltip"
>
{typeof children === 'function' ? children() : children}
Expand Down
8 changes: 5 additions & 3 deletions src/Tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { useImperativeHandle, useRef } from 'react';
import { placements } from './placements';
import Popup from './Popup';

export type SemanticName = 'root' | 'arrow' | 'body' | 'uniqueBody';
export type SemanticName = 'root' | 'arrow' | 'container' | 'uniqueContainer';

export interface TooltipProps
extends Pick<
Expand Down Expand Up @@ -154,8 +154,10 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
popupStyle={styles?.root}
mouseEnterDelay={mouseEnterDelay}
arrow={mergedArrow}
uniqueBgClassName={classNames?.uniqueBody}
uniqueBgStyle={styles?.uniqueBody}
{...(({
uniqueContainerClassName: classNames?.uniqueContainer,
uniqueContainerStyle: styles?.uniqueContainer,
} as any))}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

uniqueContainer 透传依赖 rc-trigger 新接口；建议临时桥接与类型增强，避免回归*

这里通过 as any 向 Trigger 透传 uniqueContainerClassName/Style。若下游 rc-trigger 尚未发布相应属性，功能会静默失效（此前的 uniqueBg* 也会随之失效）。建议：

  • 迁移期同时透传新旧两套 prop（新优先），保障双向兼容；
  • 用模块声明合并为 TriggerProps 增补类型，避免 as any。

兼容性透传最小 diff（仅替换该块）：

-      {...(({
-        uniqueContainerClassName: classNames?.uniqueContainer,
-        uniqueContainerStyle: styles?.uniqueContainer,
-      } as any))}
+      {...(({
+        // New API (prefer)
+        uniqueContainerClassName: classNames?.uniqueContainer ?? (classNames as any)?.uniqueBody,
+        uniqueContainerStyle: styles?.uniqueContainer ?? (styles as any)?.uniqueBody,
+        // Back-compat for older rc-trigger
+        uniqueBgClassName: classNames?.uniqueContainer ?? (classNames as any)?.uniqueBody,
+        uniqueBgStyle: styles?.uniqueContainer ?? (styles as any)?.uniqueBody,
+      } as any))}

类型增强（新增 ambient 声明文件 types/rc-trigger-aug.d.ts）：

declare module '@rc-component/trigger/lib/interface' {
  interface TriggerProps {
    uniqueContainerClassName?: string;
    uniqueContainerStyle?: React.CSSProperties;
    uniqueBgClassName?: string;
    uniqueBgStyle?: React.CSSProperties;
  }
}

核验脚本：确认仓库使用的 @rc-component/trigger 版本，并检索仓库内对相关键的使用是否一致。

如需对下游库进行在线确认，请搜索：

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "Package version of @rc-component/trigger:"
if [ -f package.json ]; then
  rg -nP '"@rc-component/trigger"\s*:\s*".*"' package.json || true
fi

echo
echo "Scan code for uniqueContainer*/uniqueBg* and legacy keys to ensure consistent rename:"
rg -nP -C2 --type=ts 'unique(Container|Bg)(ClassName|Style)|classNames\?\.(unique(Container|Body))|styles\?\.(unique(Container|Body))'

Length of output: 846

🌐 Web query:

Does @rc-component/trigger support props `uniqueContainerClassName` and `uniqueContainerStyle` (and were they formerly `uniqueBgClassName` / `uniqueBgStyle`)? Provide the first version that introduced the new props.

💡 Result:

I can't find evidence that @rc-component/trigger exposes props named uniqueContainerClassName / uniqueContainerStyle (or formerly uniqueBgClassName / uniqueBgStyle). The package docs/readme and published API lists do not show those props. [1][2]

If you want, I can continue searching the package source/commit history (or check specific versions) to try to find the exact PR/first version that added them. Which would you prefer?

Sources:

  • @rc-component/trigger npm README / props (package page). [1]
  • GitHub repo code search (no matches for "uniqueContainerClassName" / "uniqueBgClassName"). [2]

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Display the test around uniqueContainer mapping
sed -n '430,470p' tests/index.test.tsx

Length of output: 1646

同时透传新旧 uniqueContainer*/uniqueBg* Props，增强类型声明

  • 当前依赖的 @rc-component/trigger@^3.6.15 尚未支持 uniqueContainerClassName/uniqueContainerStyle，会被忽略
  • 建议按下述最小 diff 在 spread 中同时传递旧 API (uniqueBgClassName/uniqueBgStyle) 和新 API，优先使用新属性：
-      {...(({
-        uniqueContainerClassName: classNames?.uniqueContainer,
-        uniqueContainerStyle: styles?.uniqueContainer,
-      } as any))}
+      {...(({
+        uniqueContainerClassName: classNames?.uniqueContainer ?? (classNames as any)?.uniqueBody,
+        uniqueContainerStyle: styles?.uniqueContainer ?? (styles as any)?.uniqueBody,
+        uniqueBgClassName: classNames?.uniqueContainer ?? (classNames as any)?.uniqueBody,
+        uniqueBgStyle: styles?.uniqueContainer ?? (styles as any)?.uniqueBody,
+      } as any))}
  • 使用 module declaration 为 TriggerProps 补充四个字段，移除 as any
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{...(({
uniqueContainerClassName: classNames?.uniqueContainer,
uniqueContainerStyle: styles?.uniqueContainer,
} as any))}
{...(({
uniqueContainerClassName: classNames?.uniqueContainer ?? (classNames as any)?.uniqueBody,
uniqueContainerStyle: styles?.uniqueContainer ?? (styles as any)?.uniqueBody,
uniqueBgClassName: classNames?.uniqueContainer ?? (classNames as any)?.uniqueBody,
uniqueBgStyle: styles?.uniqueContainer ?? (styles as any)?.uniqueBody,
} as any))}
🤖 Prompt for AI Agents 
In src/Tooltip.tsx around lines 157 to 160, the spread currently casts to any
and only passes new uniqueContainer* props which are ignored by older
@rc-component/trigger versions; update the spread to include both new
(uniqueContainerClassName/uniqueContainerStyle) and legacy
(uniqueBgClassName/uniqueBgStyle) props, preferring the new values when present,
and remove the "as any" cast. Also add a module declaration to augment
TriggerProps with all four fields (uniqueContainerClassName,
uniqueContainerStyle, uniqueBgClassName, uniqueBgStyle) so types are correct and
you can drop the any cast.

{...extraProps}
>
{getChildren()}
Expand Down
62 changes: 31 additions & 31 deletions tests/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -319,7 +319,7 @@ describe('rc-tooltip', () => {
it('should apply custom classNames to all semantic elements', () => {
const customClassNames = {
root: 'custom-root',
body: 'custom-body',
container: 'custom-body',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The class name 'custom-body' is a remnant of the pre-refactor naming and is now misleading. For consistency and clarity, please rename it to 'custom-container'. This applies to other tests in this file as well. You'll also need to update the corresponding assertions to check for this new class name.

Suggested change
container: 'custom-body',
container: 'custom-container',

arrow: 'custom-arrow',
};

Expand All @@ -335,7 +335,7 @@ describe('rc-tooltip', () => {
);

const tooltipElement = container.querySelector('.rc-tooltip') as HTMLElement;
const tooltipBodyElement = container.querySelector('.rc-tooltip-body') as HTMLElement;
const tooltipBodyElement = container.querySelector('.rc-tooltip-container') as HTMLElement;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The variable name tooltipBodyElement is now misleading since it queries for .rc-tooltip-container. For better code clarity and maintainability, consider renaming it to tooltipContainerElement and updating its usages accordingly. This applies to all tests where this variable is used in this file.

const tooltipArrowElement = container.querySelector('.rc-tooltip-arrow') as HTMLElement;

// Verify classNames
Expand All @@ -347,7 +347,7 @@ describe('rc-tooltip', () => {
it('should apply custom styles to all semantic elements', () => {
const customStyles = {
root: { backgroundColor: 'blue', zIndex: 1000 },
body: { color: 'red', fontSize: '14px' },
container: { color: 'red', fontSize: '14px' },
arrow: { borderColor: 'green' },
};

Expand All @@ -358,7 +358,7 @@ describe('rc-tooltip', () => {
);

const tooltipElement = container.querySelector('.rc-tooltip') as HTMLElement;
const tooltipBodyElement = container.querySelector('.rc-tooltip-body') as HTMLElement;
const tooltipBodyElement = container.querySelector('.rc-tooltip-container') as HTMLElement;
const tooltipArrowElement = container.querySelector('.rc-tooltip-arrow') as HTMLElement;

// Verify styles
Expand All @@ -370,13 +370,13 @@ describe('rc-tooltip', () => {
it('should apply both classNames and styles simultaneously', () => {
const customClassNames = {
root: 'custom-root',
body: 'custom-body',
container: 'custom-body',
arrow: 'custom-arrow',
};

const customStyles = {
root: { backgroundColor: 'blue' },
body: { color: 'red' },
container: { color: 'red' },
arrow: { borderColor: 'green' },
};

Expand All @@ -393,7 +393,7 @@ describe('rc-tooltip', () => {
);

const tooltipElement = container.querySelector('.rc-tooltip') as HTMLElement;
const tooltipBodyElement = container.querySelector('.rc-tooltip-body') as HTMLElement;
const tooltipBodyElement = container.querySelector('.rc-tooltip-container') as HTMLElement;
const tooltipArrowElement = container.querySelector('.rc-tooltip-arrow') as HTMLElement;

// Verify that classNames and styles work simultaneously
Expand All @@ -407,7 +407,7 @@ describe('rc-tooltip', () => {

it('should work with partial classNames and styles', () => {
const partialClassNames = {
body: 'custom-body',
container: 'custom-body',
};

const partialStyles = {
Expand All @@ -427,7 +427,7 @@ describe('rc-tooltip', () => {
);

const tooltipElement = container.querySelector('.rc-tooltip') as HTMLElement;
const tooltipBodyElement = container.querySelector('.rc-tooltip-body') as HTMLElement;
const tooltipBodyElement = container.querySelector('.rc-tooltip-container') as HTMLElement;
const tooltipArrowElement = container.querySelector('.rc-tooltip-arrow') as HTMLElement;

// Verify partial configuration takes effect
Expand All @@ -439,38 +439,38 @@ describe('rc-tooltip', () => {
expect(tooltipArrowElement).not.toHaveClass('custom-arrow');
});

it('should pass uniqueBody to Trigger as uniqueBgClassName and uniqueBgStyle', () => {
// Test that the component renders without errors when uniqueBody is provided
render(
<UniqueProvider>
<Tooltip
classNames={{ uniqueBody: 'unique-body-class' }}
styles={{ uniqueBody: { color: 'red' } }}
overlay={<div>Tooltip content</div>}
visible
unique
>
<button>Trigger</button>
</Tooltip>
</UniqueProvider>,
);
it('should pass uniqueContainer to Trigger as uniqueContainerClassName and uniqueContainerStyle', () => {
// Test that the component renders without errors when uniqueContainer is provided
expect(() => {
render(
<UniqueProvider>
<Tooltip
classNames={{ uniqueContainer: 'unique-body-class' }}
styles={{ uniqueContainer: { color: 'red' } }}
overlay={<div>Tooltip content</div>}
visible
unique
>
<button>Trigger</button>
</Tooltip>
</UniqueProvider>,
);
}).not.toThrow();

// Test that uniqueBody doesn't break the normal tooltip functionality
expect(document.querySelector('.unique-body-class')).toHaveStyle({
color: 'red',
});
// Test that uniqueContainer doesn't break the normal tooltip functionality
// Note: The actual DOM behavior depends on @rc-component/trigger implementation
});

it('should not break when showArrow is false', () => {
const customClassNames = {
root: 'custom-root',
body: 'custom-body',
container: 'custom-body',
arrow: 'custom-arrow', // 即使配置了arrow，但不显示箭头时不应该报错
};

const customStyles = {
root: { backgroundColor: 'blue' },
body: { color: 'red' },
container: { color: 'red' },
arrow: { borderColor: 'green' },
};

Expand All @@ -487,7 +487,7 @@ describe('rc-tooltip', () => {
);

const tooltipElement = container.querySelector('.rc-tooltip') as HTMLElement;
const tooltipBodyElement = container.querySelector('.rc-tooltip-body') as HTMLElement;
const tooltipBodyElement = container.querySelector('.rc-tooltip-container') as HTMLElement;
const tooltipArrowElement = container.querySelector('.rc-tooltip-arrow');

// Verify when arrow is not shown
Expand Down