Skip to content

chore: deprecated List and bump alpha#54182

Merged
zombieJ merged 12 commits intonextfrom
alpha-test
Jun 27, 2025
Merged

chore: deprecated List and bump alpha#54182
zombieJ merged 12 commits intonextfrom
alpha-test

Conversation

@zombieJ
Copy link
Copy Markdown
Member

@zombieJ zombieJ commented Jun 24, 2025

中文版模板 / Chinese template

🤔 This is a ...

  • 🆕 New feature
  • 🐞 Bug fix
  • 📝 Site / documentation improvement
  • 📽️ Demo improvement
  • 💄 Component style improvement
  • 🤖 TypeScript definition improvement
  • 📦 Bundle size optimization
  • ⚡️ Performance optimization
  • ⭐️ Feature enhancement
  • 🌐 Internationalization
  • 🛠 Refactoring
  • 🎨 Code style optimization
  • ✅ Test Case
  • 🔀 Branch merge
  • ⏩ Workflow
  • ⌨️ Accessibility improvement
  • ❓ Other (about what?)

🔗 Related Issues

  • Describe the source of related requirements, such as links to relevant issue discussions.
  • For example: close #xxxx, fix #xxxx

💡 Background and Solution

  • The specific problem to be addressed.
  • List the final API implementation and usage if needed.
  • If there are UI/interaction changes, consider providing screenshots or GIFs.

📝 Change Log

Language Changelog
🇺🇸 English Depreacted List component and removed from document.
🇨🇳 Chinese 废弃 List 组件并且从官网移除。

@bolt-new-by-stackblitz
Copy link
Copy Markdown

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jun 24, 2025

👁 Visual Regression Report for PR #54182 Failed ❌

🎯 Target branch: next (9115c60)
📖 View Full Report ↗︎
📖 Alternative Report ↗︎
📊 Summary: 🔄 7 changed, 🆕 3 added

Expected (Branch next) Actual (Current PR) Diff
date-picker-component-token.compact.png date-picker-component-token.compact.png date-picker-component-token.compact.png date-picker-component-token.compact.png
date-picker-multiple-debug.compact.png date-picker-multiple-debug.compact.png date-picker-multiple-debug.compact.png date-picker-multiple-debug.compact.png
date-picker-multiple.compact.png date-picker-multiple.compact.png date-picker-multiple.compact.png date-picker-multiple.compact.png
select-debug.compact.png select-debug.compact.png select-debug.compact.png select-debug.compact.png
select-debug.dark.png select-debug.dark.png select-debug.dark.png select-debug.dark.png
select-debug.default.png select-debug.default.png select-debug.default.png select-debug.default.png
time-picker-size.compact.png time-picker-size.compact.png time-picker-size.compact.png time-picker-size.compact.png
splitter-collapsibleIcon.compact.png splitter-collapsibleIcon.compact.png 🆕🆕🆕 Added 🆕🆕🆕

Warning

There are more diffs not shown in the table. Please check the Full Report for details.


Important

There are 10 diffs found in this PR: 🔄 7 changed, 🆕 3 added.
Please check all items:

  • Checked all diffs in the full report
  • Visual diff is acceptable

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jun 24, 2025

Preview is ready

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Jun 24, 2025

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

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.

📝 Walkthrough

Summary by CodeRabbit

  • 新特性
    • Alert、Anchor、AutoComplete 组件支持为各语义部分自定义 classNames 和 styles。
    • Alert、Anchor 增加语义 DOM 示例及文档说明。
    • 新增 isValidNode、copy、useOrientation 等工具函数和 hooks。
  • API 变更
    • Alert 组件废弃 message 属性,新增 title 属性,相关文档和演示同步更新。
    • Notification 配置项 message 替换为 title。
    • AutoComplete、Alert、Anchor 等组件的 classNames/styles 结构优化。
  • 样式优化
    • Alert 组件相关 CSS 类名统一,如 -message 改为 -title,-action 改为 -actions。
  • 文档
    • 多组件文档补充语义 DOM 说明,API 表格同步属性变更。
  • 测试
    • 新增/优化 Alert、Anchor、AutoComplete 等组件的 classNames/styles 测试用例。
    • 移除 BackTop 相关测试及演示文件。
  • 重构/兼容性
    • 多组件内部配置、上下文、样式合并逻辑优化,提升可扩展性。
    • 依赖 rc-* 包名统一替换为 @rc-component/*。
  • 移除
    • 完全移除 BackTop 组件及其相关样式、文档和测试文件。

Walkthrough

本次变更大幅重构了 Alert、Anchor、AutoComplete 等组件,全面引入了对语义化 classNames 和 styles 的支持,允许开发者为组件各语义部分自定义类名和样式。同时,Alert 组件主内容属性由 message 统一迁移为 title,相关文档、演示和测试同步更新。BackTop 组件及其相关演示和测试被完全移除。内部工具库和部分依赖路径统一替换为 @rc-component 作用域包。多个组件的配置获取方式改为 useComponentConfig。此外,Wave 动画效果支持自定义颜色来源,工具类型 GetProps 现支持 React Context 对象。大量文档、演示、测试文件随功能调整同步更新。

Changes

文件/分组 变更摘要
components/alert/* Alert 支持语义化 classNames/styles,主内容属性由 message 统一迁移为 title,文档、演示、测试全面同步,ErrorBoundary 亦支持 title。
components/anchor/* Anchor 支持语义化 classNames/styles,AnchorLink 组件同步适配,新增语义结构演示与文档。
components/auto-complete/* AutoComplete 支持语义化 classNames/styles,废弃旧 popupClassName/dropdownClassName,测试和演示同步适配。
components/back-top/* BackTop 组件、样式、演示及所有测试文件全部删除。
components/avatar/* Avatar 及 AvatarGroup 配置获取改用 useComponentConfig,样式包装方式调整。
.dumi/* 多处 UI 文案去除 Ant Design 版本号,部分组件样式与属性修正,依赖路径统一为 @rc-component
components/_util/* Wave 动画支持 colorSource,isValidWaveColor/getTargetWaveColor 支持指定样式来源;useClosable 逻辑重构为纯函数,增强类型与可用性;useOrientation 钩子新增;GetProps 类型支持 Context;copy 工具函数新增并测试覆盖。
components/app/* App 组件样式包装方式调整,通知 message 属性统一迁移为 title,相关演示、测试、文档同步。
依赖路径统一 多组件与工具依赖路径统一替换为 @rc-component 作用域包。
其他 Jest 配置新增 @rc-component 编译模块;项目规则新增禁止内联三元表达式;部分小组件属性名修正、样式选择器调整。

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant Alert
  participant Anchor
  participant AutoComplete

  User->>Alert: 传入 classNames/styles、title、actions 等新属性
  Alert->>Alert: 合并 context/props 的 classNames 和 styles
  Alert->>Alert: 渲染语义结构(root, icon, section, title, ...)
  User->>Anchor: 传入 classNames/styles
  Anchor->>Anchor: 合并 context/props 的 classNames 和 styles
  Anchor->>Anchor: 渲染语义结构(root, item, title, indicator)
  User->>AutoComplete: 传入 classNames/styles
  AutoComplete->>AutoComplete: 合并新旧 classNames/styles
  AutoComplete->>AutoComplete: 渲染语义结构(root, input, popup...)
Loading

Possibly related PRs

  • ant-design/ant-design#53949: 与本 PR 相同,均将 Tag 组件的 bordered={false} 替换为 variant="filled",涉及 .dumi/hooks/useMenu.tsx,变更内容完全重叠。
  • ant-design/ant-design#53150: 与本 PR 一致,均为 AutoComplete 组件增加 classNames 与 styles 属性,提升样式灵活性,代码高度相关。

Suggested labels

skip-verify-files, lgtm

Poem

🐰
语义新装换 Alert,
Anchor、AutoComplete 皆添彩。
BackTop 轻轻说再见,
样式自定义处处来。
兔子挥笔庆更新,
组件灵活乐开怀!

✨ Finishing Touches
🧪 Generate Unit Tests
  • Create PR with Unit Tests
  • Post Copyable Unit Tests in Comment
  • Commit Unit Tests in branch alpha-test

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
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai auto-generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Copy Markdown

@accesslint accesslint Bot left a comment

Choose a reason for hiding this comment

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

There are accessibility issues in these changes.

Comment thread .dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx
@zombieJ zombieJ changed the base branch from master to next June 24, 2025 02:57
@coderabbitai coderabbitai Bot added lgtm This PR has been approved by a maintainer skip-verify-files labels Jun 24, 2025
@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages Bot commented Jun 24, 2025

Deploying ant-design with  Cloudflare Pages  Cloudflare Pages

Latest commit: 8437e24
Status: ✅  Deploy successful!
Preview URL: https://31d00c03.ant-design.pages.dev
Branch Preview URL: https://alpha-test.ant-design.pages.dev

View logs

@afc163
Copy link
Copy Markdown
Member

afc163 commented Jun 24, 2025

别从官网移除啊,打个废弃标就好

Copy link
Copy Markdown

@accesslint accesslint Bot left a comment

Choose a reason for hiding this comment

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

👏 You fixed the issue(s)! Great work.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jun 24, 2025

size-limit report 📦

Path Size
dist/antd.min.js 499.82 KB
dist/antd-with-locales.min.js 590.59 KB

@codecov
Copy link
Copy Markdown

codecov Bot commented Jun 24, 2025

Bundle Report

Bundle size has no change ✅

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Jun 24, 2025

@codecov
Copy link
Copy Markdown

codecov Bot commented Jun 25, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (2538462) to head (8437e24).
Report is 2 commits behind head on next.

Additional details and impacted files
@@            Coverage Diff            @@
##              next    #54182   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          789       789           
  Lines        14406     14409    +3     
  Branches      3806      3808    +2     
=========================================
+ Hits         14406     14409    +3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

@zombieJ zombieJ merged commit 2a2338a into next Jun 27, 2025
43 of 44 checks passed
@zombieJ zombieJ deleted the alpha-test branch June 27, 2025 02:50
@caijf
Copy link
Copy Markdown
Contributor

caijf commented Jun 27, 2025

你好,方便说下为什么要废弃 List 组件吗?

该组件作为文章列表、消息列表、商品列表展示都挺方便的,但是集成了 pagination 和 grid 可能会有点冗余。

希望可以保留该组件,并简化 items 配置项。

@afc163
Copy link
Copy Markdown
Member

afc163 commented Jun 27, 2025

@zombieJ PR 最好关联一下原始讨论文档,不然用户一看没头没尾的。

@Laffery
Copy link
Copy Markdown
Contributor

Laffery commented Nov 24, 2025

@zombieJ PR 最好关联一下原始讨论文档,不然用户一看没头没尾的。

@zombieJ 你好,这个有更新吗,我在此 PR 下以及官网 v6 changelog 下均未看到废弃原因

@thinkasany
Copy link
Copy Markdown
Member

@zombieJ PR 最好关联一下原始讨论文档,不然用户一看没头没尾的。

@zombieJ 你好,这个有更新吗,我在此 PR 下以及官网 v6 changelog 下均未看到废弃原因

@aojunhao123 来补充一份原因吧。 大致原因是因为会提供一个新的 listy 组件,来增强 list 的功能和样式

@aojunhao123
Copy link
Copy Markdown
Contributor

antd v6 中会提供一个新的Listy组件,它会内置虚拟滚动能力,以及更加侧重于布局能力,便于开发者根据不同的业务场景更好的进行自定义。目前是在rc侧开发了rc-listy(目前是开发完成,等待豆酱老师review后再做具体调整),后续antd也会在rc基础上提供一个Listy组件
RFC:#54458
Repo:https://github.com/react-component/listy

cc @Laffery @caijf

@gilluminate
Copy link
Copy Markdown

antd v6 中会提供一个新的Listy组件,它会内置虚拟滚动能力,以及更加侧重于布局能力,便于开发者根据不同的业务场景更好的进行自定义。目前是在rc侧开发了rc-listy(目前是开发完成,等待豆酱老师review后再做具体调整),后续antd也会在rc基础上提供一个Listy组件 RFC:#54458 Repo:https://github.com/react-component/listy

English translation: "A new Listy component will be provided, which will have built-in virtual scrolling capabilities and a more focused layout capabilities, making it easier for developers to better customize according to different business scenarios. Currently, rc-listy has been developed on the rc side (the development is currently completed, and specific adjustments will be made after review). In the future, antd will also provide a Listy component based on rc"

@dm-pse
Copy link
Copy Markdown

dm-pse commented Dec 15, 2025

@zombieJ , When can we expect listy to be released? It's not a great strategy to deprecate a major component before a replacement exists.

hotzenklotz added a commit to scalableminds/webknossos that referenced this pull request Dec 17, 2025
This PR update Antd from version 5 to v6. For the most part everything
just works. I followed the [official migration
guide](https://ant.design/docs/react/migration-v6) and fixed all
deprecation warnings that I encountered.

High level overview:
- Updated `antd` to version `6.1.0`
- Updated `@ant-design/icons` and `@ant-design/colors` to match 
- Updated deprecated and renamed prop names for components, e.g. `<Alert
message={...}>` --> `<Alert title={...}`>
- Updated the DOM structure of several component to use antd's `<Space>`
or `<Flex>` for more uniform layouting instead of our wild mix of
margin, paddings, custom stuff...

### Dev Instance
https://antdv6.webknossos.xyz/

### Steps to test:
- I clicked through all the views, modals etc and looked for visual
regressions.
- I did deep testing with Chrome on Mac. Lighter testing with Safari and
FireFox

### TODOs:
- [x] Fix navbar dropdown menu
- [x] Fix Dashboard > Dataset Table can be scrolled out of frame/parent
container

### Follow Ups
- [ ] Poor contrast for `<Tag>` close button in dark mode
- [ ] `<List>` component is deprecated but the new replacement is not
yet ready but [still under
development](ant-design/ant-design#54182 (comment)).

### Issues:
- fixes #9115 

------
(Please delete unneeded items, merge only when none are left open)
- [x] Added changelog entry (create a `$PR_NUMBER.md` file in
`unreleased_changes` or use `./tools/create-changelog-entry.py`)
- [ ] Added migration guide entry if applicable (edit the same file as
for the changelog)
- [ ] Updated [documentation](../blob/master/docs) if applicable
- [ ] Adapted [wk-libs python
client](https://github.com/scalableminds/webknossos-libs/tree/master/webknossos/webknossos/client)
if relevant API parts change
- [ ] Removed dev-only changes like prints and application.conf edits
- [x] Considered [common edge
cases](../blob/master/.github/common_edge_cases.md)
- [ ] Needs datastore update after deployment

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
@aojunhao123 aojunhao123 mentioned this pull request Jan 3, 2026
@verils
Copy link
Copy Markdown

verils commented Jan 13, 2026

listy上都没上,就标记废弃,着啥急呢?新菜还没端上来就嚷嚷要撤盘了么。。。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

lgtm This PR has been approved by a maintainer skip-verify-files

Projects

None yet

Development

Successfully merging this pull request may close these issues.

9 participants