feat(input,autocomplete): [input,autocomplete] update input&autocompl… #1950
Conversation
…ete x-design style
WalkthroughThe recent updates enhance the styling and functionality of autocomplete and input components across the project. Key changes include the removal of outdated styles, the introduction of new customization options for rendering, and improvements to loading indicators. These modifications aim to modernize the user interface, providing a more consistent and visually appealing experience. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Autocomplete
participant Input
User->>Input: Focus on input field
Input->>Autocomplete: Show suggestions
User->>Autocomplete: Select suggestion
Autocomplete->>Input: Populate input with selected value
Input->>User: Display updated value
Note over Input: If loading, show loading indicator
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 (13)
- examples/sites/demos/pc/app/autocomplete/popper-class-composition-api.vue (1 hunks)
- examples/sites/demos/pc/app/autocomplete/popper-class.vue (1 hunks)
- packages/design/aurora/src/input/index.ts (1 hunks)
- packages/design/saas/src/input/index.ts (1 hunks)
- packages/renderless/src/input/vue.ts (4 hunks)
- packages/theme/src/autocomplete/index.less (3 hunks)
- packages/theme/src/autocomplete/smb-theme.js (1 hunks)
- packages/theme/src/autocomplete/vars.less (2 hunks)
- packages/theme/src/input/index.less (6 hunks)
- packages/theme/src/input/smb-theme.js (1 hunks)
- packages/theme/src/input/vars.less (4 hunks)
- packages/theme/src/theme/smb-theme/index.js (2 hunks)
- packages/vue/src/autocomplete/src/pc.vue (2 hunks)
Files skipped from review due to trivial changes (2)
- examples/sites/demos/pc/app/autocomplete/popper-class.vue
- packages/theme/src/autocomplete/smb-theme.js
Additional comments not posted (23)
packages/design/aurora/src/input/index.ts (1)
2-4: Verify usage and documentation ofoptions.The addition of the
optionsobject withisCloseIconHideenhances configuration flexibility. Ensure that this new property is documented and used appropriately in the component logic.packages/design/saas/src/input/index.ts (1)
2-4: Verify usage and documentation ofoptions.The addition of the
optionsobject withisCloseIconHideenhances configuration flexibility. Ensure that this new property is documented and used appropriately in the component logic.packages/theme/src/input/smb-theme.js (1)
Line range hint
1-18: Verify impact of removing'ti-input-disabled-bg-color'.The removal of
'ti-input-disabled-bg-color'may affect the appearance of disabled input elements. Ensure this change aligns with design guidelines and does not negatively impact the UI.examples/sites/demos/pc/app/autocomplete/popper-class-composition-api.vue (1)
78-81: Verify visual impact of CSS changes.The CSS modifications for the
.addrclass aim to improve readability. Ensure these changes align with the overall design and enhance the visual presentation.packages/theme/src/autocomplete/vars.less (1)
Line range hint
20-41: Verify usage and documentation of new CSS variables.The introduction of new CSS variables enhances layout flexibility. Ensure these variables are used consistently and documented properly.
packages/theme/src/autocomplete/index.less (3)
48-48: Use of CSS Variables for Padding.The use of CSS variables for padding enhances flexibility and maintainability. This approach allows for easier theming and customization.
83-86: Simplification of Loading State Styles.The loading state styles have been simplified with the introduction of an SVG element and a rotating animation. This change improves the visual feedback during loading and reduces CSS complexity.
97-97: Refinement of Margin for Dropdown Elements.The margin for dropdown elements has been adjusted to use a CSS variable, which provides better control over layout and consistency across different themes.
packages/theme/src/input/vars.less (4)
37-37: Standardization of Suffix Icon Color.The suffix icon color is now standardized using
var(--ti-common-color-icon-normal), which enhances consistency across different UI components.
59-59: Consistent Close Icon Text Color.The close icon's text color is now consistent with the standardized icon color, improving visual coherence.
71-71: Removal of Pixel Unit in Vertical Padding.The pixel unit has been removed from the vertical padding, which may affect rendering. Ensure that this change does not introduce layout issues in different environments.
83-83: Adjustment of Suffix Icon Right Margin.The right margin for the suffix icon has been adjusted to
var(--ti-common-space-3x, 8px), potentially altering the spacing around the icon. Verify that this change aligns with the intended design.packages/vue/src/autocomplete/src/pc.vue (2)
108-114: Updated Import for Loading Icon.The import statement has been updated to use
IconLoadingShadow. Verify that this change is consistent across all relevant components and does not break functionality.Verification successful
Consistent Import of
IconLoadingShadowAcross ComponentsThe import of
IconLoadingShadowis consistent across multiple components and files. The change inpc.vuedoes not appear to break functionality. Here are the relevant locations:
packages/vue/src/autocomplete/src/pc.vuepackages/vue-icon/index.tspackages/vue-icon-saas/index.ts- Definition in
packages/vue-icon/src/loading-shadow/index.tsScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify consistency of the `IconLoadingShadow` import across components. # Test: Check for consistent usage of `IconLoadingShadow` in imports. rg --type ts --type vue --word-regexp --fixed-strings 'IconLoadingShadow'Length of output: 101
Script:
#!/bin/bash # Description: Verify consistency of the `IconLoadingShadow` import across components. # Test: Check for consistent usage of `IconLoadingShadow` in .ts and .vue files. rg --glob '*.ts' --glob '*.vue' --word-regexp --fixed-strings 'IconLoadingShadow'Length of output: 901
73-77: Enhanced Loading Indicator with New Icon.The loading indicator now uses
IconLoadingShadow, providing a more visually appealing loading state. Ensure that this new icon is correctly integrated and functions as expected.Verification successful
Integration of
IconLoadingShadowVerifiedThe
IconLoadingShadowcomponent is imported and used within the codebase, indicating its integration. Ensure that the component functions correctly within the application.
- Import Statement:
import { IconLoadingShadow } from '@opentiny/vue-icon'This confirms that the new loading icon is correctly integrated into the project.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the integration and functionality of the new loading icon `IconLoadingShadow`. # Test: Check the usage and references of `IconLoadingShadow`. rg --type vue --word-regexp --fixed-strings 'IconLoadingShadow'Length of output: 91
Script:
#!/bin/bash # Description: Verify the integration and functionality of the new loading icon `IconLoadingShadow`. # Find all .vue files and search for `IconLoadingShadow` within them. fd --extension vue --exec rg --word-regexp --fixed-strings 'IconLoadingShadow' {}Length of output: 181
packages/theme/src/input/index.less (4)
104-108: Improved Hover State for Input.The hover state for input components now changes the border color, enhancing user interaction feedback. This change aligns with modern UI design practices.
114-117: Clear Icon Hover Effect.The clear icon now changes fill color on hover, providing a clearer visual cue for users. This improvement enhances usability.
187-187: Consistent Icon Fill Color.The fill color for icons is now consistent, improving visual coherence across components.
222-225: Adjustment of Prefix Positioning.The left positioning of the prefix has been adjusted from 8px to 12px, which may affect layout. Verify that this change aligns with the intended design specifications.
packages/renderless/src/input/vue.ts (3)
108-109: Introduction ofdesignConfigParameter.The
designConfigparameter enhances configurability, allowing for design-specific behavior. Ensure that this parameter is utilized consistently across the component.
Line range hint
386-395: Enhanced Renderless Function withdesignConfig.The
renderlessfunction now includesdesignConfig, allowing for more adaptable rendering logic. Ensure that this change is consistently applied and does not introduce regressions.Verification successful
Consistent Integration of
designConfigin Renderless FunctionsThe
designConfigparameter is consistently applied across multiplerenderlessfunctions in the codebase, confirming the change is well-integrated and does not introduce regressions.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the consistent application of `designConfig` in the renderless function. # Test: Check for usage and integration of `designConfig` in renderless functions. rg --type ts --word-regexp --fixed-strings 'renderless'Length of output: 47419
Script:
#!/bin/bash # Description: Check for the usage of `designConfig` in renderless functions across the codebase. # Test: Search for `designConfig` in renderless function definitions. rg --type ts 'renderless' -A 5 | rg 'designConfig'Length of output: 3578
135-135: Conditional Logic withdesignConfig.The conditional logic now incorporates
designConfig?.options?.isCloseIconHide, enhancing responsiveness to design configurations. Verify that this logic is correctly implemented and tested.packages/theme/src/theme/smb-theme/index.js (2)
53-53: New color properties added for improved visual feedback.The addition of new color properties for error, warning, and prompt states enhances the theme's visual feedback mechanisms.
Ensure these properties are consistently applied across the application to maintain a cohesive design.
304-304: Dropdown gap increased from4pxto8px.The increase in
ti-common-dropdown-gapmay affect the layout and spacing of dropdown elements.Verify that this change improves the layout without causing any negative impact on the user interface.
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
packages/theme-saas/src/svgs/loading-shadow.svgis excluded by!**/*.svg
Files selected for processing (4)
- packages/theme/src/autocomplete/index.less (3 hunks)
- packages/theme/src/autocomplete/smb-theme.js (1 hunks)
- packages/theme/src/autocomplete/vars.less (2 hunks)
- packages/theme/src/textarea/index.less (7 hunks)
Files skipped from review due to trivial changes (1)
- packages/theme/src/autocomplete/index.less
Files skipped from review as they are similar to previous changes (2)
- packages/theme/src/autocomplete/smb-theme.js
- packages/theme/src/autocomplete/vars.less
Additional comments not posted (5)
packages/theme/src/textarea/index.less (5)
41-41: LGTM! Enhanced visual feedback for disabled state.The additional spacing in the
.is-disabledclass for hover effects enhances accessibility by providing better visual feedback.
54-54: LGTM! Improved focus indication.The reinforcement of the border color change on focus enhances accessibility by providing a clearer indication of focus.
101-101: LGTM! Consistent focus state styling.The focus state styling aligns with best practices for accessibility, ensuring that users can easily identify focused elements.
126-126: LGTM! Enhanced scrollbar usability.Increasing the scrollbar width from 12px to 16px improves usability by making it more prominent and easier to interact with.
130-132: LGTM! Improved scrollbar thumb aesthetics.Modifying the border-radius from 5px to 8px provides a smoother and more aesthetically pleasing appearance for the scrollbar thumb.
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/input/smb-theme.js (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- packages/theme/src/input/smb-theme.js
…ete x-design style
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
Improvements
Bug Fixes
Style