fix(milestone): [milestone] Fix review issues #2381
Conversation
WalkthroughThe pull request introduces changes to the visual representation of milestone statuses across several Vue component files and a LESS stylesheet. The Changes
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
🔇 Additional comments (5)
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
🧹 Outside diff range and nitpick comments (2)
examples/sites/demos/pc/app/milestone/basic-usage.vue (1)
Line range hint
1-108: Update documentation to reflect the color changes.The component demonstrates three different scenarios but lacks documentation about:
- The meaning behind each status color
- When to use each display mode (default vs custom vs solid)
- Accessibility considerations
Consider adding JSDoc comments above the component and detailed descriptions in the demo:
+/** + * Milestone Component Demo + * + * Demonstrates three usage scenarios: + * 1. Default styling + * 2. Custom status colors - Uses themed colors to represent different states + * 3. Custom status colors with solid display - Enhanced visual prominence + * + * Status Colors: + * - completed: Blue (#1890ff) - Completed items + * - doing: Light Blue (#7eb7fc) - In-progress items + * - back: Orange (#ff8800) - Returned/reversed items + * - end: Yellow (#faad14) - End state + * - cancel: Light Red (#fce2e0) - Cancelled items + */ export default {examples/sites/demos/pc/app/milestone/basic-usage.spec.ts (1)
43-43: Consider documenting status color meanings.The new colors for cancel (rgb(252, 226, 224)) and back (rgb(255, 136, 0)) statuses have been updated, but their semantic meanings should be documented for maintainability.
Consider adding a comment explaining the color scheme:
// Status colors: // - Completed: rgb(24, 144, 255) - Blue indicates successful completion // - Doing: rgb(126, 183, 252) - Light blue shows active status // - Cancel: rgb(252, 226, 224) - Soft red indicates cancellation // - Back: rgb(255, 136, 0) - Orange shows reversed/returned statusAlso applies to: 48-48
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
- examples/sites/demos/pc/app/milestone/basic-usage-composition-api.vue (1 hunks)
- examples/sites/demos/pc/app/milestone/basic-usage.spec.ts (2 hunks)
- examples/sites/demos/pc/app/milestone/basic-usage.vue (1 hunks)
- packages/theme/src/milestone/index.less (0 hunks)
💤 Files with no reviewable changes (1)
- packages/theme/src/milestone/index.less
🔇 Additional comments (5)
examples/sites/demos/pc/app/milestone/basic-usage-composition-api.vue (1)
28-28: Verify the significant color scheme changes with design team.The status colors have been significantly modified:
doing: Changed from green (#9ec591) to blue (#7eb7fc)back: Changed from purple (#97a7db) to orange (#ff8800)cancel: Changed from gray (#d9d9d9) to light red (#fce2e0)These changes could impact the user experience and accessibility. Please ensure these changes align with the design system guidelines.
Also applies to: 30-30, 34-34
examples/sites/demos/pc/app/milestone/basic-usage.vue (1)
33-33: Verify color contrast ratios for accessibility.The new status colors need to be verified for accessibility compliance, especially for text readability:
- doing: #7eb7fc (blue)
- back: #ff8800 (orange)
- cancel: #fce2e0 (light red)
Consider extracting these colors into design tokens or theme variables for better maintainability and consistency across the application.
Add comments explaining the color choices and any accessibility considerations:
statusMap: { completed: '#1890ff', - doing: '#7eb7fc', + // Light blue - Used for in-progress items (ensure contrast ratio ≥ 4.5:1) + doing: '#7eb7fc', - back: '#ff8800', + // Orange - Used for returned/reversed items (ensure contrast ratio ≥ 4.5:1) + back: '#ff8800', end: '#faad14', - cancel: '#fce2e0' + // Light red - Used for cancelled items (ensure contrast ratio ≥ 4.5:1) + cancel: '#fce2e0' }Also applies to: 35-35, 39-39
examples/sites/demos/pc/app/milestone/basic-usage.spec.ts (3)
37-39: LGTM! Color scheme update is consistent.The new background color for the "doing" status (rgb(126, 183, 252)) maintains good contrast with the white text (rgb(255, 255, 255)).
59-59: LGTM! Flag line colors are consistently mapped.The flag line colors correctly correspond to their associated status colors, maintaining visual consistency throughout the component.
28-28: Verify color contrast for completed status icons.The new blue color (rgb(24, 144, 255)) should be tested against the white background to ensure it meets WCAG color contrast guidelines for accessibility.
Also applies to: 33-33
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