feat(Space): unify orientation attribute usage by EmilyyyLiu · Pull Request #53669 · ant-design/ant-design

EmilyyyLiu · 2025-04-27T06:59:58Z

🤔 This is a ...

🆕 New feature

🔗 Related Issues

Describe the source of related requirements, such as links to relevant issue discussions.

For example: close #xxxx, fix #xxxx

💡 Background and Solution

FRC #53328

📝 Change Log

Language	Changelog
🇺🇸 English	Add the 'orientation' attribute to Space components for orientation configuration
🇨🇳 Chinese	对Space组件增加使用“orientation”属性用于方向布局配置

bolt-new-by-stackblitz · 2025-04-27T07:00:01Z

Run & review this pull request in StackBlitz Codeflow.

coderabbitai · 2025-04-27T07:00:04Z

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.

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 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:00:09Z

👁 Visual Regression Report for PR #53669 Failed ❌

🎯 Target branch: next (cc1bcb6)
📖 View Full Report ↗︎
📖 Alternative Report ↗︎
📊 Summary: 🔄 6 changed

Expected (Branch next)	Actual (Current PR)	Diff
auto-complete-render-panel.compact.png	auto-complete-render-panel.compact.png
auto-complete-render-panel.dark.png	auto-complete-render-panel.dark.png
auto-complete-render-panel.default.png	auto-complete-render-panel.default.png
select-render-panel.compact.png	select-render-panel.compact.png
select-render-panel.dark.png	select-render-panel.dark.png
select-render-panel.default.png	select-render-panel.default.png

Important

There are 6 diffs found in this PR: 🔄 6 changed.
Please check all items:

Visual diff is acceptable

github-actions · 2025-04-27T07:00:10Z

petercat-assistant · 2025-04-27T07:00:12Z

Walkthrough

This pull request introduces a new feature by adding the 'orientation' attribute to Space components, allowing for orientation configuration. The change aims to unify the use of orientation attributes across the components.

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 for managing orientation logic.
components/space/Compact.tsx	Replaced `direction` with `orientation` for layout configuration.
components/space/demo/*.tsx	Updated demos to use `orientation` instead of `direction`.
components/space/index.en-US.md, components/space/index.zh-CN.md	Updated documentation to reflect the change from `direction` to `orientation`.
components/space/index.tsx	Modified to use `orientation` for layout direction.

components/_util/hooks/useOrientation.ts

pkg-pr-new · 2025-04-27T07:03:44Z

More templates

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

commit: 4053b4c

codecov · 2025-04-27T07:04:15Z

Bundle Report

Changes will decrease total bundle size by 7.76MB (-67.41%) ⬇️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
antd.min-array-push	3.75MB	-7.76MB (-67.41%) ⬇️

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.min.js` (New)	2.07MB	2.07MB	100.0% 🚀
`antd.min.js` (New)	1.69MB	1.69MB	100.0% 🚀
~~`antd-with-locales.js`~~ (Deleted)	-6.06MB	0 bytes	-100.0% 🗑️
~~`antd.js`~~ (Deleted)	-5.46MB	0 bytes	-100.0% 🗑️

codecov · 2025-04-27T07:20:35Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (cc1bcb6) to head (4053b4c).
Report is 1 commits behind head on next.

Additional details and impacted files

@@            Coverage Diff            @@
##              next    #53669   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          788       788           
  Lines        14309     14316    +7     
  Branches      3784      3785    +1     
=========================================
+ Hits         14309     14316    +7

☔ 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/space/Compact.tsx

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

components/space/index.tsx

zombieJ · 2025-05-19T07:34:12Z

components/card/demo/basic.tsx


 const App: React.FC = () => (
-  <Space direction="vertical" size={16}>
+  <Space orientation="vertical" size={16}>


非 Space 的 Demo 里直接换成 vertical 吧，简单一些。

Space 没有vertical ，加上？

已经加上vertical属性

zombieJ · 2025-05-20T06:21:34Z

components/auto-complete/demo/render-panel.tsx


  return (
-    <Space direction="vertical" style={{ display: 'flex' }}>
+    <Space vertical style={{ display: 'flex' }}>


这个 Demo 直接换成 Flex

components/input/demo/password-input.tsx

zombieJ · 2025-05-20T06:24:29Z

components/select/demo/render-panel.tsx


  return (
-    <Space direction="vertical" style={{ display: 'flex' }}>
+    <Space vertical style={{ display: 'flex' }}>


换成 Flex

zombieJ · 2025-05-20T07:55:07Z

components/auto-complete/demo/render-panel.tsx


  return (
-    <Space direction="vertical" style={{ display: 'flex' }}>
+    <Space vertical>


用 Flex 组件，不是删掉 flex

👌，改掉了

Co-authored-by: thinkasany <480968828@qq.com> Signed-off-by: EmilyyyLiu <100924403+EmilyyyLiu@users.noreply.github.com>

components/space/index.tsx

components/space/Compact.tsx

Signed-off-by: thinkasany <480968828@qq.com>

zombieJ · 2025-05-22T07:30:51Z

components/space/Compact.tsx

  size?: SizeType;
-  direction?: 'horizontal' | 'vertical';
+  /** @deprecated please use `orientation` instead */
+  direction?: Orientation;


Compact 好像没有 warning 这个？

补上了 4053b4c

petercat-assistant bot reviewed Apr 27, 2025

View reviewed changes

components/_util/hooks/useOrientation.ts Outdated Show resolved Hide resolved

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

EmilyyyLiu force-pushed the next-space-orientation branch from 422f569 to e8de865 Compare April 28, 2025 08:48

EmilyyyLiu force-pushed the next-space-orientation branch 3 times, most recently from 1289792 to 77cab38 Compare May 9, 2025 08:33

EmilyyyLiu force-pushed the next-space-orientation branch 3 times, most recently from 7eca1cc to ab0158e Compare May 19, 2025 01:55

thinkasany reviewed May 19, 2025

View reviewed changes

components/space/Compact.tsx Outdated Show resolved Hide resolved

components/space/__tests__/__snapshots__/demo-extend.test.ts.snap Outdated Show resolved Hide resolved

thinkasany reviewed May 19, 2025

View reviewed changes

components/space/index.tsx Show resolved Hide resolved

zombieJ reviewed May 19, 2025

View reviewed changes

EmilyyyLiu force-pushed the next-space-orientation branch from c58705b to 5b16141 Compare May 19, 2025 09:11

zombieJ reviewed May 20, 2025

View reviewed changes

components/input/demo/password-input.tsx Outdated Show resolved Hide resolved

zombieJ reviewed May 20, 2025

View reviewed changes

刘欢 and others added 5 commits May 21, 2025 09:22

feat[Space]:Unified use of orientation attribute

3988b7a

feat: use useOrientation and change doc, add test

06637ed

feat: add warning

434b0e1

test: update snapshots

ddbf23f

Update components/space/Compact.tsx

f5fac03

Co-authored-by: thinkasany <480968828@qq.com> Signed-off-by: EmilyyyLiu <100924403+EmilyyyLiu@users.noreply.github.com>

刘欢 added 7 commits May 21, 2025 09:22

test: reset snapshots,delete direction default value

5c66c31

feat: change demo direnction->orentation

c179c20

feat: demos direction ->orientation

4b60ae0

feat: add vertical, and change demos , doc

782c477

feat: change demo space -> flex

f67e29f

feat: change demo space -> flex

9812bd2

feat: space -> flex

a5a7205

EmilyyyLiu force-pushed the next-space-orientation branch from 136b9c4 to a5a7205 Compare May 21, 2025 01:22

thinkasany reviewed May 22, 2025

View reviewed changes

components/space/index.tsx Outdated Show resolved Hide resolved

components/space/Compact.tsx Outdated Show resolved Hide resolved

thinkasany added 3 commits May 22, 2025 14:12

Update components/space/index.tsx

7fab5ff

Signed-off-by: thinkasany <480968828@qq.com>

Update components/space/Compact.tsx

752b241

Signed-off-by: thinkasany <480968828@qq.com>

Merge branch 'next' into next-space-orientation

b53ea29

zombieJ reviewed May 22, 2025

View reviewed changes

add warning toHaveBeenCalledWith

4053b4c

zombieJ approved these changes May 23, 2025

View reviewed changes

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

zombieJ merged commit 47eb1b6 into ant-design:next May 23, 2025
39 checks passed

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

Uh oh!

Conversation

EmilyyyLiu commented Apr 27, 2025

🤔 This is a ...

🔗 Related Issues

💡 Background and Solution

📝 Change Log

Uh oh!

bolt-new-by-stackblitz bot commented Apr 27, 2025

Uh oh!

coderabbitai bot commented Apr 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

github-actions bot commented Apr 27, 2025 • edited by thinkasany Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

👁 Visual Regression Report for PR #53669 Failed ❌

Uh oh!

github-actions bot commented Apr 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

petercat-assistant bot commented Apr 27, 2025

Walkthrough

Changes

Uh oh!

Uh oh!

pkg-pr-new bot commented Apr 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Apr 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Uh oh!

codecov bot commented Apr 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

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!

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!

Choose a reason for hiding this comment

Uh oh!

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

coderabbitai bot commented Apr 27, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

github-actions bot commented Apr 27, 2025 •

edited by thinkasany

Loading

github-actions bot commented Apr 27, 2025 •

edited

Loading

pkg-pr-new bot commented Apr 27, 2025 •

edited

Loading

codecov bot commented Apr 27, 2025 •

edited

Loading

codecov bot commented Apr 27, 2025 •

edited

Loading