[WEB-5236] chore: attachment icon revamp #8009
Conversation
|
Linked to Plane Work Item(s) This comment was auto-generated by Plane |
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAdds five new file-attachment SVG icon components (audio, code, document, image, video) and an IconWrapper SVG container; introduces an attachments index exporting the icons and re-exports attachments from the icons index. Changes
Sequence DiagramsequenceDiagram
autonumber
participant Consumer
participant AttachmentIcon
participant IconWrapper
participant SVG as "SVG DOM"
Consumer->>AttachmentIcon: Render (props: color?, clipPathId?, ...rest)
AttachmentIcon->>IconWrapper: Provide props + <path/> children
IconWrapper->>IconWrapper: Apply defaults (width,height,viewBox,className)
alt clipPathId provided
IconWrapper->>SVG: Render <defs><clipPath id=.../></defs> and <g clip-path="url(#...)">children</g>
else no clipPathId
IconWrapper->>SVG: Render children directly
end
SVG-->>Consumer: Painted icon with applied color
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Potential focus areas:
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
…hment-icon-revamp
There was a problem hiding this comment.
Pull Request Overview
This PR introduces new attachment icons for different file types, consolidating icon implementation through a reusable wrapper component.
Key Changes
- Created a new
IconWrappercomponent to standardize SVG icon rendering with consistent props and optional clipping path support - Added five new attachment file icons: audio, code, document, image, and video
- Exported the new attachments module from the main icons index
Reviewed Changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/propel/src/icons/index.ts | Exports the new attachments module |
| packages/propel/src/icons/icon-wrapper.tsx | New wrapper component providing consistent SVG structure for icons |
| packages/propel/src/icons/attachments/index.ts | Barrel export for all attachment icon components |
| packages/propel/src/icons/attachments/audio-file-icon.tsx | Audio file icon component |
| packages/propel/src/icons/attachments/code-file-icon.tsx | Code file icon component |
| packages/propel/src/icons/attachments/document-file-icon.tsx | Document file icon component |
| packages/propel/src/icons/attachments/image-file-icon.tsx | Image file icon component |
| packages/propel/src/icons/attachments/video-file-icon.tsx | Video file icon component |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
33-34: Consider making clipPath dimensions dynamic.The clipPath rectangle is hardcoded to 16×16, which works for the default viewBox but could cause clipping issues if consumers pass custom
width,height, orviewBoxprops.If the 16×16 constraint is intentional for your design system, consider documenting it. Otherwise, you could make it dynamic:
<clipPath id={clipPathId}> - <rect width="16" height="16" fill="white" /> + <rect width={width} height={height} fill="white" /> </clipPath>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
packages/propel/src/icons/attachments/audio-file-icon.tsx(1 hunks)packages/propel/src/icons/attachments/code-file-icon.tsx(1 hunks)packages/propel/src/icons/attachments/document-file-icon.tsx(1 hunks)packages/propel/src/icons/attachments/image-file-icon.tsx(1 hunks)packages/propel/src/icons/attachments/index.ts(1 hunks)packages/propel/src/icons/attachments/video-file-icon.tsx(1 hunks)packages/propel/src/icons/icon-wrapper.tsx(1 hunks)packages/propel/src/icons/index.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (5)
packages/propel/src/icons/attachments/video-file-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/attachments/code-file-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/attachments/document-file-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/attachments/audio-file-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/attachments/image-file-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Build and lint web apps
🔇 Additional comments (8)
packages/propel/src/icons/icon-wrapper.tsx (1)
11-42: LGTM! Clean SVG wrapper implementation.The IconWrapper provides a flexible foundation for all attachment icons with sensible defaults and optional clipPath support.
packages/propel/src/icons/attachments/audio-file-icon.tsx (1)
6-13: LGTM! Consistent icon implementation.The component follows a clean pattern: accepts optional color prop, forwards props to IconWrapper, and renders the SVG path. The implementation is straightforward and maintainable.
packages/propel/src/icons/attachments/code-file-icon.tsx (1)
6-13: LGTM! Consistent icon implementation.Follows the same clean pattern as the other attachment icons.
packages/propel/src/icons/attachments/document-file-icon.tsx (1)
6-13: LGTM! Consistent icon implementation.Follows the established pattern for attachment icons.
packages/propel/src/icons/attachments/image-file-icon.tsx (1)
6-13: LGTM! Consistent icon implementation.Follows the established pattern for attachment icons.
packages/propel/src/icons/attachments/video-file-icon.tsx (1)
6-13: LGTM! Consistent icon implementation.Follows the established pattern for attachment icons. The consistent structure across all five attachment icons makes the codebase maintainable and predictable.
packages/propel/src/icons/attachments/index.ts (1)
1-5: LGTM! Clean barrel export.Consolidates all attachment icons for easy importing. The export structure is clean and follows common patterns.
packages/propel/src/icons/index.ts (1)
8-8: LGTM! Public API extended correctly.The attachments module is now properly exported and alphabetically positioned in the index.
Description
This PR includes attachment icon revamp.
Type of Change
Summary by CodeRabbit