Skip to content

LightFilter 支持 Space.Compact 和 Space 包裹下的字段#9497

Closed
leshalv wants to merge 3 commits intoant-design:masterfrom
leshalv:master
Closed

LightFilter 支持 Space.Compact 和 Space 包裹下的字段#9497
leshalv wants to merge 3 commits intoant-design:masterfrom
leshalv:master

Conversation

@leshalv
Copy link
Collaborator

@leshalv leshalv commented Feb 21, 2026

  • LightFilter 支持 Space 和 Space.Compact: LightFilter 组件现在能够识别并正确处理由 Ant Design 的 Space 和 Space.Compact 组件包裹的表单字段,从而实现更紧凑的布局。
  • 优化折叠模式下的字段处理: 在 LightFilter 的折叠模式下,Space 和 Space.Compact 包裹的字段会作为一个整体被放入“更多筛选”弹层,并且清空逻辑也已更新以正确处理这些嵌套字段。
  • 新增样式规则: 为确保 Space 和 Space.Compact 在 LightFilter 中显示效果一致,新增了 CSS 样式规则,用于调整间距和合并边框,特别是在紧凑布局下。
  • 新增演示和测试用例: 添加了两个新的演示文件,展示了 LightFilter 与 Space/Space.Compact 结合使用的场景,并增加了相应的测试用例以验证其功能。

@coderabbitai
Copy link

coderabbitai bot commented Feb 21, 2026

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello @leshalv, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

此拉取请求旨在增强 LightFilter 组件的功能,使其能够支持使用 Ant Design 的 Space 和 Space.Compact 组件来包裹表单字段。这一改进使得开发者可以创建更紧凑、逻辑分组的筛选布局,例如将搜索类型选择器和关键词输入框组合在同一行。变更内容包括对组件渲染逻辑的调整、样式规则的添加以确保视觉一致性,以及新增的演示示例和测试用例,以全面覆盖新功能。

Highlights

  • LightFilter 支持 Space 和 Space.Compact: LightFilter 组件现在能够识别并正确处理由 Ant Design 的 Space 和 Space.Compact 组件包裹的表单字段,从而实现更紧凑的布局。
  • 优化折叠模式下的字段处理: 在 LightFilter 的折叠模式下,Space 和 Space.Compact 包裹的字段会作为一个整体被放入“更多筛选”弹层,并且清空逻辑也已更新以正确处理这些嵌套字段。
  • 新增样式规则: 为确保 Space 和 Space.Compact 在 LightFilter 中显示效果一致,新增了 CSS 样式规则,用于调整间距和合并边框,特别是在紧凑布局下。
  • 新增演示和测试用例: 添加了两个新的演示文件,展示了 LightFilter 与 Space/Space.Compact 结合使用的场景,并增加了相应的测试用例以验证其功能。

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog
  • demos/form/QueryFilter/light-filter-space-collapse.tsx
    • 新增了 LightFilter 在折叠模式下支持 Space 和 Space.Compact 包裹字段的演示文件。
  • demos/form/QueryFilter/light-filter-space.tsx
    • 新增了 LightFilter 支持 Space 和 Space.Compact 包裹字段的演示文件。
  • site/components/query-filter.en-US.md
    • 更新了英文文档,增加了 LightFilter 支持 Space 和 Space.Compact 包裹字段的说明和演示代码引用。
  • site/components/query-filter.md
    • 更新了中文文档,增加了 LightFilter 支持 Space 和 Space.Compact 包裹字段的说明和演示代码引用。
  • src/form/layouts/LightFilter/index.tsx
    • 从 antd 导入了 Space 组件。
    • 修改了 LightFilterContainer 组件,使其能够识别并处理 Space 和 Space.Compact 类型的子组件,并为其子项注入 light 模式和 variant 相关的 props。
    • 更新了折叠模式下清空操作的逻辑,以正确收集 Space 或 Space.Compact 内部嵌套字段的名称。
    • 移除了 props 解构中未使用的 ignoreRules 属性。
  • src/form/layouts/LightFilter/style.ts
    • 新增了 LightFilter 内部 Space 和 Space.Compact 的样式规则,以确保在紧凑布局下正确的间距和边框合并效果。
  • tests/card/snapshot/snapshot-demos-card-bordered.html
    • 更新了卡片带边框演示的快照文件,可能是由于 CSS hash 变化。
  • tests/form/lightFilter.test.tsx
    • 新增了一个测试用例,验证 LightFilter 在折叠模式下对 Space 包裹字段的支持,包括渲染和初始值设置。
  • tests/form/snapshot/snapshot-demos-form-QueryFilter-light-filter-space-collapse.html
    • 新增了 LightFilter 在折叠模式下支持 Space 和 Space.Compact 包裹字段的快照文件。
  • tests/form/snapshot/snapshot-demos-form-QueryFilter-light-filter-space.html
    • 新增了 LightFilter 支持 Space 和 Space.Compact 包裹字段的快照文件。
  • tests/snapshot/snapshot-demos-card-bordered.html
    • 更新了卡片带边框演示的快照文件,可能是由于 CSS hash 变化。
  • tests/snapshot/snapshot-demos-layout-AlwaysDefaultOpenAllMenu.html
    • 更新了布局演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-DefaultOpenAllMenu.html
    • 更新了布局演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-Nested.html
    • 更新了布局演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-api.html
    • 更新了布局 API 演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-appList-group-simple.html
    • 更新了布局 appList 简单分组演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-appList-group.html
    • 更新了布局 appList 分组演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-async-load-help.html
    • 更新了布局异步加载帮助演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-background-context.html
    • 更新了布局背景上下文演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-base.html
    • 更新了布局基础演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-classicMode.html
    • 更新了布局经典模式演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-collapsedShowTitle.html
    • 更新了布局折叠显示标题演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-config-provider.html
    • 更新了布局配置提供者演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-customSider.html
    • 更新了布局自定义侧边栏演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-dark.html
    • 更新了布局暗色模式演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-debug-demo.html
    • 更新了布局调试演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-designMenuCss.html
    • 更新了布局设计菜单 CSS 演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-designSiderMenu.html
    • 更新了布局设计侧边菜单演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-draggableHelp.html
    • 更新了布局可拖拽帮助演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-dynamic-settings.html
    • 更新了布局动态设置演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-enum-switch.html
    • 更新了布局枚举开关演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-footer-global-tools.html
    • 更新了布局页脚全局工具演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-help.html
    • 更新了布局帮助演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-mixMode.html
    • 更新了布局混合模式演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-morse_debug.html
    • 更新了布局 morse 调试演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-pageSimplify.html
    • 更新了布局页面简化演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-siderMode.html
    • 更新了布局侧边栏模式演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-siteMenu.html
    • 更新了布局站点菜单演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-splitMenus.html
    • 更新了布局分割菜单演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-theme.html
    • 更新了布局主题演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-top-breadcrumb.html
    • 更新了布局顶部面包屑演示的快照文件。
  • tests/snapshot/snapshot-demos-layout-topMode.html
    • 更新了布局顶部模式演示的快照文件。
  • tests/snapshot/snapshot-demos-table-theme.html
    • 更新了表格主题演示的快照文件。
Activity
  • 拉取请求由 leshalv 创建。
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

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

Code Review

This pull request introduces support for wrapping LightFilter fields with Space and Space.Compact components, enabling more compact layouts. The changes involve modifying the LightFilter component's rendering logic to correctly process and inject necessary props into nested form items within Space and Space.Compact elements, both in regular and collapsed modes. New demo files and updated documentation have been added to showcase this feature, along with a new test case to verify its functionality. Corresponding CSS styles were also added to ensure proper visual rendering, especially for Space.Compact elements. Review comments indicate that there is significant code duplication in the handling of Space and Space.Compact logic for outsideItems and collapseItems, suggesting refactoring into a shared helper function. Additionally, the use of !important in the new CSS styles for Space and Space.Compact is flagged as a maintainability concern, with a recommendation to use higher selector specificity instead.

@leshalv leshalv closed this Feb 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant