chore: 更新表单描述显示样式

[wu-clan]

Description

close: #6778

修改表单描述的显示样式，与 antv 尽可能保持一致

请注意，当包含描述时，label 对齐是针对组件和描述的总高度居中，而不是仅针对组件进行居中，这点与 antv 不一致，如需修改，请维护人员直接推送到此分支即可

修改前：

修改后：

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)

Checklist

ℹ️ Check all checkboxes - this will indicate that you have done everything in accordance with the rules in CONTRIBUTING.

• If you introduce new functionality, document it. You can run documentation with pnpm run docs:dev command.
• Run the tests with pnpm test.
• Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.
• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

Summary by CodeRabbit

• Style

  • Updated form field description styling with adjusted text sizing and spacing for improved visual hierarchy.
  • Refined form element hover and focus state styling for better visual consistency.

• Documentation

  • Added new form example demonstrating input fields with descriptions.

[changeset-bot]

⚠️ No Changeset found

Latest commit: c410efb

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

Walkthrough

CSS class ordering adjustments to form field input styling and form description layout, including replacement of margin-left with smaller text sizing, and addition of a new example form item with description in the playground.

Changes

Cohort / File(s)	Change Summary
Form field styling packages/@core/ui-kit/form-ui/src/form-render/form-field.vue	Reordered CSS classes in input element (hover styles before focus styles), reordered CircleAlert inline classes, repositioned FormDescription block with text-xs styling and removed ml-1 spacing, placed after suffix block
Playground example playground/src/views/examples/form/basic.vue	Added new form schema item with fieldName 'desc', label "字符串(带描述)", and description text

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Focus on verifying that CSS class reordering maintains visual consistency and doesn't inadvertently change specificity precedence
• Confirm FormDescription layout changes (text-xs replacement for ml-1, positioning after suffix) render correctly at various viewport sizes
• Validate new example form item displays correctly with description

Possibly related PRs

• fix: hover border style same as antd style when validate error #4409 — Modifies the same form-field.vue class bindings to adjust hover/focus ordering for invalid state styling
• fix: the focus style and antd of the input box validation failure should be consistent #4446 — Directly related; modifies input invalid-state class bindings with similar hover/focus reordering and focus shadow adjustments
• fix: select Long option style problem #5030 — Modifies the same form-field.vue template with class and layout adjustments in the main section

Suggested labels

bug

Suggested reviewers

• anncwb
• vince292007
• mynetfan
• jinmao88

Poem

🐰 The form field hops with style so fine,
Hover and focus now align,
Description dances, slim and neat,
With text-xs making readability sweet,
CSS choreography, precise and tight! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title directly describes the main change: updating form description display styles, which aligns with the primary modifications to form-field.vue styling.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The pull request description is complete with issue reference, clear intent in Chinese, before/after screenshots, proper type classification, and all checklist items marked as complete.

✨ Finishing touches

• 📝 Generate docstrings

🧪 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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/@core/ui-kit/form-ui/src/form-render/form-field.vue (1)

385-387: Approved: Description styling updated to align with design system.

The changes reduce text size and remove left margin, improving alignment with Ant Design's form description styling as stated in the PR objectives. The repositioning after the suffix block maintains proper layout flow.

Consider verifying that the text-xs size (12px) meets accessibility guidelines for supplementary text, especially for users with visual impairments. WCAG recommends a minimum of 14px for body text, though smaller sizes are acceptable for supplementary content.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f09aace and c410efb.

📒 Files selected for processing (2)

• packages/@core/ui-kit/form-ui/src/form-render/form-field.vue (3 hunks)
• playground/src/views/examples/form/basic.vue (1 hunks)

🧰 Additional context used

🧠 Learnings (2)

📚 Learning: 2024-12-09T04:41:58.914Z

Learnt from: mynetfan
Repo: vbenjs/vue-vben-admin PR: 5075
File: packages/effects/common-ui/src/components/api-select/api-select.vue:61-62
Timestamp: 2024-12-09T04:41:58.914Z
Learning: 在文件 `packages/effects/common-ui/src/components/api-select/api-select.vue` 的组件 `ApiSelect` 中，`childrenField` 的默认值设置为空字符串是有意的，因为并非所有组件都使用树形数据。

Applied to files:

• playground/src/views/examples/form/basic.vue

📚 Learning: 2024-12-04T04:43:22.179Z

Learnt from: mynetfan
Repo: vbenjs/vue-vben-admin PR: 5013
File: docs/src/components/layout-ui/page.md:23-24
Timestamp: 2024-12-04T04:43:22.179Z
Learning: 在 `docs/src/components/layout-ui/page.md` 的 `Page` 组件中，`title` 和 `description` 属性有意使用 `string|slot` 类型表示法，表示它们可以接受字符串或插槽。

Applied to files:

• playground/src/views/examples/form/basic.vue

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: post-update (ubuntu-latest)
• GitHub Check: post-update (windows-latest)

🔇 Additional comments (3)

packages/@core/ui-kit/form-ui/src/form-render/form-field.vue (2)

342-343: LGTM! Class ordering follows convention.

Reordering hover before focus improves readability and follows common CSS pseudo-class conventions. Since these are different pseudo-classes, this doesn't affect Tailwind's behavior.

---

370-371: LGTM! Consistent class ordering.

The class reordering maintains visual consistency while improving code organization.

playground/src/views/examples/form/basic.vue (1)

70-76: LGTM! Good example addition.

The new form field effectively demonstrates the updated description feature, providing a clear example for developers to reference. The placement and minimal configuration make it easy to understand.

[wu-clan]

或者自定义 useVbenForm 属性 wrapperClass，可以达到类似效果

wrapperClass: 'flex-col items-start',

自定义描述字体大小：

description: () =>
  h('div', { class: 'text-xs' }, '这是表单描述'),

[doraemonxxx]

Nice