EmilyyyLiu · 2025-04-27T07:04:59Z

🤔 This is a ...

🆕 New feature

🔗 Related Issues

💡 Background and Solution

📝 Change Log

Language	Changelog
🇺🇸 English	Unified use of the "orientation" attribute for directional layout configuration in the Split component, and addition of the vertical attribute
🇨🇳 Chinese	对Splitter组件统一使用“orientation”属性用于方向布局配置，并增加vertical 属性

bolt-new-by-stackblitz · 2025-04-27T07:05:03Z

Run & review this pull request in StackBlitz Codeflow.

coderabbitai · 2025-04-27T07:05:07Z

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.

✨ Finishing Touches

🧪 Generate Unit Tests

Create PR with Unit Tests
Commit Unit Tests in branch next-splitter-orientation
Post Copyable Unit Tests in 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

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

github-actions · 2025-04-27T07:05:11Z

👁 Visual Regression Report for PR #53670 Passed ✅

🎯 Target branch: next (c3d0027)
📖 View Full Report ↗︎
📖 Alternative Report ↗︎

🎊 Congrats! No visual-regression diff found.

github-actions · 2025-04-27T07:05:11Z

petercat-assistant · 2025-04-27T07:05:16Z

Walkthrough: This PR introduces a unified use of the "orientation" attribute for directional layout configuration in the Split component. It also adds a new "vertical" attribute to enhance layout flexibility.

Changes:

Files	Summary
components/_util/tests/hooks.test.tsx	Added tests for `useOrientation` and `useVertical` hooks.
components/_util/hooks/useOrientation.ts	Introduced `useOrientation` and `useVertical` hooks to manage layout orientation.
components/splitter/Splitter.tsx	Replaced `layout` with `orientation` and `vertical` attributes 8000 for layout configuration.
components/splitter/tests/index.test.tsx	Added tests for the new `orientation` attribute in the Splitter component.
components/splitter/demo/collapsible.tsx, components/splitter/demo/customize.tsx, components/splitter/demo/group.tsx, components/splitter/demo/lazy.tsx, components/splitter/demo/vertical.tsx	Updated demo files to use the new `orientation` attribute.
components/splitter/index.en-US.md, components/splitter/index.zh-CN.md	Updated documentation to reflect changes in layout configuration attributes.
components/splitter/interface.ts	Updated interface to deprecate `layout` in favor of `orientation` and `vertical`.

components/splitter/demo/vertical.md

pkg-pr-new · 2025-04-27T07:08:31Z

More templates

npm i https://pkg.pr.new/ant-design/ant-design/antd@53670

commit: 45b1e34

codecov · 2025-04-27T07:09:16Z

Bundle Report

Changes will increase total bundle size by 284 bytes (0.0%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
antd.min-array-push	11.51MB	284 bytes (0.0%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: antd.min-array-push

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`antd-with-locales.js`	142 bytes	6.06MB	0.0%
`antd.js`	142 bytes	5.45MB	0.0%

codecov · 2025-04-28T09:05:09Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (c3d0027) to head (45b1e34).
Report is 1 commits behind head on next.

Additional details and impacted files

@@            Coverage Diff            @@
##              next    #53670   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          788       788           
  Lines        14304     14304           
  Branches      3786      3785    -1     
=========================================
  Hits         14304     14304

☔ 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.

components/splitter/index.zh-CN.md

components/splitter/Splitter.tsx

zombieJ · 2025-05-16T09:21:58Z

components/splitter/demo/vertical.md

 ## en-US

-Use vertical layout.
+Use `vertical` or `orientation`.


原本的描述没问题，就是垂直布局。不需要改成 API 描述

zombieJ · 2025-05-16T09:22:37Z

components/splitter/index.en-US.md

 | onResizeStart | Callback before dragging starts | `(sizes: number[]) => void` | - | - |
 | onResize | Panel size change callback | `(sizes: number[]) => void` | - | - |
 | onResizeEnd | Drag end callback | `(sizes: number[]) => void` | - | - |
+| ~~layout~~ | Layout direction | `horizontal` \| `vertical` | `horizontal` | - |


看起来上面的事件写错地方了，都挪到最下面去吧。英文版一样的

zombieJ · 2025-05-16T09:22:57Z

components/splitter/index.en-US.md

 | collapsibleIcon | custom collapsible icon | `{start: ReactNode; end: ReactNode}` | - | 6.0.0 |
 | draggerIcon | custom dragger icon | `ReactNode` | - | 6.0.0 |
 | classNames | Semantic structure className | [Record<SemanticDOM, string>](#semantic-dom) | - | 6.0.0 |
+| orientation | Layout direction | `horizontal` \| `vertical` | `horizontal` |  |


这里 Layout 改成 Orientation

components/splitter/Splitter.tsx

thinkasany · 2025-05-16T13:54:21Z

components/splitter/interface.ts

  rootClassName?: string;
-  layout?: 'horizontal' | 'vertical';
+  /**
+   * @deprecated please use orientation


Suggested change

* @deprecated please use orientation

* @deprecated please use `orientation`

不用反引号是出于其他的什么考虑吗

components/splitter/index.zh-CN.md

zombieJ · 2025-05-19T02:39:33Z

components/splitter/Splitter.tsx

      );
    }
+
+    warning(!layout, 'deprecated', '`layout` is deprecated. Please use `orientation` instead');


用 warning.deprecated，另外这个也要测试

thinkasany · 2025-05-19T03:10:21Z

components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap

-exports[`renders components/splitter/demo/collapsible.tsx extend context correctly 2`] = `[]`;
+exports[`renders components/splitter/demo/collapsible.tsx extend context correctly 2`] = `
+[
+  "Warning: [antd: Splitter] \`layout\` is deprecated. Please use \`orientation\` instead",


这种也应该是调整 demo 中使用的 api 吧，不然用户参考了文档用废弃的 api，又出现 warning，有点奇怪..

petercat-assistant bot reviewed Apr 27, 2025

View reviewed changes

components/splitter/demo/vertical.md Outdated Show resolved Hide resolved

EmilyyyLiu changed the title ~~feat[Splitter]:Unified use of orientation attribute~~ feat(Splitter): unify orientation attribute usage Apr 27, 2025

EmilyyyLiu force-pushed the next-splitter-orientation branch from 91a9917 to e3dcde2 Compare April 28, 2025 08:40

EmilyyyLiu force-pushed the next-splitter-orientation branch 3 times, most recently from 237c468 to ef33cc8 Compare May 9, 2025 08:34

EmilyyyLiu force-pushed the next-splitter-orientation branch 2 times, most recently from 9517417 to 4dd995c Compare May 16, 2025 08:11

thinkasany reviewed May 16, 2025

View reviewed changes

components/splitter/index.zh-CN.md Outdated Show resolved Hide resolved

zombieJ reviewed May 16, 2025

View reviewed changes

components/splitter/Splitter.tsx Show resolved Hide resolved

zombieJ reviewed May 16, 2025

View reviewed changes

components/splitter/Splitter.tsx Outdated Show resolved Hide resolved

EmilyyyLiu force-pushed the next-splitter-orientation branch from b567a0b to 1706d28 Compare May 16, 2025 10:01

thinkasany reviewed May 16, 2025

View reviewed changes

刘欢 added 6 commits May 19, 2025 09:55

feat[Splitter]: Unified use of orientation attribute

4905c73

docs: change text

32fcdbc

feat: change useOrientation params

8eedb8d

feat: use useOrientation and change doc

5ecd062

feat: Sort attribute names in the document ，add warning

e5764e7

feat: devUseWarning not need if

e2be9ac

EmilyyyLiu force-pushed the next-splitter-orientation branch from a579b3b to e2be9ac Compare May 19, 2025 01:55

test: update snapshots

6cd9937

zombieJ reviewed May 19, 2025

View reviewed changes

thinkasany reviewed May 19, 2025

View reviewed changes

刘欢 added 2 commits May 19, 2025 12:33

test :reset snapshots

31d7e33

docs: @deprecated please use orientation

45b1e34

thinkasany approved these changes May 19, 2025

View reviewed changes

dosubot bot added the lgtm This PR has been approved by a maintainer label May 19, 2025

thinkasany requested a review from zombieJ May 19, 2025 05:51

zombieJ approved these changes May 19, 2025

View reviewed changes

thinkasany merged commit e2dfec3 into ant-design:next May 19, 2025
39 checks passed

EmilyyyLiu deleted the next-splitter-orientation branch May 28, 2025 05:50

	* @deprecated please use orientation
	* @deprecated please use `orientation`

Uh oh!

Conversation

🤔 This is a ...

🔗 Related Issues

💡 Background and Solution

📝 Change Log

Uh oh!

Uh oh!

Uh oh!

Review skipped

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

Uh oh!

👁 Visual Regression Report for PR #53670 Passed ✅

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Uh oh!

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

CodeRabbit Configuration File (`.coderabbit.yaml`)