fix(icon): [steps] The size of the steps icon is modified to adapt to the new specifications. #2344
Conversation
WalkthroughThe changes involve updates to three files across different packages. In Changes
Suggested labels
Suggested reviewers
Poem
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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
- examples/sites/demos/pc/app/icon/iconGroups.js (1 hunks)
- packages/theme/src/steps/index.less (2 hunks)
- packages/vue/src/upload-list/src/pc.vue (1 hunks)
🧰 Additional context used
🔇 Additional comments (3)
examples/sites/demos/pc/app/icon/iconGroups.js (1)
289-291: LGTM: New icons added to IT categoryThe addition of 'IconLeftFrozen' and 'IconRightFrozen' to the IT category seems appropriate.
However, please verify the following:
The AI summary mentioned that these icons were removed from the
Toolcategory, but this is not visible in the provided code. Can you confirm if this removal was done?The PR objectives mention adjusting the size of the steps icon. Could you clarify how these icon additions relate to that goal?
To verify the removal from the
Toolcategory, you can run the following script:If the script returns no results, it confirms that these icons are not present in the Tool category.
packages/theme/src/steps/index.less (2)
327-328: Use of CSS variable for icon dimensions enhances consistencyThe width and height of the
.iconare now set usingvar(--tv-Steps-node-circle-size), which improves consistency with the rest of the theme and allows for easier customization.
777-777: Updated block size mixin to use CSS variable for icon sizeThe
.block-size-mixinis now called with the third parameter asvar(--tv-Steps-node-circle-size)instead of the hardcoded14px, ensuring consistency and easier maintenance.
| @@ -227,6 +227,7 @@ | |||
| > | |||
| <tiny-progress | |||
| v-if="file.status === 'uploading' || file.status === 'downloading'" | |||
| status="success" | |||
There was a problem hiding this comment.
Set the progress bar status dynamically based on file status
Currently, the status attribute of the <tiny-progress> component is hardcoded to "success" even when the file is still uploading or downloading. To provide accurate visual feedback, consider setting the status dynamically based on file.status.
Here's the suggested modification:
<tiny-progress
v-if="file.status === 'uploading' || file.status === 'downloading'"
- status="success"
+ :status="file.status === 'uploading' ? 'active' : 'success'"
:type="listType === 'picture-card' ? state.progressType : 'line'"
:stroke-width="listType === 'picture-card' ? state.progressStrokeWidth : 2"
:width="state.progressWidth"
:percentage="parsePercentage(file.percentage)"
:show-text="!state.progressWidth"
>
</tiny-progress>This change ensures that the progress bar accurately reflects the file's upload status by displaying an active status during uploading or downloading and a success status upon completion.
Committable suggestion was skipped due to low confidence.
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
IconLeftFrozenandIconRightFrozen, to theITcategory.statusprop to thetiny-progresscomponent for improved visual feedback during file uploads.Bug Fixes
Style
Documentation