fix(input):Fix the saas theme #3499
Conversation
WalkthroughThis update makes a series of style adjustments across button, grid, and input components. Changes include modifications to padding, margin, width, alignment, color, and text sizing classes. All updates are strictly related to CSS and class names, with no changes to logic, event handling, or exported entities. Changes
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/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. 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:
SupportNeed 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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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 (1)
packages/vue/src/input/src/mobile-first.vue (1)
332-332: Simplify mixed line-height utilities.Having
leading-normalwhenenteredTextareaandleading-5.5otherwise can introduce visual inconsistency. Consider standardizing onleading-5.5for both states.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
packages/theme-saas/src/button/index.less(1 hunks)packages/theme-saas/src/grid/checkbox.less(1 hunks)packages/theme-saas/src/grid/header.less(1 hunks)packages/theme-saas/src/grid/table-global.less(2 hunks)packages/theme-saas/src/grid/table.less(3 hunks)packages/theme-saas/src/grid/toolbar.less(1 hunks)packages/vue/src/input/src/mobile-first.vue(4 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (13)
packages/theme-saas/src/button/index.less (1)
30-30: Approve horizontal padding adjustment
Reducing the button’s X-axis padding frompx-3topx-2aligns with the refined spacing strategy across components.packages/theme-saas/src/grid/checkbox.less (1)
50-50: Approve checkbox icon fill-color update
Switching the default SVG fill tofill-color-text-secondaryensures consistency with secondary text and improves visual contrast.packages/theme-saas/src/grid/table-global.less (2)
480-480: Approve increased column padding
Increasing non-ellipsis column padding frompx-2topx-4enhances readability and maintains alignment with related grid adjustments.
514-516: Approve flex centering for checkbox cell
Addingflex,items-center, andjustify-centerprovides uniform horizontal and vertical alignment for checkbox icons.packages/theme-saas/src/grid/table.less (3)
577-577: Approve increased cell padding
Updating non-ellipsis cell padding topx-4matches the global table styling and improves spacing consistency.
603-605: Approve checkbox centering in table cells
Usingflexlayout with centered alignment standardizes the checkbox positioning across different table states.
702-702: Approve sort-wrapper position adjustment
Shifting the sort wrapper’s right offset to16pxclears space between header text and icons, enhancing click targets.packages/theme-saas/src/grid/header.less (1)
102-102: Approve header partition width increase
Increasing the width of.thead-partitionand.resizablefromw-4tow-8improves grab area for resizing and aligns with table padding updates.packages/theme-saas/src/grid/toolbar.less (1)
80-80: Consistent horizontal spacing update.Increasing the horizontal margin from
mx-1tomx-2aligns with the PR’s broader spacing refinements and enhances toolbar layout consistency.packages/vue/src/input/src/mobile-first.vue (4)
240-240: Background and typography updates for suffix word-limit.The inner
<span>now includesbg-color-bg-1,leading-none, andinline-blockto ensure a consistent background and font size for suffix word-limit indicators.
293-293: Fixed line-height for collapsed text display.Switching from
leading-normaltoleading-5withline-clamp-1improves consistency but confirm truncation behavior remains robust across browsers.
295-295: Consistent line-height for autosize display-only textarea.Using
leading-5in the autosize branch unifies the appearance; verify multi-line metrics still align with expected height calculations.
356-356: Verify updated vertical offset for textarea word-limit.The indicator now sits at
bottom-0withleading-5. Ensure it doesn’t overlap with content or scrollbar in all viewport sizes.
PR
修复saas风格样式
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