refactor(dropdown): [dropdown] refactoring styles and variable for dropdown #2195
Conversation
WalkthroughThe changes in this pull request primarily involve updates to the text content and styling of dropdown and select components across various Vue files. Key modifications include the renaming of CSS variables, removal of specific style blocks, and enhancements to the structure of option handling in select components. These adjustments aim to streamline the UI and improve consistency across components without altering their core functionality. Changes
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
💤 Files not reviewed due to no reviewable 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 (
|
|
[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 |
| @@ -168,7 +168,7 @@ export default defineComponent({ | |||
| round={round} | |||
| disabled={disabled} | |||
| type={type} | |||
| class={`tiny-dropdown__border ${state.visible ? 'is-expand' : ''}${showIcon ? ' is-show-icon ' : ''}`} | |||
| class={`tiny-dropdown__border ${state.visible ? 'is-expand' : ''}${showIcon ? ' is-show-icon ' : ''} ${triggerClass}`} | |||
| reset-time={0}> | |||
There was a problem hiding this comment.
这里的改动一开始导致图标没对齐，定位后发现应该是原有组件样式问题，然后在demo里设置间距对齐居中。
修改后不需要demo的间距，组件图标是对齐居中的。
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (11)
examples/sites/demos/pc/app/dropdown/inherit-width-composition-api.vue (2)
5-5: LGTM! Consider adding a comment for clarity.The change to a longer dropdown title effectively demonstrates variable-length support. This aligns well with the PR's focus on dropdown variables.
Consider adding a comment above this line to explain the purpose of the longer title, e.g.:
<!-- Demonstrating support for longer dropdown titles -->This would enhance code readability and make the intent clearer for other developers.
19-19: LGTM! Consider adding a comment for consistency.The change to a longer dropdown title in the
inherit-widthscenario is consistent with the previous modification and effectively demonstrates the feature.For consistency with the previous suggestion, consider adding a similar comment here:
<!-- Demonstrating longer dropdown titles with inherit-width -->This would maintain a consistent documentation style throughout the component.
examples/sites/demos/pc/app/select/collapse-tags-composition-api.vue (2)
21-21: Approve the simplifiedtiny-selectusage with a suggestion.The change to use the
:optionsprop instead oftiny-optionchild components is a good improvement. It simplifies the template and can potentially improve performance for large option lists.Consider adding a comment explaining the purpose of the
max-visible-rowsprop, as it's not immediately clear how it interacts with the "click-expand" behavior. For example:<tiny-select v-model="value3" :max-visible-rows="2" <!-- Limit initial display to 2 rows, expand on click --> :options="options" multiple click-expand> </tiny-select>
41-41: Approve the update tovalue3with a suggestion for improvement.The update to
value3to include all available options is consistent with demonstrating the "click-expand" behavior with a fully populated select.Consider adding a comment explaining why all options are selected by default, as this might not be a common use case. Alternatively, you could select a subset of options to demonstrate both selected and unselected states. For example:
// Select a subset of options to demonstrate both selected and unselected states const value3 = ref(['选项1', '选项2', '选项3', '选项4'])examples/sites/demos/pc/app/select/collapse-tags.vue (2)
21-21: Improvedtiny-selectusage with direct options prop.The change to use
:optionsprop instead oftiny-optionchild components simplifies the code and improves maintainability. The addition of:max-visible-rows="2"is consistent with the "click-expand" functionality.Consider extracting the
optionsprop to a computed property for better readability and easier testing:- <tiny-select v-model="value3" :max-visible-rows="2" :options="options" multiple click-expand> </tiny-select> + <tiny-select v-model="value3" :max-visible-rows="2" :options="selectOptions" multiple click-expand> </tiny-select> // In the <script> section export default { // ... + computed: { + selectOptions() { + return this.options + } + } // ... }
40-42: New options added to enhance selection variety.The addition of '广州' (Guangzhou) and '武汉' (Wuhan) as new options increases the variety of choices available to the user, following the same structure as existing options.
Consider using a translation system for labels to support internationalization:
options: [ - { value: '选项1', label: '北京' }, - { value: '选项2', label: '上海' }, + { value: 'option1', label: this.$t('cities.beijing') }, + { value: 'option2', label: this.$t('cities.shanghai') }, // ... (apply similar changes to other options) ],This approach would make it easier to support multiple languages in the future.
examples/sites/demos/pc/app/dropdown/size.vue (2)
Line range hint
1-46: Consider refactoring and internationalizing the template.The template effectively demonstrates different dropdown sizes. However, there are a few potential improvements:
- The dropdown menu content is repeated for each size. Consider extracting this into a reusable template or component to reduce duplication.
- The Chinese text used for labels and menu items might need internationalization for a global audience. Consider using a translation system or at least adding English translations as comments.
Example of refactoring the dropdown menu:
<template #dropdown> <tiny-dropdown-menu> <dropdown-menu-items /> </tiny-dropdown-menu> </template> <!-- In a separate component or in the same file --> <template> <tiny-dropdown-item v-for="item in menuItems" :key="item">{{ item }}</tiny-dropdown-item> </template> <script> export default { data() { return { menuItems: ['黄金糕', '狮子头', '螺蛳粉', '双皮奶', '蚵仔煎'] } } } </script>
Line range hint
58-82: Review the impact of style changes on dropdown appearance.The addition of the
.demo-dropdownclass withmargin-bottom: 8pximproves the spacing between elements. However, there are a few points to consider:
The AI summary mentions the removal of specific padding styles for
.tiny-dropdown__triggerand.tiny-dropdown__caret-button, but these are not visible in the provided code. Please verify if these styles were indeed removed and assess the impact on the dropdown button appearance.The existing
.tiny-dropdownclass still has a margin (margin: 0 10px 10px 0). Consider if this interacts well with the new.demo-dropdownclass or if adjustments are needed.To ensure consistent spacing, you might want to use CSS variables for margins and paddings. This would make it easier to maintain consistent spacing throughout the component.
Example of using CSS variables:
:root { --dropdown-margin: 8px; } .demo-dropdown { margin-bottom: var(--dropdown-margin); } .tiny-dropdown { margin: 0 var(--dropdown-margin) var(--dropdown-margin) 0; }packages/vue/src/dropdown/src/pc.vue (1)
171-171: LGTM! Consider minor improvement for consistency.The addition of
triggerClassto the button's class attribute is a good improvement. It adds specific styling classes for the dropdown trigger, enhancing the component's flexibility and aligning with the TODO comment about class name standardization.For consistency, consider using template literals for the entire class string. This would improve readability and make future modifications easier. Here's a suggested change:
- class={`tiny-dropdown__border ${state.visible ? 'is-expand' : ''}${showIcon ? ' is-show-icon ' : ''} ${triggerClass}`} + class={`tiny-dropdown__border ${state.visible ? 'is-expand' : ''} ${showIcon ? 'is-show-icon' : ''} ${triggerClass}`}This change removes the extra space before
is-show-iconwhenshowIconis true and adds a space after it when it's false, ensuring consistent spacing between classes.packages/theme/src/base/vars.less (1)
Line range hint
1-479: Summary of changes and potential impactThe changes in this file contribute to refining and standardizing the design system:
- Renaming of warning-related variables from "warning" to "warn" improves conciseness while maintaining clarity.
- Addition of a new
--tv-color-icon-controlvariable standardizes icon colors for buttons and text-button icons.These changes should improve consistency and maintainability of the design system. However, it's crucial to ensure that these changes are reflected throughout the codebase to prevent any styling inconsistencies or errors.
Consider creating a migration guide or update script to help developers easily identify and update any components or styles that may be affected by these changes, particularly the renaming of warning-related variables.
packages/theme/src/dropdown/vars.less (1)
2-39: Consider adding English translations to comments for broader accessibility.The comments are currently written in Chinese. If the project's guidelines encourage English or bilingual comments, adding English translations would make the codebase more accessible to international collaborators and maintain consistency.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (15)
- examples/sites/demos/pc/app/dropdown/inherit-width-composition-api.vue (2 hunks)
- examples/sites/demos/pc/app/dropdown/inherit-width.vue (2 hunks)
- examples/sites/demos/pc/app/dropdown/size-composition-api.vue (0 hunks)
- examples/sites/demos/pc/app/dropdown/size.vue (1 hunks)
- examples/sites/demos/pc/app/dropdown/split-button-composition-api.vue (0 hunks)
- examples/sites/demos/pc/app/dropdown/split-button.vue (0 hunks)
- examples/sites/demos/pc/app/select/collapse-tags-composition-api.vue (2 hunks)
- examples/sites/demos/pc/app/select/collapse-tags.vue (2 hunks)
- packages/theme/src/base/reset.less (1 hunks)
- packages/theme/src/base/vars.less (2 hunks)
- packages/theme/src/dropdown/index.less (2 hunks)
- packages/theme/src/dropdown/vars.less (1 hunks)
- packages/theme/src/tabs/index.less (1 hunks)
- packages/theme/src/tabs/vars.less (1 hunks)
- packages/vue/src/dropdown/src/pc.vue (1 hunks)
💤 Files not reviewed due to no reviewable changes (3)
- examples/sites/demos/pc/app/dropdown/size-composition-api.vue
- examples/sites/demos/pc/app/dropdown/split-button-composition-api.vue
- examples/sites/demos/pc/app/dropdown/split-button.vue
✅ Files skipped from review due to trivial changes (2)
- packages/theme/src/tabs/index.less
- packages/theme/src/tabs/vars.less
🔇 Additional comments (29)
examples/sites/demos/pc/app/select/collapse-tags-composition-api.vue (2)
34-36: Approve the addition of new options.The new options for Guangzhou and Wuhan are consistent with the existing pattern of Chinese cities. The
valueproperties follow the established naming convention.
Line range hint
21-41: Summary of changes and overall approval.The changes in this file improve the
tiny-selectcomponent usage by:
- Simplifying the template with the
:optionsprop.- Adding new options for Guangzhou and Wuhan.
- Updating the initial value to include all options.
These changes enhance the component's flexibility and demonstrate its capabilities more comprehensively. The code is well-structured and consistent with Vue best practices.
examples/sites/demos/pc/app/dropdown/inherit-width.vue (3)
5-5: Verify visual appearance with longer textThe dropdown button text has been updated to a longer string. While this change doesn't affect functionality, it may impact the layout or appearance of the button.
Please ensure that:
- The button layout accommodates the longer text without truncation or overflow.
- The overall design remains visually appealing with the new text length.
- The change is consistent with any design specifications or guidelines for the project.
19-19: Verify inherit-width behavior with longer textThe dropdown button text has been updated to a longer string, matching the change in the default scenario. Given that this dropdown has the
inherit-widthprop set to true, it's important to verify the behavior with the new text length.Please ensure that:
- The
inherit-widthfunctionality works as expected with the longer text.- The dropdown menu width correctly inherits the width of the longer button text.
- There are no unintended side effects or layout issues caused by the interaction between the longer text and the
inherit-widthproperty.
Line range hint
1-54: Review overall impact and consistencyThe changes to the dropdown button text are consistent across both scenarios, which is good for maintaining a uniform demo. However, there are a couple of points to consider:
The AI summary mentioned the removal of a style block that adjusted padding for dropdown trigger buttons. This change is not visible in the provided code snippet. If this removal did occur, please verify that it doesn't negatively impact the appearance of the dropdown buttons.
The longer text in both scenarios might affect the overall layout of the demo. Ensure that the changes don't cause any alignment issues or overflow problems in the parent container.
To confirm these points:
- Check if there were any style changes in other parts of the file or in related CSS files that might affect the dropdown button appearance.
- Test the component in various viewport sizes to ensure the longer text doesn't cause layout issues.
examples/sites/demos/pc/app/dropdown/size.vue (2)
Line range hint
48-56: Script section looks good.The script section correctly imports and registers the necessary components from '@opentiny/vue'. It's minimal and appropriate for this demonstration of dropdown sizes.
Line range hint
1-82: Summary of review for size.vueOverall, the changes to this file improve the spacing of the dropdown demonstration. Here's a summary of the review:
- Template: Consider refactoring repeated dropdown menu content and internationalizing the text.
- Script: The component setup is correct and minimal.
- Style: The new
.demo-dropdownclass improves spacing, but verify the impact of removed styles mentioned in the AI summary. Consider using CSS variables for consistent spacing.Please address these points to enhance the maintainability and user experience of the dropdown size demonstration.
packages/theme/src/base/reset.less (1)
45-45: LGTM! Consider verifying the CSS variable and its specificity.The addition of the
font-familyproperty using a CSS variable is a good practice for maintaining consistency and enabling easy theming. However, please consider the following points:
- Verify that the
--tv-font-familyvariable is defined in the appropriate place in your CSS/LESS files.- Consider the specificity of this rule. It may override more specific font-family declarations for child elements. Ensure this is the intended behavior.
- You might want to move this property higher in the selector block for better organization, typically right after the
box-sizingproperties.To ensure the
--tv-font-familyvariable is defined, run the following script:This will help verify that the variable is properly defined and accessible where needed.
✅ Verification successful
Verification Successful:
--tv-font-familyis Properly DefinedThe
--tv-font-familyvariable is defined inpackages/theme/src/base/vars.lessand correctly utilized inreset.less.
- No further action is required regarding the CSS variable definition.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for the definition of --tv-font-family in all CSS and LESS files rg --type css --type less ':root|html|\*' -A 5 -B 5 | rg --color never '(--tv-font-family)'Length of output: 447
packages/theme/src/base/vars.less (3)
205-221: LGTM! Consistent renaming of warning variables.The renaming of warning-related variables from "warning" to "warn" is consistent with the earlier changes and maintains the overall structure and meaning of the variables. The preservation of comments for each variable is commendable as it aids in maintainability.
293-294: LGTM! New icon control color variable added.The addition of the
--tv-color-icon-controlvariable is a good step towards standardizing icon colors for buttons and text-button icons. Using the brand color ensures consistency with the overall design system. The accompanying comment provides clear guidance on its usage, which is excellent for maintainability.#!/bin/bash # Description: Check for the implementation of the new icon control color variable # Test: Search for usage of the new variable. Expect: Some results in component files. rg --type css '--tv-color-icon-control'
197-199: LGTM! Verify usage of renamed variables.The renaming of warning color variables from "warning" to "warn" is consistent and improves conciseness while maintaining clarity. However, ensure that all references to these variables throughout the codebase are updated accordingly.
packages/theme/src/dropdown/vars.less (6)
3-5: Font size and line-height variables are updated appropriately.The variables
--tv-Dropdown-font-sizeand--tv-Dropdown-line-heighthave been updated to use the new theming variables with suitable default values. This aligns with the overall theming strategy.
7-11: Text color variables enhance styling consistency.The introduction of text color variables for default, link, and disabled states (
--tv-Dropdown-text-color,--tv-Dropdown-text-color-link,--tv-Dropdown-text-color-disabled) improves the component's styling flexibility and maintains consistency across different states.
14-16: Icon size variables provide greater customization.By defining separate variables for icon sizes in text-plus-icon buttons and icon-only buttons (
--tv-Dropdown-icon-size,--tv-Dropdown-icon-size-only-svg), the component now offers enhanced customization options.
20-29: Comprehensive icon color variables for various states.The addition of icon color variables for default, hover, link, and disabled states (
--tv-Dropdown-icon-color,--tv-Dropdown-icon-color-hover,--tv-Dropdown-icon-color-link,--tv-Dropdown-icon-color-disabled) ensures consistent theming and better user experience across different interaction states.
32-34: Hover styles for icon-only buttons are well-defined.Defining hover background color and border radius for icon-only buttons (
--tv-Dropdown-bg-color-only-svg-hover,--tv-Dropdown-border-radius-only-svg-hover) enhances visual feedback and aligns with design standards.
37-39: Padding variables improve layout control in button groups.Introducing padding variables for caret buttons and title buttons within button groups (
--tv-Dropdown-caret-button-padding-left,--tv-Dropdown-title-button-padding) allows for finer control over spacing and alignment.packages/theme/src/dropdown/index.less (12)
25-27: Correct usage of custom properties for text stylingApplying custom properties (
var(--tv-Dropdown-*)) forcolor,font-size, andline-heightenhances consistency and maintainability across the component.
33-39: Consistent application of custom properties for icon stylingThe use of custom properties for
margin-left,fill, andfont-sizewithin.tiny-dropdown__suffix-innerensures that icon styling aligns with the design system.
43-45: Icon color correctly set for button variantSetting the icon
fillcolor tovar(--tv-Dropdown-icon-color-white)within&.@{css-prefix}buttonensures proper icon visibility on button backgrounds.
49-51: Icon color appropriately defined for default button variantUsing
var(--tv-Dropdown-icon-color)for the iconfillwithin&.@{css-prefix}button--defaultmaintains consistency with the default button styling.
59-61: Icon size correctly adjusted for icon-only buttonsSetting the font size of
.tiny-svgtovar(--tv-Dropdown-icon-size-only-svg)ensures that icons in icon-only buttons have the appropriate size.
63-66: Hover states enhanced for icon-only buttonsApplying
background-colorandborder-radiuson hover improves the user experience by providing visual feedback when users interact with icon-only buttons.
74-77: Title button styling refined in button groupAdjusting the
paddingand removing theborder-rightfor.@{dropdown-prefix-cls}__title-buttonenhances the layout and ensures a seamless appearance within the button group.
79-84: Caret button styles optimized for alignmentThe updates to
padding-left,position,border-left, andmin-widthfor.@{dropdown-prefix-cls}__caret-buttonimprove alignment and interaction within the button group.
106-108: Cursor style updated on hover for better UXChanging the cursor to
pointeron hover provides a clear indication to users that the dropdown is interactive.
111-115: Icon color change on hover enhances interactivityUpdating the icon
fillcolor tovar(--tv-Dropdown-icon-color-hover)on hover for default buttons enriches the visual feedback during user interaction.
122-129: Disabled state styles applied appropriatelyApplying
cursor: not-allowed, updating text color, and changing iconfillwithin.is-disabledclass accurately reflect the disabled state, enhancing accessibility.
133-133: Effective use ofscaleY(-1)to flip the dropdown iconUsing
transform: scaleY(-1);efficiently flips the dropdown icon without affecting its position, avoiding issues associated withrotate(180deg)due to SVG margin influences.
| ], | ||
| value1: ['选项1', '选项2'], | ||
| value2: ['选项1', '选项2', '选项3', '选项4'], | ||
| value3: ['选项1', '选项2', '选项3', '选项4', '选项5'] | ||
| value3: ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'] |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider refining the default selection in value3.
While the update to value3 is consistent with the new options added, having all options selected by default might not provide the best user experience.
Consider selecting a subset of options by default or leaving it empty:
- value3: ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7']
+ value3: ['选项1', '选项2', '选项3'] // Or: value3: []This change would allow users to see the selection process in action and might better demonstrate the "click-expand" functionality.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| value3: ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'] | |
| value3: ['选项1', '选项2', '选项3'] // Or: value3: [] |
| margin-right: var(--ti-dropdown-trigger-title-margin-right); | ||
| /* 纯图标按钮 */ | ||
| &__trigger:not(.tiny-button) { | ||
| &:not(:has(.@{dropdown-prefix-cls}__title)) > .@{dropdown-prefix-cls}__suffix-inner { |
There was a problem hiding this comment.
Potential browser compatibility issue with :has() pseudo-class
The selector &:not(:has(.@{dropdown-prefix-cls}__title)) utilizes the :has() pseudo-class, which is not fully supported across all browsers, particularly Firefox. This may lead to inconsistent behavior in unsupported browsers. Consider refactoring the selector to enhance cross-browser compatibility.
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
tiny-selectcomponent to include "广州" (Guangzhou) and "武汉" (Wuhan).Bug Fixes
Style