feat(AutoComplete): support classNames and styles for component and ConfigProvider#53150
feat(AutoComplete): support classNames and styles for component and ConfigProvider#53150thinkasany merged 6 commits intonextfrom
classNames and styles for component and ConfigProvider#53150Conversation
|
|
👁 Visual Regression Report for PR #53150 Passed ✅
🎊 Congrats! No visual-regression diff found. 
|
|
|
|
Walkthrough: This pull request introduces a new feature to the Changes:
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
|
|
||
| warning.deprecated(!('dataSource' in props), 'dataSource', 'options'); | ||
| [ | ||
| ['dropdownClassName', 'classNames: {{ popup: ""}}'], |
There was a problem hiding this comment.
Ensure that mergedPopupStyle is correctly merged with contextStyles.popup and styles?.popup to avoid potential style conflicts or unintended overrides. Consider the order of merging to ensure the correct precedence of styles.
size-limit report 📦
|
More templates
commit: |
Bundle ReportChanges will decrease total bundle size by 7.8MB (-66.65%) ⬇️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: antd.min-array-pushAssets Changed:
Files in
Files in
|
Deploying ant-design with
|
| Latest commit: |
1eb9fec
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://bbc3087f.ant-design.pages.dev |
| Branch Preview URL: | https://cp-autocomplete.ant-design.pages.dev |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## next #53150 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 778 778
Lines 13995 13998 +3
Branches 3671 3670 -1
=========================================
+ Hits 13995 13998 +3 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
components/config-provider/index.tsx
Outdated
| warning?: WarningContextProps; | ||
| alert?: AlertConfig; | ||
| affix?: ComponentStyleConfig; | ||
| autoComplete?: AutoCompleteConfig; |
There was a problem hiding this comment.
这个不要了吧，和 Select 共用就好。否则 theme.token 里不支持 AutoComplete 会比较奇怪。
thinkasany
force-pushed
the
cp-AutoComplete
branch
from
0e43293 to
bce6589
Compare
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the 📝 WalkthroughWalkthrough这次变更主要调整了 AutoComplete 组件的样式处理方式。新增了 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 用户
participant AC as AutoComplete 组件
participant W as 警告检测器
participant MS as 样式合并器
U->>AC: 输入搜索文本
AC->>W: 检查是否使用过期属性
W-->>AC: 发出过期警告（如有）
AC->>MS: 合并 popupStyle 与 dropdownStyle
MS-->>AC: 返回合并样式
AC-->>U: 渲染下拉菜单（自定义样式）
Poem
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
components/auto-complete/demo/_semantic.tsx (2)
1-68: 语义化演示示例实现得很好，但可以进一步优化类型定义示例代码展示了 AutoComplete 组件的各个语义化部分，并且提供了多语言支持，实现得很好。不过 Block 组件的 props 类型使用了 any，可以更精确地定义类型。
建议将 Block 组件的参数类型进行如下优化:
- const Block = (prop: any) => { + const Block = (prop: Partial<AutoCompleteProps>) => {这样可以获得更好的类型提示和检查，提高代码质量。
27-45: 建议优化 AutoComplete 组件的默认选项当前 options 默认值只有一个选项 "thinkasany"，这个选项与演示目的关联不大。考虑使用更有意义的默认选项来展示组件功能。
const [options, setOptions] = React.useState<AutoCompleteProps['options']>([ - { value: 'thinkasany' }, + { value: 'example' }, + { value: 'demo' }, + { value: 'antd' }, ]);components/auto-complete/AutoComplete.tsx (1)
168-174: styles 合并逻辑良好，但 popup 样式可能需要注意优先级样式合并逻辑基本合理，但 popup 样式合并时需要注意 zIndex 的优先级。当前实现中将计算得到的 zIndex 直接应用，这可能会覆盖用户在 styles.popup 中设置的值。
建议修改 popup 样式合并逻辑，确保用户提供的 zIndex 优先级更高：
- popup: { ...styles?.popup, ...mergedPopupStyle, zIndex }, + popup: { ...styles?.popup, ...mergedPopupStyle, zIndex: styles?.popup?.zIndex ?? zIndex },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
components/auto-complete/AutoComplete.tsx(5 hunks)components/auto-complete/__tests__/index.test.tsx(1 hunks)components/auto-complete/demo/_semantic.tsx(1 hunks)components/auto-complete/demo/certain-category.tsx(1 hunks)components/auto-complete/index.en-US.md(1 hunks)components/auto-complete/index.zh-CN.md(1 hunks)components/config-provider/context.ts(1 hunks)components/select/demo/_semantic.tsx(1 hunks)
🧰 Additional context used
🧬 Code Definitions (2)
components/auto-complete/demo/_semantic.tsx (1)
components/auto-complete/AutoComplete.tsx (1) (1)
AutoCompleteProps(31-54)
components/auto-complete/AutoComplete.tsx (2)
components/config-provider/context.ts (2) (2)
ConfigConsumerProps(387-409)ConfigContext(419-423)components/config-provider/index.tsx (2) (2)
ConfigConsumerProps(114-114)ConfigContext(111-111)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (13)
components/config-provider/context.ts (1)
28-28: 导入顺序调整，确保MasonryProps类型可用类型导入位置调整，确保了MasonryProps类型能在文件中被正确引用。这是一个无功能性变更的代码整理。
components/select/demo/_semantic.tsx (1)
36-36: 添加了定位属性以控制下拉菜单位置通过添加
placement="bottomLeft"属性，明确指定了下拉菜单应该出现在Select组件的左下方，这增强了组件的可预测性和用户体验。components/auto-complete/index.en-US.md (1)
86-88: 增加了语义DOM文档部分新增了"Semantic DOM"文档部分，并引入了相关示例代码。这对于理解组件的DOM结构和实现更好的可访问性非常有价值。
components/auto-complete/demo/certain-category.tsx (1)
43-43: 更新为使用新的classNames API代替popupClassName将
popupClassName属性替换为结构化的classNames={{ popup: 'certain-category-search-dropdown' }}，符合组件API的最新变更。这种方式提供了更灵活和一致的样式管理方法。components/auto-complete/index.zh-CN.md (1)
87-89: 文档增加了语义化 DOM 部分，很好！增加了"语义化 DOM"章节并引用了新的示例代码，这对用户理解组件结构很有帮助。
components/auto-complete/__tests__/index.test.tsx (1)
100-141: 测试用例完善，覆盖了新增的 classNames 和 styles 特性这个测试用例很全面地验证了 AutoComplete 组件对新增的 classNames 和 styles 属性的支持，包括对根元素、输入框、列表、列表项和弹出层的样式定制能力。测试结构清晰，断言完备。
components/auto-complete/AutoComplete.tsx (7)
21-21: 新增 SemanticName 类型定义很好地支持了语义化样式定义 SemanticName 类型明确了组件的语义化结构，有助于开发者理解可定制的部分，符合组件的整体设计理念。
41-48: 弃用提示更新清晰明确为 popupClassName、dropdownClassName、popupStyle 和 dropdownStyle 添加了明确的弃用提示，并提供了替代方案，有助于用户平滑迁移到新的 API。
52-53: 新增 classNames 和 styles 属性提供了更灵活的样式定制能力添加这两个属性使 AutoComplete 组件的样式定制能力与其他组件保持一致，增强了整体 API 的一致性。这种结构化的方式比单独的样式属性更加清晰。
130-138: 重构警告代码结构清晰，易于维护使用数组存储废弃属性和替代方案，然后循环处理，代码更简洁、更易于维护。这种方式也便于将来添加新的废弃属性。
150-153: 合并弹出层样式并处理 zIndex正确合并了 popupStyle 和 dropdownStyle，并且适当处理了 zIndex。这确保了样式的正确应用和层级管理。
请确保在合并样式时不会有意外覆盖，特别是当 ConfigProvider 中也提供了样式时。建议检查样式合并的优先级是否符合预期。
155-166: classNames 合并逻辑清晰完整合并类名的逻辑考虑了默认类名、用户自定义类名和废弃属性，保证了向后兼容性。特别是 popup 类名合并了 popupClassName 和 dropdownClassName，确保了平滑过渡。
182-183: 将合并后的样式和类名传递给 Select 组件正确地将处理后的 classNames 和 styles 传递给了底层的 Select 组件，确保样式能正确应用。
| /** @deprecated Please use `classNames: {{ popup: ""}}` instead */ | ||
| dropdownClassName?: string; | ||
| /** @deprecated Please use `styles: {{ popup: {}}}` instead */ | ||
| dropdownStyle?: React.CSSProperties; |
There was a problem hiding this comment.
dropdownStyle 和 popupStyle 在 v5 里本来就没有，不需要加了再 deprecated
There was a problem hiding this comment.
dropdownStyle 好像还在的。 popupStyle确实没必要了
| import SemanticPreview from '../../../.dumi/components/SemanticPreview'; | ||
| import useLocale from '../../../.dumi/hooks/useLocale'; | ||
|
|
||
| const locales = { |
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
| warning.deprecated(!('dataSource' in props), 'dataSource', 'options'); | ||
| [ | ||
| ['dropdownClassName', 'classNames.popup'], | ||
| ['popupClassName', 'classNames.popup}'], |
Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com> Signed-off-by: thinkasany <[email protected]>
Wxh16144
changed the title
classNames and styles for component and ConfigProvider
3 participants
🤔 This is a ...
📝 Change Log
Summary by CodeRabbit
新功能
测试
文档