fix: fix form item not align when set display-only #2927
Conversation
WalkthroughThis pull request updates the CSS styling for several components. In the theme package, the margin-bottom for the form item is adjusted from Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
packages/vue/src/form-item/src/mobile-first.vueOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. packages/vue/src/input/src/mobile-first.vueOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. packages/vue/src/checkbox/src/mobile-first.vueOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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 (
|
Walkthrough此PR修复了在表单仅展示模式下的对齐问题，主要通过调整样式类的应用来实现。涉及的更改包括对表单项、复选框、输入框和工具提示组件的样式调整。 Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
WalkthroughThis PR fixes the alignment problem in form display mode, which is mainly achieved by adjusting the application of style classes. Changes involved include style adjustments to form items, check boxes, input boxes, and tooltip components. Changes
|
|
[e2e-test-warn] The title of the Pull request should look like "fix(vue-renderless): [action-menu, alert] fix xxx bug". Please make sure you've read our contributing guide |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/vue/src/tooltip/src/mobile-first.vue (1)
117-117: LGTM! Enhanced tooltip text styling.Added
tiny-tooltip-text-preclass for better styling control of pre-formatted text in tooltips.Consider documenting this class in the component's style guide for future reference.
packages/theme-saas/src/form-item/index.less (1)
19-23: Margin-Bottom Adjustment to Resolve Display-Only Alignment Issues
Changing the default bottom margin from what was likelymb-5tomb-4(line 21) should reduce excessive spacing in display-only mode. Please verify that this adjustment achieves the desired alignment across various breakpoints and does not unintentionally impact other form item variants.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
packages/theme-saas/src/form-item/index.less(1 hunks)packages/vue/src/checkbox/src/mobile-first.vue(1 hunks)packages/vue/src/form-item/src/mobile-first.vue(5 hunks)packages/vue/src/input/src/mobile-first.vue(3 hunks)packages/vue/src/tooltip/src/mobile-first.vue(1 hunks)
🔇 Additional comments (10)
packages/vue/src/checkbox/src/mobile-first.vue (1)
6-6: LGTM! Consistent line height adjustment.The change from
leading-5toleading-5.5helps standardize vertical text alignment across form components.packages/vue/src/form-item/src/mobile-first.vue (3)
6-6: LGTM! Improved form item spacing.The adjustments to min-height and padding values enhance the form item's layout, particularly in display-only mode.
Also applies to: 15-15
52-52: LGTM! Consistent text alignment.Added
sm:leading-5.5to standardize vertical text alignment with other form components.
76-77: LGTM! Enhanced responsive layout.Refined spacing and alignment classes improve the component's behavior across different screen sizes.
packages/vue/src/input/src/mobile-first.vue (2)
54-54: LGTM! Standardized text alignment.Updated to
leading-5.5to maintain consistent vertical text alignment across form components.Also applies to: 71-71
282-282: LGTM! Enhanced textarea tooltip.Added
preprop to preserve formatting in textarea tooltips.packages/theme-saas/src/form-item/index.less (4)
71-74: Refined Line-Height for Medium Form Item Labels
The updatedleading-5.5value in the&--medium &__labelselector (line 72) provides finer control over vertical alignment for medium form items. Ensure that this value meshes well with adjacent elements and preserves a consistent vertical rhythm across the UI.
103-106: Adjusted Top Margin on Switch Component
The application ofmt-1.5within the switch component block (line 104) helps tighten its alignment within the form item. Please confirm that this change works harmoniously with both interactive and display-only states.
242-248: Inline Error Spacing Enhancement
The modification to useml-2.5for the inline error container (line 247) should help maintain a consistent left margin when error messages are displayed. Ensure that this spacing is compatible with surrounding form elements and does not lead to misalignment issues.
250-257: Validation of Required Field Asterisk Content
The rule using~"content-['*']"(line 253) for marking required fields is a standard approach. Please test its rendering across target browsers to confirm that the visual indicator appears as intended without causing layout shifts.
PR
修复表单仅展示不对齐问题
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit