fix label-wrap when not required#53552
Conversation
|
|
📝 WalkthroughSummary by CodeRabbit
## Summary by CodeRabbit
- **样式**
- 优化了表单项标签包装器的直接子元素 `label` 的垂直对齐样式，新增 `verticalAlign: 'middle'` 和 `textWrap: 'balance'`。
- **示例**
- 在表单示例中新增了一个带有超长标签文本的表单项，包含输入框但无校验规则。
## Walkthrough
本次更改在表单组件样式中，向表单项标签包装器的直接子元素 `label` 添加了 `verticalAlign: 'middle'` 和 `textWrap: 'balance'` 样式，调整标签的垂直对齐和文本换行方式。同时，在表单示例文件中新增了一个标签为“ A super long label text”的表单项，包含一个输入框但无校验规则，其他表单结构未变。
## Changes
| 文件路径 | 变更摘要 |
|--------------------------------------------|------------------------------------------------------------------|
| components/form/style/index.ts | 在 `genFormItemStyle` 中，表单项标签包装器的直接子 `label` 添加了 `verticalAlign: 'middle'` 和 `textWrap: 'balance'` 样式。|
| components/form/demo/layout-can-wrap.tsx | 新增一个标签为“ A super long label text”的表单项，包含输入框，无校验规则。|
## Suggested reviewers
- afc163
## Poem
> 兔子跳跃样式间，
> 标签中增中线颜，
> 文本平衡新姿态，
> 输入框添长标签，
> 代码细节巧安排。
> 前端世界更自然，
> 轻盈跃动不停歇！
> 🐇✨📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
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. 🪧 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 (
|
👁 Visual Regression Report for PR #53552 Failed ❌
Important There are 7 diffs found in this PR: 🔄
|
|
|
More templates
commit: |
Bundle ReportChanges will increase total bundle size by 124 bytes (0.0%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: antd.min-array-pushAssets Changed:
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #53552 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 769 769
Lines 13890 13903 +13
Branches 3644 3650 +6
=========================================
+ Hits 13890 13903 +13 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
提供一个重现？ |
There was a problem hiding this comment.
Pull Request Overview
This PR fixes the label wrap misalignment issue for non-required form items by adjusting the line-height on the wrap container and restoring it on the nested label element.
- Updated the label wrap style by setting the parent container’s line-height to 0 and explicitly applying token.lineHeight to its direct label child.
- Ensures the vertical alignment of the label remains consistent with the input.
|
加个 demo 用于 image snapshot 吧，避免之后改挂。 |
| </Form.Item> | ||
|
|
||
| <Form.Item label="A super long label text" name="password1"> | ||
| <Input /> |
There was a problem hiding this comment.
Looks like this element is missing an accessible name or label. That makes it hard for people using screen readers or voice control to use the control.
added |
Signed-off-by: pre1ude <pre1ude@users.noreply.github.com>
|
It is better for this situation: https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap 
|
ok, added |
|
🎉 Thank you for your contribution! If you have not yet joined our DingTalk community group, please feel free to join us (when joining, please provide the link to this PR). 🎉 感谢您的贡献！如果您还没有加入钉钉社区群，请扫描下方二维码加入我们（加群时请提供此 PR 链接）。 
|
中文版模板 / Chinese template
This is a fix for label wrap when not required and label is not middle align with input
reproduce demo: https://codesandbox.io/p/sandbox/biao-dan-biao-qian-ke-huan-xing-antd-5-24-7-forked-3sl8sg?file=%2Fdemo.tsx%3A20%2C17
🔗 Related Issues
💡 Background and Solution
📝 Change Log