tiny-vue icon indicating copy to clipboard operation
tiny-vue copied to clipboard
verified publisher icon opentiny

fix: fix form item not align when set display-only

Open gimmyhehe opened this issue 8 months ago • 2 comments

PR

修复表单仅展示场景下，文本垂直对齐问题

PR Checklist

Please check if your PR fulfills the following requirements:

  • [ ] The commit message follows our Commit Message Guidelines
  • [ ] Tests for the changes have been added (for bug fixes / features)
  • [ ] Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

  • [ ] Bugfix
  • [ ] Feature
  • [ ] Code style update (formatting, local variables)
  • [ ] Refactoring (no functional changes, no api changes)
  • [ ] Build related changes
  • [ ] CI related changes
  • [ ] Documentation content changes
  • [ ] Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

  • [ ] Yes
  • [ ] No

Other information

Summary by CodeRabbit

  • Style
    • Reduced vertical spacing below form items for a more compact layout.
    • Adjusted element height and line-height for input prefixes and labels, enhancing text alignment.
    • Refined responsive design on small screens by updating padding, minimum height, and alignment across form and checkbox components.
    • Improved visual consistency in selection controls by updating typography and cursor styles.

gimmyhehe avatar Mar 27 '25 06:03 gimmyhehe

Walkthrough

This pull request updates several CSS style rules across both LESS and Vue template files. Changes include adjusting margin, height, padding, and line-height properties in form and input components. In the theme-saas package, spacing values were modified to reduce vertical gaps. In the Vue package, various mobile-first template files have been updated to use a new leading value and other responsive spacing adjustments. The token file also sees minor refactoring to streamline class declarations and cursor styling. No changes were made to any exported or public entities.

Changes

File(s) Change Summary
packages/theme-saas/src/form-item/index.less Adjusted .form-item-prefix-cls margin-bottom from mb-5 to mb-4.
packages/theme-saas/src/form/index.less Changed input prefix height from h-4 to h-auto and added leading-5.5 for improved line spacing.
packages/vue/src/checkbox/src/mobile-first.vue; packages/vue/src/input/src/mobile-first.vue; packages/vue/src/numeric/src/mobile-first.vue Updated text line-height classes, replacing leading-5/leading-normal with leading-5.5 for consistent vertical spacing.
packages/vue/src/form-item/src/mobile-first.vue Refined responsive styling by altering sm:min-h, padding (sm:py), max-height, and conditional leading classes; removed an unnecessary alignment class.
packages/vue/src/radio/src/token.ts Streamlined class declaration by removing a line break, added cursor-default to readonly classes, and prefixed not-readonly-common with align-middle for proper alignment.

Possibly related PRs

  • opentiny/tiny-vue#2980: Involved modifications to CSS class definitions affecting layout and responsive styling in mobile-first components.
  • opentiny/tiny-vue#2927: Addressed a similar margin-bottom property change for the .form-item-prefix-cls class.

Suggested labels

bug

Suggested reviewers

  • zzcr

Poem

I’m a rabbit hopping through code so neat,
Adjusting spaces where margins did meet.
New line-heights and paddings now in play,
Mobile-first styling leads the way.
Hop, hop—celebrating changes with a happy beat!

[!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

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

packages/vue/src/form-item/src/mobile-first.vue

Oops! 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:

npm install eslint-plugin-vue@latest --save-dev

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

Oops! 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:

npm install eslint-plugin-vue@latest --save-dev

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

Oops! 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:

npm install eslint-plugin-vue@latest --save-dev

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.

  • 2 others
📜 Recent review details

Configuration used: CodeRabbit UI Review profile: CHILL Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1a05bd63074c8424c10782dfa8bb0ed14d11ef37 and 8884f7f79807e6bb8ec343096d496833750c99c6.

📒 Files selected for processing (7)
  • packages/theme-saas/src/form-item/index.less (1 hunks)
  • packages/theme-saas/src/form/index.less (1 hunks)
  • packages/vue/src/checkbox/src/mobile-first.vue (1 hunks)
  • packages/vue/src/form-item/src/mobile-first.vue (6 hunks)
  • packages/vue/src/input/src/mobile-first.vue (2 hunks)
  • packages/vue/src/numeric/src/mobile-first.vue (1 hunks)
  • packages/vue/src/radio/src/token.ts (2 hunks)
🔇 Additional comments (16)
packages/theme-saas/src/form-item/index.less (1)

21-21: Good spacing adjustment for consistency.

Reducing the margin-bottom from 5 to 4 units helps maintain consistent spacing between form items, which is particularly important when they are in display-only mode.

packages/vue/src/checkbox/src/mobile-first.vue (1)

6-6: Good line height adjustment for display-only alignment.

Changing from leading-5 to leading-5.5 improves the vertical alignment of checkbox labels in display-only mode, making them consistent with other form components.

packages/vue/src/numeric/src/mobile-first.vue (1)

106-106: Good line height standardization for display-only content.

Changing from sm:leading-normal to sm:leading-5.5 sets a specific line height value that matches other components in display-only mode, ensuring consistent vertical alignment across the form.

packages/vue/src/input/src/mobile-first.vue (2)

54-54: Good line height standardization for password fields.

Changing from sm:leading-normal to sm:leading-5.5 for password fields in display-only mode ensures consistent vertical alignment with other form components.

71-71: Good line height standardization for text fields.

Changing from sm:leading-normal to sm:leading-5.5 for regular text fields in display-only mode ensures consistent vertical alignment with other form components.

packages/theme-saas/src/form/index.less (1)

158-159: Improved form item alignment in display-only mode.

The changes now provide better vertical alignment for range editor components in display-only forms by:

  1. Using h-auto instead of a fixed height to accommodate content of varying sizes
  2. Applying the leading-5.5 line height for consistent text alignment with other form components
packages/vue/src/radio/src/token.ts (1)

40-42: Enhanced cursor behavior and alignment for radio components.

These changes improve the user experience by:

  1. Adding cursor-default to read-only states to indicate they cannot be interacted with
  2. Adding align-middle to non-readonly elements for better vertical alignment with surrounding content
packages/vue/src/form-item/src/mobile-first.vue (9)

5-7: Adjusted minimum height and spacing for better form item alignment.

The changes reduce the minimum height from theme(spacing.7) to theme(spacing.5) on small screens, which helps fix the alignment issue described in the PR title.

15-15: Added explicit padding control for display-only mode.

The addition of py-0.5 sm:py-0 for display-only items ensures consistent vertical spacing across different screen sizes, eliminating unwanted gaps that could cause alignment issues.

29-29: Refined label spacing for better alignment.

Changing to sm:py-0 from what was likely a larger padding value helps ensure the labels align properly with their associated form content in display-only mode.

37-37: Fixed label alignment in display-only mode.

The addition of align-[inherit] ensures the label inherits the vertical alignment from its parent, rather than using a fixed alignment that could cause misalignment issues.

52-53: Improved text truncation with increased maximum height.

Increasing the maximum height to theme(spacing.12) allows for better display of multi-line content while maintaining the two-line clamp, preventing awkward cutoffs.

56-56: Standardized line heights for better text alignment.

Using sm:leading-5.5 for display-only mode and sm:leading-7 for editable mode ensures consistent vertical spacing across different states, fixing the alignment issues mentioned in the PR title.

76-77: Simplified form item inline container styling.

The changes remove unnecessary margin auto styling that could interfere with precise alignment of form elements.

80-82: Enhanced display-only component spacing and structure.

The changes improve the structure and line heights of various nested components within display-only form items, ensuring consistent alignment across different component types.

114-115: Standardized line height for display-only form content.

Using sm:leading-5.5 for display-only content while ensuring proper height for interactive components like checkboxes and radios creates consistent vertical alignment throughout the form.

✨ Finishing Touches
  • [ ] 📝 Generate Docstrings

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.
    • Generate unit testing code for this file.
    • 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 generate unit testing code for this file.
    • @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 generate unit testing code.
    • @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.

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 resolve resolve all the CodeRabbit review comments.
  • @coderabbitai plan to trigger planning for file edits and PR creation.
  • @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.

coderabbitai[bot] avatar Mar 27 '25 06:03 coderabbitai[bot]

[e2e-test-warn] The component to be tested is missing.

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

github-actions[bot] avatar Mar 27 '25 06:03 github-actions[bot]