Skip to content

chore: popup support style inject #504

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 1 commit into from
Sep 23, 2025
Merged

chore: popup support style inject #504

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 5 additions & 3 deletions src/Popup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,18 @@ export interface ContentProps {
id?: string;
classNames?: TooltipProps['classNames'];
styles?: TooltipProps['styles'];
className?: string;
style?: React.CSSProperties;
Comment on lines +11 to +12
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

🧩 Analysis chain

验证新增属性的使用是否与现有测试兼容。

根据学习记录，overlayInnerClassName 等内部属性已有相应测试覆盖。建议验证新增的 className 和 style 属性是否会影响现有的测试用例。

运行以下脚本来检查相关测试文件和使用情况：

Also applies to: 16-16, 21-22

🏁 Script executed:

#!/bin/bash
# 描述：检查 Popup 组件的测试文件和使用情况

# 查找测试文件
echo "=== 查找 Popup 相关测试文件 ==="
fd -e test.tsx -e test.ts -e spec.tsx -e spec.ts | xargs rg -l "Popup|ContentProps"

# 查找 Popup 组件的使用情况
echo -e "\n=== 查找 Popup 组件使用情况 ==="
rg -n -C3 "ContentProps|<Popup" --type=tsx --type=ts

# 检查是否有现有的 className 或 style 相关测试
echo -e "\n=== 检查现有的 className 和 style 测试 ==="
rg -n -C3 "className.*body|style.*body" --type=tsx --type=ts -g '!node_modules'

Length of output: 161

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "=== tests/popup.test.tsx ==="
sed -n '1,400p' tests/popup.test.tsx || true

echo -e "\n=== src/Popup.tsx (first 200 lines) ==="
sed -n '1,200p' src/Popup.tsx || true

echo -e "\n=== Search overlayInnerClassName across repo ==="
rg -n --hidden -S "overlayInnerClassName" -g '!*node_modules*' || true

echo -e "\n=== Search for className/style mentions in tests ==="
rg -n --hidden -S "className|style" tests -g '!*node_modules*' || true

echo -e "\n=== Search for Popup usages across repo ==="
rg -n --hidden -S "<Popup\b|\bContentProps\b" -g '**/*.{ts,tsx,js,jsx,ts,tsx}' || true

Length of output: 1506

为 Popup 新增的 className/style 添加或更新测试

tests/popup.test.tsx 仅断言导出；src/Popup.tsx 已在接口中接收并将 className/style 合并到渲染的 div（行 11–12），但没有针对 className/style 的测试覆盖。请新增或更新测试以覆盖：1) className 与 classNames.body 的合并行为；2) style 与 styles.body 的合并行为；并确认 src/Tooltip.tsx:132 与 docs/examples/placement.tsx:95 的使用不受影响。

🤖 Prompt for AI Agents 
In src/Popup.tsx around lines 11 to 12, the component accepts className and
style but tests don't verify that these are merged with classNames.body and
styles.body; update tests/popup.test.tsx to (1) render Popup with a custom
className and assert the rendered div contains both the custom className and
classNames.body (use container.querySelector or getByTestId on the body div);
(2) render Popup with a custom style (e.g., { color: 'red' }) and assert the
rendered div's style includes both the custom style and styles.body properties
(merged correctly); keep the existing export assertion in the test file and add
assertions that src/Tooltip.tsx line 132 and docs/examples/placement.tsx line 95
usages remain valid by ensuring the test cases use the same props shapes so
those usages are not broken.

}

const Popup: React.FC<ContentProps> = (props) => {
const { children, prefixCls, id, classNames, styles } = props;
const { children, prefixCls, id, classNames, styles, className, style } = props;

return (
<div
id={id}
className={cls(`${prefixCls}-body`, classNames?.body)}
style={styles?.body}
className={cls(`${prefixCls}-body`, classNames?.body, className)}
style={{ ...styles?.body, ...style }}
Copy link
Contributor

Choose a reason for hiding this comment

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

medium

For performance, it's better to memoize this style object to avoid creating a new one on every render. This is especially important for components like tooltips that can re-render frequently on user interactions like hover. You can use React.useMemo here to prevent unnecessary re-renders of child components and reduce the overhead of React's reconciliation process.

Suggested change
style={{ ...styles?.body, ...style }}
style={React.useMemo(() => ({ ...styles?.body, ...style }), [styles, style])}

role="tooltip"
>
{typeof children === 'function' ? children() : children}
Expand Down