fix(tree): [tree] elevate the priority #3119 #3284
Conversation
WalkthroughThe changes refine the styling and class structure for editable input fields within tree nodes. The CSS selector for input styling is narrowed to only affect inputs inside a new wrapper class. Correspondingly, the Vue component now wraps the editable input with this specific class when a node is in edit mode. No logic or exported/public API was altered. Changes
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/tree/src/tree-node.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. Tip ⚡💬 Agentic Chat (Pro Plan, General Availability)
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (2)
🪧 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 (
|
WalkthroughThis PR modifies the CSS selectors for input and numeric components by increasing the specificity of the medium, small, and mini size classes. This is achieved by changing single ampersand selectors to double ampersand selectors, which elevates their priority in the CSS cascade. Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
packages/theme/src/input/index.less
Outdated
| @@ -249,19 +249,19 @@ | |||
| padding-left: 8px; | |||
| } | |||
|
|
|||
| &-medium { | |||
| &&-medium { | |||
There was a problem hiding this comment.
The change from &-medium to &&-medium increases the specificity of the CSS selector, which can affect how styles are applied if there are conflicting styles. Ensure that this change does not unintentionally override other styles.
| @@ -273,7 +273,7 @@ | |||
| } | |||
| } | |||
|
|
|||
| &--medium { | |||
| &&--medium { | |||
There was a problem hiding this comment.
The change from &--medium to &&--medium increases the specificity of the CSS selector, which can affect how styles are applied if there are conflicting styles. Ensure that this change does not unintentionally override other styles.
![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 (6)
packages/theme/src/input/index.less (3)
252-254: Increase Specificity for Medium Input SizeThe selector change from a single ampersand to double (
&&-medium) increases specificity for the medium input size. This should help resolve style override issues as intended in #3119. Please ensure that the increased specificity does not unintentionally override any global customizations.
256-263: Increase Specificity for Small Input SizeThe replacement of
&-smallwith&&-smallsimilarly elevates the specificity for small-sized inputs. Verify that this change remains consistent with any external or higher-level selectors to prevent undesired style conflicts.
264-270: Increase Specificity for Mini Input SizeUsing
&&-miniinstead of&-miniboosts the selector priority for mini size styling. Confirm that the cascade remains predictable and that no unintended side effects appear in components that rely on these styles.packages/theme/src/numeric/index.less (3)
276-297: Elevate Specificity for Medium Numeric InputChanging the size variant selector to
&&--mediumeffectively increases its specificity. This should help overcome conflicts in nested CSS or lower-priority overrides. Please double-check that all related numeric components render as expected with the new selector.
299-320: Elevate Specificity for Small Numeric InputThe update from a single ampersand to double (
&&--small) elevates the specificity of the small numeric input styling rules. Ensure that these rules harmonize with the overall theme and do not introduce any style breaking changes in different layout scenarios.
322-344: Elevate Specificity for Mini Numeric InputThe selector for the mini numeric input is now using
&&--mini, which increases its specificity. This change aligns with the pattern used across input components. Review the rendered output to confirm that there is no unintended interference with padding or font-size adjustments.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/theme/src/input/index.less(1 hunks)packages/theme/src/numeric/index.less(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
James-9696
changed the title
James-9696
changed the title
James-9696
changed the title
PR
修改issue单#3119，样式权重优先级，导致在tree组件嵌套使用numeric\input组件的size属性不生效
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: #3119
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit