fix(theme): [tree,tooltip,transfer, cascader] update unsolved smb components #2124
Conversation
WalkthroughThe pull request introduces several modifications across various components, primarily focusing on icon assignments, styling adjustments, and variable updates. Key changes include swapping icon assignments in tree-related components, adjustments to padding and margins in the Cascader component's styling, and a refactor of tooltip and transfer panel styles. Additionally, the tooltip's visual properties have been enhanced, and the Cascader component has updated icon imports to align with new naming conventions. Changes
Possibly related PRs
Poem
Tip OpenAI O1 model for chat
Recent review detailsConfiguration used: CodeRabbit UI Files selected for processing (3)
Files skipped from review as they are similar to previous changes (1)
Additional comments not posted (4)
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 (
|
|
[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 |
shenjunjian
changed the title
shenjunjian
changed the title
![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 (1)
packages/theme/src/tooltip/index.less (1)
Partial implementation of class name change detected
The change from
.tooltip-lightto.tooltip-typehas been partially implemented across the codebase. While the mixin name has been updated in both theme-mobile and theme-saas packages, there's still an instance of.tooltip-lightusage in packages/theme-saas/src/tooltip/index.less. Consider the following actions:
- Update the
.is-lightclass in packages/theme-saas/src/tooltip/index.less to use the new.tooltip-typemixin.- Double-check if any other files in the codebase might still be using the old
.tooltip-lightmixin.- Ensure consistency across all theme packages in the usage of the new
.tooltip-typemixin.Analysis chain
Line range hint
139-143: Verify the class name change in the codebase.The renaming of the class for light tooltips from
.tooltip-lightto.tooltip-typelooks good. However, ensure that all references to the old class name have been updated in the codebase.Run the following script to verify the usage of the old class name:
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify all references to the old class name `.tooltip-light` have been updated. # Test: Search for the old class name usage. Expect: No occurrences of the old class name. rg --type less $'\.tooltip-light'Length of output: 383
Script:
#!/bin/bash # Description: Check the context of .tooltip-light usage and search for .tooltip-type in the affected files # Check the context of .tooltip-light usage echo "Checking .tooltip-light usage:" rg --type less -C 5 '\.tooltip-light' packages/theme-saas/src/tooltip/index.less packages/theme-saas/src/mixins/tooltip.less packages/theme-mobile/src/mixins/tooltip.less echo "\nSearching for .tooltip-type:" rg --type less '\.tooltip-type' packages/theme-saas/src/tooltip/index.less packages/theme-saas/src/mixins/tooltip.less packages/theme-mobile/src/mixins/tooltip.lessLength of output: 3713
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (13)
- examples/sites/demos/pc/app/tree/icons-composition-api.vue (1 hunks)
- examples/sites/demos/pc/app/tree/icons.vue (1 hunks)
- packages/theme/src/cascader-menu/vars.less (1 hunks)
- packages/theme/src/cascader/index.less (1 hunks)
- packages/theme/src/cascader/vars.less (1 hunks)
- packages/theme/src/mixins/tooltip.less (1 hunks)
- packages/theme/src/tooltip/index.less (2 hunks)
- packages/theme/src/tooltip/vars.less (4 hunks)
- packages/theme/src/transfer/index.less (1 hunks)
- packages/theme/src/transfer/vars.less (2 hunks)
- packages/theme/src/tree/index.less (1 hunks)
- packages/theme/src/tree/vars.less (1 hunks)
- packages/vue/src/cascader/src/pc.vue (2 hunks)
Files skipped from review due to trivial changes (1)
- packages/theme/src/transfer/vars.less
Additional comments not posted (22)
packages/theme/src/mixins/tooltip.less (1)
17-18: Simplified tooltip arrow styling looks good, but verify visual consistency.The change to introduce a generalized styling for the
.popper__arrowclass using the@bgcolorvariable is a good simplification. It reduces code duplication and makes the styling more maintainable.However, please verify that this change does not introduce any visual inconsistencies or regressions in the tooltip appearance across different placements (top, bottom, left, right). Ensure that the tooltips still look visually consistent and aligned with the design specifications after this modification.
packages/theme/src/cascader-menu/vars.less (1)
21-21: LGTM!The changes to the vertical padding and removal of outer margins for the dropdown menu list are consistent with the provided list of alterations. The increased vertical spacing and simplified styling rules should improve the visual appearance and maintainability of the component.
examples/sites/demos/pc/app/tree/icons-composition-api.vue (1)
26-27: Verify if the icon swap is intentional.The assignments of
shrinkIconandexpandIconhave been swapped.shrinkIconnow usesiconExpand()andexpandIconusesiconPutAway().Please confirm if this change is intentional and aligns with the desired behavior of the tree component. If so, the change looks good to me.
examples/sites/demos/pc/app/tree/icons.vue (1)
31-32: LGTM!The change in the icon assignments for
shrinkIconandexpandIconis intentional and aligns with the intended functionality or visual representation of the icons.packages/theme/src/tooltip/vars.less (6)
14-15: LGTM!The increased tooltip arrow width from
8pxto12pxwill make the arrow more prominent, enhancing the visual appearance of the tooltip.
16-17: LGTM!The new CSS custom property
--ti-tooltip-popper-border-heightwith a value of20pxcomplements the arrow width property and provides control over the height of the tooltip arrow.
18-19: LGTM!The adjustment of the tooltip arrow border radius from
8pxto2pxwill make the arrow less rounded, providing a sharper appearance.
48-48: LGTM!The change of the info tooltip background color value from
#1476FFto#1476ffis a stylistic change from uppercase to lowercase. It maintains the same color while following a consistent casing convention.
52-52: LGTM!The change of the info tooltip border color value from
#1476FFto#1476ffis a stylistic change from uppercase to lowercase, maintaining consistency with the background color change.
88-88: LGTM!The modification of the tooltip box shadow from
0px 2px 12px 0px rgba(0,0,0,0.08)to0px 5px 9px 0px rgba(51, 56, 84, 0.25)creates a more pronounced shadow effect, enhancing the visual prominence of the tooltip.packages/theme/src/tooltip/index.less (3)
46-54: Refactor looks good!The refactor of the
.popper__arrowstyling simplifies the code by replacing the CSS border-based triangular arrow with adivelement. This improves the maintainability and readability of the code.
61-61: LGTM!The adjustment to the arrow positioning for the top placement ensures proper alignment.
69-69: LGTM!The adjustment to the arrow positioning for the bottom placement ensures proper alignment.
packages/theme/src/cascader/vars.less (1)
65-65: LGTM!The change to
--ti-cascader-dropdown-box-shadowupdates the box shadow style for the Cascader dropdown to a more specific shadow (--ti-common-shadow-3-left), potentially enhancing or altering the depth and positioning of the shadow effect. This change is consistent with the AI-generated summary and appears to be a valid update.packages/theme/src/tree/vars.less (1)
72-72: Verify if using a text color for the background is intentional.The change updates the background color of highlighted tree nodes from
--ti-common-color-lightto--ti-base-text-color-2. However,--ti-base-text-color-2seems to be a text color variable based on its name.Using a text color for the background might impact the contrast ratio and readability of the text inside the highlighted node. Please verify if this change is intentional and ensure that it meets the accessibility guidelines.
packages/theme/src/cascader/index.less (1)
107-107: LGTM!The change to remove the border from the dropdown element is acceptable. It may impact the visual presentation slightly but does not introduce any issues.
packages/vue/src/cascader/src/pc.vue (2)
202-202: LGTM!The icon import changes align with the list of alterations and are consistent with the icon usage in the template.
262-263: LGTM!The component registration changes align with the list of alterations and are consistent with the import changes.
packages/theme/src/tree/index.less (1)
96-96: LGTM!The change to use
--ti-tree-node-highlight-bg-colorfor the background color of the current tree node's content, when not showing a checkbox, looks good. It should help provide a clearer visual distinction and improve the user experience.packages/theme/src/transfer/index.less (3)
280-282: LGTM!The changes enhance the styling of the input element within the transfer panel component by setting a new bottom border color and adjusting the padding. The use of
!importantflag ensures the border color takes precedence over other styles.
284-286: LGTM!The changes define the positioning for the prefix class within the input element by setting it to the left. This enhances the layout of the input field.
288-289: LGTM!The changes define the positioning for the suffix class within the input element by setting it to the right with a
4pxoffset. This enhances the layout of the input field.
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
New Features
Bug Fixes
Style
Documentation