fix(theme): [tree,tooltip,transfer,cascader,input] update smb design for tree/tooltip/transfer/cascader components #1970
Conversation
WalkthroughThe changes involve multiple modifications across various files, focusing on CSS style enhancements, updates to exported components, and the introduction of new configuration settings. Key updates include the addition of font size properties, adjustments to padding and margin, the introduction of new components, and the inclusion of directives aimed at improving the visual presentation and usability of several components. Changes
Sequence Diagram(s)sequenceDiagram
participant A as User
participant B as UI Component
participant C as Input Field
participant D as Icon
A->>B: Interacts with the component
B->>C: Triggers input event
C->>D: Updates icon visibility based on input state
D-->>C: Displays search icon if applicable
C-->>B: Updates input value
B-->>A: Reflects changes in the UI
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 as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (26)
- examples/sites/demos/pc/app/tooltip/content-composition-api.vue (1 hunks)
- examples/sites/demos/pc/app/tooltip/content.vue (1 hunks)
- packages/design/smb/index.ts (2 hunks)
- packages/design/smb/src/transfer-panel/index.ts (1 hunks)
- packages/renderless/src/transfer-panel/vue.ts (3 hunks)
- packages/theme/src/cascader-node/smb-theme.js (2 hunks)
- packages/theme/src/cascader/smb-theme.js (1 hunks)
- packages/theme/src/input/index.less (2 hunks)
- packages/theme/src/input/smb-theme.js (1 hunks)
- packages/theme/src/input/vars.less (1 hunks)
- packages/theme/src/select/aurora-theme.js (1 hunks)
- packages/theme/src/select/index.less (2 hunks)
- packages/theme/src/select/smb-theme.js (1 hunks)
- packages/theme/src/select/vars.less (1 hunks)
- packages/theme/src/theme.config.js (2 hunks)
- packages/theme/src/tooltip/smb-theme.js (1 hunks)
- packages/theme/src/transfer/index.less (5 hunks)
- packages/theme/src/transfer/smb-theme.js (2 hunks)
- packages/theme/src/transfer/vars.less (3 hunks)
- packages/theme/src/tree/index.less (1 hunks)
- packages/theme/src/tree/smb-theme.js (1 hunks)
- packages/theme/src/tree/vars.less (1 hunks)
- packages/vue/src/cascader-node/src/pc.vue (2 hunks)
- packages/vue/src/cascader/package.json (1 hunks)
- packages/vue/src/cascader/src/pc.vue (3 hunks)
- packages/vue/src/transfer-panel/src/pc.vue (3 hunks)
Files skipped from review due to trivial changes (12)
- examples/sites/demos/pc/app/tooltip/content-composition-api.vue
- examples/sites/demos/pc/app/tooltip/content.vue
- packages/design/smb/src/transfer-panel/index.ts
- packages/theme/src/cascader/smb-theme.js
- packages/theme/src/input/vars.less
- packages/theme/src/select/aurora-theme.js
- packages/theme/src/select/index.less
- packages/theme/src/select/smb-theme.js
- packages/theme/src/select/vars.less
- packages/theme/src/tooltip/smb-theme.js
- packages/theme/src/tree/index.less
- packages/theme/src/tree/vars.less
Additional comments not posted (29)
packages/theme/src/tree/smb-theme.js (1)
8-11: LGTM! Enhancements to tree node padding properties.The addition of
ti-tree-node-padding-left,ti-tree-padding-top, andti-tree-padding-bottomproperties enhances the customization capabilities of the theme.packages/design/smb/index.ts (1)
Line range hint
17-40: LGTM! Addition ofTransferPanelcomponent.The inclusion of
TransferPanelin the exports enhances the module's functionality and maintains consistency in the export structure.packages/vue/src/cascader/package.json (1)
3-32: LGTM! Improvements to package metadata and dependencies.The addition of
type,license, anddevDependenciesfields, along with the reordering of dependencies, enhances the package's clarity and usability.packages/theme/src/cascader-node/smb-theme.js (2)
4-4: Update aligns with design standards for disabled states.The background color for disabled nodes has been updated to use a more appropriate color variable for disabled states. This enhances the visual feedback for users.
14-14: Icon font size adjustment may impact visual hierarchy.The font size for node icons has been reduced. Ensure this change aligns with the overall design specifications and does not negatively impact readability or accessibility.
packages/theme/src/transfer/smb-theme.js (2)
5-5: Border color update enhances visual feedback.The border color has been changed to reflect a normal state, improving the component's visual feedback.
18-22: New padding properties improve layout control.The addition of padding properties for the header and body sections allows for more precise layout adjustments, enhancing the overall design and user experience.
packages/theme/src/input/smb-theme.js (1)
22-25: New suffix positioning properties enhance styling flexibility.The addition of properties for suffix positioning allows for better control over vertical alignment across different input sizes, improving the component's adaptability to various design needs.
packages/theme/src/theme.config.js (2)
26-26: Addition of Cascader theming option.The new entry
'cascader-border': 'cascader-dropdown'enhances the theming options for the Cascader component, allowing for more granular customization of its dropdown appearance.
26-26: Removal of color-related theming options.The removal of
'color-select-panel': 'color-select-panel'and'color-picker': 'color-picker'suggests a potential refactoring or deprecation of these components. Ensure that these components are no longer in use or have been replaced with alternatives.Run the following script to verify the usage of the removed theming options:
packages/vue/src/cascader-node/src/pc.vue (1)
Line range hint
18-30: Update loading icon representation.The change from
iconLoadingtoiconLoadingShadowsuggests an update in the visual feedback for loading states. Ensure that the new icon aligns with the design specifications and provides the desired user experience.Run the following script to verify the usage of the new icon:
Verification successful
Consistent usage of
iconLoadingShadowconfirmed.The
iconLoadingShadowis consistently used across multiple files, including the component under review and example files. This suggests that the change aligns with the design specifications and provides the desired visual feedback for loading states.
packages/vue/src/cascader-node/src/pc.vueexamples/sites/demos/pc/app/loading/spinner.vueexamples/sites/demos/pc/app/loading/spinner-composition-api.vueScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of the new loading icon. # Test: Search for the usage of 'iconLoadingShadow' to ensure consistency. rg --type vue 'iconLoadingShadow'Length of output: 61
Script:
#!/bin/bash # Description: Verify the usage of the new loading icon. # Test: Search for the usage of 'iconLoadingShadow' across all files. rg 'iconLoadingShadow'Length of output: 709
packages/renderless/src/transfer-panel/vue.ts (2)
Line range hint
49-74: Enhance state initialization with design configuration.The
initStatefunction now includesdesignConfig, allowing for more flexible state management. This change introducesinputBoxTypeandshowInputSearch, improving the component's customization capabilities.Tools
Biome
[error] 69-69: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 71-71: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
136-144: Enhance renderless function with design configuration.The
renderlessfunction now acceptsdesignConfig, ensuring that design specifications are passed down toinitState. This enhancement supports more dynamic and responsive UI behavior.packages/vue/src/transfer-panel/src/pc.vue (3)
35-37: Enhancement: Addedclearableproperty and@clearevent.The addition of the
clearableproperty and@clearevent handler improves user interaction by allowing users to clear the input field easily. Ensure that theclearQuerymethod is correctly implemented to handle this event.
42-43: Conditional Rendering: Search Icon.The search icon is now conditionally rendered based on
state.showInputSearch. This provides a more contextual user interface by displaying the search icon only when necessary.
132-132: Import Update: AddediconSearch.The
iconSearchimport is now included, which supports the new search icon feature in the input component. Ensure that the icon is correctly used and styled.packages/vue/src/cascader/src/pc.vue (4)
168-168: Directive Usage:v-highlight-query.The
v-highlight-querydirective is used to highlight text based on user input. This improves the user interface by making it easier to identify matching text. Ensure that the directive is correctly implemented and tested.
172-172: Template Update: Span Element for Item Text.The item text is now wrapped in a span element, which may improve styling and layout control. Ensure that this change does not affect existing styles or functionality.
193-193: Import Update: AddedHighlightQuery.The
HighlightQuerydirective is imported to enhance text highlighting functionality. Ensure that it is correctly integrated and utilized within the component.
249-249: Directive Declaration: AddedHighlightQuery.The
HighlightQuerydirective is added to the directives object, allowing its use within the component. Verify that it is correctly registered and functional.packages/theme/src/input/index.less (4)
172-172: CSS Enhancement: Dynamic Suffix Positioning.The
topproperty for suffix elements is now set using thevar(--ti-input-suffix-top)variable, allowing for dynamic styling. This enhances flexibility and maintainability. Ensure that the variable is defined and used correctly across different input sizes.
276-278: CSS Enhancement: Medium Input Suffix Positioning.The
topproperty for medium input suffix elements is now set usingvar(--ti-input-suffix-top-medium). This allows for specific styling adjustments for medium-sized inputs.
283-285: CSS Enhancement: Small Input Suffix Positioning.The
topproperty for small input suffix elements is now set usingvar(--ti-input-suffix-top-small). This allows for specific styling adjustments for small-sized inputs.
290-292: CSS Enhancement: Mini Input Suffix Positioning.The
topproperty for mini input suffix elements is now set usingvar(--ti-input-suffix-top-mini). This allows for specific styling adjustments for mini-sized inputs.packages/theme/src/transfer/vars.less (2)
96-97: Addition of--ti-transfer-panel-body-padding-leftis appropriate.This new variable provides better control over the panel body padding, enhancing layout flexibility.
97-97: Modification of--ti-transfer-panel-body-filter-heightlooks good.The inclusion of additional padding can improve layout consistency. Verify that this change aligns with the design specifications.
packages/theme/src/transfer/index.less (3)
96-98: Addition of non-disabled button style is appropriate.This rule ensures consistent background color for enabled buttons, enhancing visual consistency.
149-149: Addition of padding-left for panel body is appropriate.This change enhances layout consistency within the panel body.
258-261: Change from padding-left to margin-left for filter component is justified.The rationale for this change is sound, as it prevents interference with input slot positioning and maintains visual separation.
|
[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 |
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (5)
- packages/theme/src/input/index.less (2 hunks)
- packages/theme/src/input/smb-theme.js (1 hunks)
- packages/theme/src/input/vars.less (1 hunks)
- packages/theme/src/select/index.less (2 hunks)
- packages/theme/src/select/vars.less (1 hunks)
Files skipped from review due to trivial changes (2)
- packages/theme/src/input/vars.less
- packages/theme/src/select/index.less
Files skipped from review as they are similar to previous changes (3)
- packages/theme/src/input/index.less
- packages/theme/src/input/smb-theme.js
- packages/theme/src/select/vars.less
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- packages/theme/src/tree/index.less (2 hunks)
Files skipped from review as they are similar to previous changes (1)
- packages/theme/src/tree/index.less
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- packages/theme/src/theme.config.js (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- packages/theme/src/theme.config.js
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
整改4个组件的检视问题
1、tree
2、tooltip
3、transfer
4、cascader
整改input的suffix 节点的top值
Summary by CodeRabbit
New Features
TransferPanelcomponent added for improved functionality.Bug Fixes
Style
Documentation
Chores