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 all 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
7 changes: 4 additions & 3 deletions 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 All @@ -64,10 +64,11 @@
"rc-test": "^7.0.9",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"typescript": "^4.0.5"
"typescript": "^4.0.5",
"prettier": "^3.6.2"
},
"peerDependencies": {
"react": ">=18.0.0",
"react-dom": ">=18.0.0"
}
}
}
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
6 changes: 3 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,8 @@ 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}
{...extraProps}
>
{getChildren()}
Expand Down
70 changes: 35 additions & 35 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-container',
arrow: 'custom-arrow',
};

Expand All @@ -335,19 +335,19 @@ 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
expect(tooltipElement).toHaveClass('custom-root');
expect(tooltipBodyElement).toHaveClass('custom-body');
expect(tooltipBodyElement).toHaveClass('custom-container');
expect(tooltipArrowElement).toHaveClass('custom-arrow');
});

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-container',
arrow: 'custom-arrow',
};

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

Expand All @@ -393,21 +393,21 @@ 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
expect(tooltipElement).toHaveClass('custom-root');
expect(tooltipElement).toHaveStyle({ backgroundColor: 'blue' });
expect(tooltipBodyElement).toHaveClass('custom-body');
expect(tooltipBodyElement).toHaveClass('custom-container');
expect(tooltipBodyElement).toHaveStyle({ color: 'red' });
expect(tooltipArrowElement).toHaveClass('custom-arrow');
expect(tooltipArrowElement).toHaveStyle({ borderColor: 'green' });
});

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

const partialStyles = {
Expand All @@ -427,50 +427,50 @@ 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
expect(tooltipElement).toHaveStyle({ backgroundColor: 'blue' });
expect(tooltipBodyElement).toHaveClass('custom-body');
expect(tooltipBodyElement).toHaveClass('custom-container');

// Verify that unconfigured elements don't have custom class names or styles
expect(tooltipElement).not.toHaveClass('custom-root');
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-container-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-container',
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 All @@ -496,7 +496,7 @@ describe('rc-tooltip', () => {
// Other styles still take effect
expect(tooltipElement).toHaveClass('custom-root');
expect(tooltipElement).toHaveStyle({ backgroundColor: 'blue' });
expect(tooltipBodyElement).toHaveClass('custom-body');
expect(tooltipBodyElement).toHaveClass('custom-container');
expect(tooltipBodyElement).toHaveStyle({ color: 'red' });
});
});
Expand Down