fix: element plus validate failed style #5130
Conversation
|
|
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/styles/src/ele/index.cssOops! Something went wrong! :( ESLint: 9.16.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/node_modules/@vben/eslint-config/dist/index.mjs' imported from /eslint.config.mjs WalkthroughThe changes in this pull request introduce a new CSS class Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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 (
|
![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
🧹 Outside diff range and nitpick comments (3)
packages/styles/src/ele/index.css (3)
7-9: LGTM! Consider adding a color variable comment.The implementation correctly applies the validation error style to Element Plus select components using box-shadow.
Consider adding a comment about the color variable:
.el-select .el-select__wrapper { + /* Uses Element Plus's danger color for validation errors */ box-shadow: 0 0 0 1px var(--el-color-danger) inset; }
12-14: Consider combining similar input and select styles.The input styles are identical to the select styles. Consider combining them for better maintainability.
-/** select 选择器的样式 */ -.el-select .el-select__wrapper { - box-shadow: 0 0 0 1px var(--el-color-danger) inset; -} - -/** input 选择器的样式 */ -.el-input .el-input__wrapper { - box-shadow: 0 0 0 1px var(--el-color-danger) inset; -} +/** select和input 选择器的样式 */ +.el-select .el-select__wrapper, +.el-input .el-input__wrapper { + box-shadow: 0 0 0 1px var(--el-color-danger) inset; +}
5-36: Well-structured implementation of form validation error styles.The approach of using a single
.form-valid-errorclass to handle all form validation styles is clean and maintainable. It properly integrates with Element Plus's design system by:
- Using Element Plus's color variables
- Following Element Plus's component structure
- Maintaining consistent styling across different form components
Consider documenting the usage of this class in the component documentation to help other developers understand when and how to apply these validation styles.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/styles/src/ele/index.css(1 hunks)
🔇 Additional comments (2)
packages/styles/src/ele/index.css (2)
17-20: LGTM! Correct implementation of radio/checkbox error styles.
The styles correctly apply validation error borders to radio and checkbox components, maintaining consistency with Element Plus's design system.
22-35: LGTM! Comprehensive handling of button group borders.
The implementation correctly handles border styles for both radio and checkbox button groups, ensuring proper visual separation and error indication.
Let's verify we haven't missed any Element Plus form components that might need error styles:
✅ Verification successful
Element Plus form components error styles are comprehensively covered
Based on the search results, the error styles in packages/styles/src/ele/index.css cover all the basic form input components that require validation states:
- Select inputs (
.el-select) - Text inputs (
.el-input) - Radio buttons and groups (
.el-radio,.el-radio-button) - Checkboxes and groups (
.el-checkbox,.el-checkbox-button)
The implementation consistently uses --el-color-danger for error states across all components, and properly handles special cases like button group borders. Other form components like sliders, date pickers, etc., were not found in the codebase, suggesting they're either not used or styled through a different mechanism.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for Element Plus form-related components in the codebase
# that might need validation error styles
# Look for El* form components in template files
rg -t vue "el-(form|input|select|radio|checkbox|switch|slider|time|date|rate|color|transfer)" -l
# Look for form validation related code
rg "form.*valid|valid.*form" -t vue -l
Length of output: 195
Script:
#!/bin/bash
# Search for Element Plus form-related components in the codebase
# Let's try without file type filtering since vue type isn't recognized
# Look for El* form components
rg "el-(form|input|select|radio|checkbox|switch|slider|time|date|rate|color|transfer)"
# Look for form validation related code
rg "form.*valid|valid.*form"
# Also check CSS files for related Element Plus form styles
rg "\.el-(form|input|select|radio|checkbox|switch|slider|time|date|rate|color|transfer)" --type css
Length of output: 8445
Description
修复ElementPlus表单缺少校验失败的样式
fix #5128
Type of change
Please delete options that are not relevant.
pnpm-lock.yamlunless you introduce a new test example.Checklist
pnpm run docs:devcommand.pnpm test.feat:,fix:,perf:,docs:, orchore:.Summary by CodeRabbit