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
+50 −49
Merged

refactor: rename to container #505

Show file tree
Hide file tree
Changes from 1 commit
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
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
2 changes: 1 addition & 1 deletion 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' | 'uniqueBody';

export interface TooltipProps
extends Pick<
Expand Down
24 changes: 12 additions & 12 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 Down Expand Up @@ -464,13 +464,13 @@ describe('rc-tooltip', () => {
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