Closed cheton closed 2 months ago
Open the branch in Web Editor • VS Code • Insiders
Open Preview
Latest commit: b5e9e966a5fc77a81fc329e566a964618e1646aa
The changes in this PR will be included in the next version bump.
Not sure what this means? Click here to learn what changesets are.
Click here if you're a maintainer who wants to add another changeset to this PR
โฑ๏ธ Estimated effort to review: 3 ๐ต๐ต๐ตโชโช |
๐งช No relevant tests |
๐ No security concerns identified |
โก Key issues to review Code Refactoring Significant changes to icon exports, including new icons, renamed icons, and deprecated icons. Ensure all icon imports in the project are updated accordingly. UI Enhancement Added deprecation warnings for icons in the UI. Verify that the warnings are displayed correctly and the suggested replacements are accurate. Deprecation Handling New pattern for handling deprecated icons. Ensure this pattern is consistently applied to all deprecated icons and that the warning messages are correct. |
Category | Suggestion | Score |
Enhancement |
Add version information to the deprecation warning message___ **Consider adding a version number or date to the deprecation warning to provide userswith a timeline for the removal of the deprecated component.** [packages/react-icons/src/icons/deprecated/FilePptOIcon.js [7-9]](https://github.com/trendmicro-frontend/tonic-ui/pull/918/files#diff-f233310f0f7c8c2c555ed873d27b88abe43850a6a74024576a4b9ad14a22def9R7-R9) ```diff useOnce(() => { - console.error('Warning: The `FilePptOIcon` component is deprecated and will be removed in the next major release. Use the `FilePPTOIcon` component instead.'); + console.error('Warning: The `FilePptOIcon` component is deprecated as of v1.x.x and will be removed in v2.0.0. Use the `FilePPTOIcon` component instead.'); }); ``` - [ ] **Apply this suggestion** Suggestion importance[1-10]: 8Why: Including version information in the deprecation warning provides users with a clear timeline for when the deprecated component will be removed, which is valuable for planning and managing updates. | 8 |
Group deprecated icon exports for better code organization___ **Consider grouping the deprecated icons exports together at the end of the file,separated by a comment, to improve code organization and maintainability.** [packages/react-icons/src/icons/index.js [470-492]](https://github.com/trendmicro-frontend/tonic-ui/pull/918/files#diff-9dcb0181203b71176ded463775263786f479c084ac921acec90c7a86362a7dc1R470-R492) ```diff export { default as ZoomOutIcon } from './ZoomOutIcon'; // DEPRECATED ICONS -export { default as AiSecurityIcon } from './deprecated/AiSecurityIcon'; -export { default as ApiIcon } from './deprecated/ApiIcon'; -export { default as ApiManagementIcon } from './deprecated/ApiManagementIcon'; -export { default as ConnectNoipIcon } from './deprecated/ConnectNoipIcon'; -export { default as FilePdfOIcon } from './deprecated/FilePdfOIcon'; -export { default as FilePptOIcon } from './deprecated/FilePptOIcon'; -export { default as IamIcon } from './deprecated/IamIcon'; -export { default as IeIcon } from './deprecated/IeIcon'; -export { default as IocIcon } from './deprecated/IocIcon'; -export { default as IpIcon } from './deprecated/IpIcon'; -export { default as ListOlIcon } from './deprecated/ListOlIcon'; -export { default as ListUlIcon } from './deprecated/ListUlIcon'; -export { default as NasIcon } from './deprecated/NasIcon'; -export { default as RcaIcon } from './deprecated/RcaIcon'; -export { default as ResizeNeswIcon } from './deprecated/ResizeNeswIcon'; -export { default as ResizeNwseIcon } from './deprecated/ResizeNwseIcon'; -export { default as SecurityAiIcon } from './deprecated/SecurityAiIcon'; -export { default as TvIcon } from './deprecated/TvIcon'; -export { default as UrlIcon } from './deprecated/UrlIcon'; -export { default as UsbIcon } from './deprecated/UsbIcon'; -export { default as WmiIcon } from './deprecated/WmiIcon'; +export { + AiSecurityIcon, + ApiIcon, + ApiManagementIcon, + ConnectNoipIcon, + FilePdfOIcon, + FilePptOIcon, + IamIcon, + IeIcon, + IocIcon, + IpIcon, + ListOlIcon, + ListUlIcon, + NasIcon, + RcaIcon, + ResizeNeswIcon, + ResizeNwseIcon, + SecurityAiIcon, + TvIcon, + UrlIcon, + UsbIcon, + WmiIcon, +} from './deprecated'; ``` - [ ] **Apply this suggestion** Suggestion importance[1-10]: 7Why: The suggestion to group deprecated icon exports improves code organization and maintainability by clearly separating active and deprecated exports. This change is not critical but enhances readability and future maintenance. | 7 | |
Extract repeated text into a constant for better maintainability___ **Consider using a constant for the deprecation warning message to avoid repetitionand improve maintainability.** [packages/react-docs/pages/icons/search-icons.js [63]](https://github.com/trendmicro-frontend/tonic-ui/pull/918/files#diff-980b5ae00d3cf503eec4ddb4e989a4d7c193ac0d894aca18d4304c3def372309R63-R63) ```diff - Suggestion importance[1-10]: 7Why: This suggestion improves maintainability by reducing repetition of the deprecation message, making it easier to update in the future if needed. | 7 | |
Improve the deprecation warning message with more specific information___ **Consider using a more specific error message that includes the exact replacementcomponent name to guide users more effectively.** [packages/react-icons/src/icons/deprecated/FilePptOIcon.js [7-9]](https://github.com/trendmicro-frontend/tonic-ui/pull/918/files#diff-f233310f0f7c8c2c555ed873d27b88abe43850a6a74024576a4b9ad14a22def9R7-R9) ```diff useOnce(() => { - console.error('Warning: The `FilePptOIcon` component is deprecated and will be removed in the next major release. Use the `FilePPTOIcon` component instead.'); + console.error('Warning: The `FilePptOIcon` component is deprecated and will be removed in the next major release. Please use the `FilePPTOIcon` component from "@tonic-ui/react-icons" instead.'); }); ``` - [ ] **Apply this suggestion** Suggestion importance[1-10]: 7Why: Improving the deprecation warning message with more specific information can significantly aid users in transitioning to the new component, enhancing usability and reducing potential confusion. | 7 | |
โ Simplify conditional rendering using a ternary operator___Suggestion Impact:The commit simplified the conditional rendering of the icon name using a ternary operator, similar to the suggestion. code diff: ```diff - {IconComponent._isDeprecated + {isDeprecated ?ModalHeader.** [packages/react-docs/pages/icons/search-icons.js [47-50]](https://github.com/trendmicro-frontend/tonic-ui/pull/918/files#diff-980b5ae00d3cf503eec4ddb4e989a4d7c193ac0d894aca18d4304c3def372309R47-R50) ```diff Suggestion importance[1-10]: 6Why: The suggestion simplifies the code by using a ternary operator, which enhances readability and reduces redundancy in the JSX structure. | 6 | |
โ Use template literals for cleaner string interpolation___Suggestion Impact:The commit implemented template literals for rendering the icon name and deprecation status, improving readability. code diff: ```diff +(deprecated) - (deprecated)> : name} ``` rendering the icon name and deprecation status.** [packages/react-docs/pages/icons/search-icons.js [156-161]](https://github.com/trendmicro-frontend/tonic-ui/pull/918/files#diff-980b5ae00d3cf503eec4ddb4e989a4d7c193ac0d894aca18d4304c3def372309R156-R161) ```diff -{IconComponent._isDeprecated - ? (deprecated) - Suggestion importance[1-10]: 5Why: Using template literals improves readability and consistency in string interpolation, but the improvement is minor as the existing code is already clear. | 5 | |
Rename the icon component to better describe its visual representation and purpose___ **Consider using a more descriptive name for the icon component, such as'AISecurityShieldIcon', to better reflect its visual representation and purpose.** [packages/react-icons/src/icons/AISecurityIcon.js [5-8]](https://github.com/trendmicro-frontend/tonic-ui/pull/918/files#diff-80bbff454e8cab6c35ec62d50981f2a53346502ecbb34749f7b592c4648f8268R5-R8) ```diff export default createSVGIcon( <> Suggestion importance[1-10]: 5Why: While the suggestion to rename the icon component to better reflect its visual representation is reasonable, it is not crucial for functionality or performance. It is a minor enhancement for clarity. | 5 | |
Maintainability |
Add a descriptive comment for the icon's visual representation___ **Consider adding a descriptive comment for the icon's visual representation toimprove code readability and maintainability.** [packages/react-icons/src/icons/FileUnzipOIcon.js [5-8]](https://github.com/trendmicro-frontend/tonic-ui/pull/918/files#diff-90aba202505a34de432d5db23d7f47a7d39278aca8e7f08aee575049e633c96aR5-R8) ```diff export default createSVGIcon( + // Icon representing a file being unzipped, with a zipper-like structure <> Suggestion importance[1-10]: 6Why: Adding a descriptive comment can improve code readability and maintainability, which is beneficial for developers who may work on the code in the future. However, it is not essential for the code's functionality. | 6 |
This pull request is automatically built and testable in CodeSandbox.
To see build info of the built libraries, click here or the icon next to each commit SHA.
Attention: Patch coverage is 50.00000%
with 57 lines
in your changes missing coverage. Please review.
Project coverage is 77.21%. Comparing base (
7f6fbc5
) to head (b5e9e96
). Report is 1 commits behind head on v2.
:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.
/ask Identify all the icons that have been renamed and provide a sorted list.
Identify all the icons that have been renamed and provide a sorted list.
The following icons have been renamed in the PR:
ApiIcon
to APIIcon
ApiManagementIcon
to APIManagementIcon
ConnectNoipIcon
to ConnectNoIPIcon
FilePdfOIcon
to FilePDFOIcon
FilePptOIcon
to FilePPTOIcon
IamIcon
to IAMIcon
IeIcon
to IEIcon
IocIcon
to IOCIcon
IpIcon
to IPIcon
ListOlIcon
to ListOLIcon
ListUlIcon
to ListULIcon
NasIcon
to NASIcon
RcaIcon
to RCAIcon
ResizeNeswIcon
to ResizeNESWIcon
ResizeNwseIcon
to ResizeNWSEIcon
TvIcon
to TVIcon
UrlIcon
to URLIcon
UsbIcon
to USBIcon
WmiIcon
to WMIIcon
This list is sorted alphabetically by the original icon names.
PR Type
enhancement, documentation, bug_fix
Description
generate-icons
script to support icon name transformation and deprecated icons.AISecurityIcon
,FileUnzipOIcon
,SecurityAIIcon
.ApiIcon
toAPIIcon
).react-icons
package to usetmicon
version1.41.0
.generate-icons
script.Changes walkthrough ๐
46 files
search-icons.js
Display deprecation warnings for icons in UI
packages/react-docs/pages/icons/search-icons.js
Alert
component for deprecated icons.ModalHeader
.AISecurityIcon.js
Add new AISecurityIcon component
packages/react-icons/src/icons/AISecurityIcon.js - Added new `AISecurityIcon` component.
APIIcon.js
Rename ApiIcon to APIIcon
packages/react-icons/src/icons/APIIcon.js - Renamed `ApiIcon` to `APIIcon`.
APIManagementIcon.js
Rename ApiManagementIcon to APIManagementIcon
packages/react-icons/src/icons/APIManagementIcon.js - Renamed `ApiManagementIcon` to `APIManagementIcon`.
ConnectNoIPIcon.js
Rename ConnectNoipIcon to ConnectNoIPIcon
packages/react-icons/src/icons/ConnectNoIPIcon.js - Renamed `ConnectNoipIcon` to `ConnectNoIPIcon`.
FilePDFOIcon.js
Rename FilePdfOIcon to FilePDFOIcon
packages/react-icons/src/icons/FilePDFOIcon.js - Renamed `FilePdfOIcon` to `FilePDFOIcon`.
FilePPTOIcon.js
Rename FilePptOIcon to FilePPTOIcon
packages/react-icons/src/icons/FilePPTOIcon.js - Renamed `FilePptOIcon` to `FilePPTOIcon`.
FileUnzipOIcon.js
Add new FileUnzipOIcon component
packages/react-icons/src/icons/FileUnzipOIcon.js - Added new `FileUnzipOIcon` component.
IAMIcon.js
Rename IamIcon to IAMIcon
packages/react-icons/src/icons/IAMIcon.js - Renamed `IamIcon` to `IAMIcon`.
IEIcon.js
Rename IeIcon to IEIcon
packages/react-icons/src/icons/IEIcon.js - Renamed `IeIcon` to `IEIcon`.
IOCIcon.js
Rename IocIcon to IOCIcon
packages/react-icons/src/icons/IOCIcon.js - Renamed `IocIcon` to `IOCIcon`.
IPIcon.js
Rename IpIcon to IPIcon
packages/react-icons/src/icons/IPIcon.js - Renamed `IpIcon` to `IPIcon`.
ListOLIcon.js
Rename ListOlIcon to ListOLIcon
packages/react-icons/src/icons/ListOLIcon.js - Renamed `ListOlIcon` to `ListOLIcon`.
ListULIcon.js
Rename ListUlIcon to ListULIcon
packages/react-icons/src/icons/ListULIcon.js - Renamed `ListUlIcon` to `ListULIcon`.
NASIcon.js
Rename NasIcon to NASIcon
packages/react-icons/src/icons/NASIcon.js - Renamed `NasIcon` to `NASIcon`.
RCAIcon.js
Rename RcaIcon to RCAIcon
packages/react-icons/src/icons/RCAIcon.js - Renamed `RcaIcon` to `RCAIcon`.
ResizeNESWIcon.js
Rename ResizeNeswIcon to ResizeNESWIcon
packages/react-icons/src/icons/ResizeNESWIcon.js - Renamed `ResizeNeswIcon` to `ResizeNESWIcon`.
ResizeNWSEIcon.js
Rename ResizeNwseIcon to ResizeNWSEIcon
packages/react-icons/src/icons/ResizeNWSEIcon.js - Renamed `ResizeNwseIcon` to `ResizeNWSEIcon`.
SecurityAIIcon.js
Add new SecurityAIIcon component
packages/react-icons/src/icons/SecurityAIIcon.js - Added new `SecurityAIIcon` component.
TVIcon.js
Rename TvIcon to TVIcon
packages/react-icons/src/icons/TVIcon.js - Renamed `TvIcon` to `TVIcon`.
URLIcon.js
Rename UrlIcon to URLIcon
packages/react-icons/src/icons/URLIcon.js - Renamed `UrlIcon` to `URLIcon`.
USBIcon.js
Rename UsbIcon to USBIcon
packages/react-icons/src/icons/USBIcon.js - Renamed `UsbIcon` to `USBIcon`.
WMIIcon.js
Rename WmiIcon to WMIIcon
packages/react-icons/src/icons/WMIIcon.js - Renamed `WmiIcon` to `WMIIcon`.
AiSecurityIcon.js
Add deprecated AiSecurityIcon component
packages/react-icons/src/icons/deprecated/AiSecurityIcon.js - Added deprecated `AiSecurityIcon` component.
ApiIcon.js
Add deprecated ApiIcon component
packages/react-icons/src/icons/deprecated/ApiIcon.js - Added deprecated `ApiIcon` component.
ApiManagementIcon.js
Add deprecated ApiManagementIcon component
packages/react-icons/src/icons/deprecated/ApiManagementIcon.js - Added deprecated `ApiManagementIcon` component.
ConnectNoipIcon.js
Add deprecated ConnectNoipIcon component
packages/react-icons/src/icons/deprecated/ConnectNoipIcon.js - Added deprecated `ConnectNoipIcon` component.
FilePdfOIcon.js
Add deprecated FilePdfOIcon component
packages/react-icons/src/icons/deprecated/FilePdfOIcon.js - Added deprecated `FilePdfOIcon` component.
FilePptOIcon.js
Add deprecated FilePptOIcon component
packages/react-icons/src/icons/deprecated/FilePptOIcon.js - Added deprecated `FilePptOIcon` component.
IamIcon.js
Add deprecated IamIcon component
packages/react-icons/src/icons/deprecated/IamIcon.js - Added deprecated `IamIcon` component.
IeIcon.js
Add deprecated IeIcon component
packages/react-icons/src/icons/deprecated/IeIcon.js - Added deprecated `IeIcon` component.
IocIcon.js
Add deprecated IocIcon component
packages/react-icons/src/icons/deprecated/IocIcon.js - Added deprecated `IocIcon` component.
IpIcon.js
Add deprecated IpIcon component
packages/react-icons/src/icons/deprecated/IpIcon.js - Added deprecated `IpIcon` component.
ListOlIcon.js
Add deprecated ListOlIcon component
packages/react-icons/src/icons/deprecated/ListOlIcon.js - Added deprecated `ListOlIcon` component.
ListUlIcon.js
Add deprecated ListUlIcon component
packages/react-icons/src/icons/deprecated/ListUlIcon.js - Added deprecated `ListUlIcon` component.
NasIcon.js
Add deprecated NasIcon component
packages/react-icons/src/icons/deprecated/NasIcon.js - Added deprecated `NasIcon` component.
RcaIcon.js
Add deprecated RcaIcon component
packages/react-icons/src/icons/deprecated/RcaIcon.js - Added deprecated `RcaIcon` component.
ResizeNeswIcon.js
Add deprecated ResizeNeswIcon component
packages/react-icons/src/icons/deprecated/ResizeNeswIcon.js - Added deprecated `ResizeNeswIcon` component.
ResizeNwseIcon.js
Add deprecated ResizeNwseIcon component
packages/react-icons/src/icons/deprecated/ResizeNwseIcon.js - Added deprecated `ResizeNwseIcon` component.
SecurityAiIcon.js
Add deprecated SecurityAiIcon component
packages/react-icons/src/icons/deprecated/SecurityAiIcon.js - Added deprecated `SecurityAiIcon` component.
TvIcon.js
Add deprecated TvIcon component
packages/react-icons/src/icons/deprecated/TvIcon.js - Added deprecated `TvIcon` component.
UrlIcon.js
Add deprecated UrlIcon component
packages/react-icons/src/icons/deprecated/UrlIcon.js - Added deprecated `UrlIcon` component.
UsbIcon.js
Add deprecated UsbIcon component
packages/react-icons/src/icons/deprecated/UsbIcon.js - Added deprecated `UsbIcon` component.
WmiIcon.js
Add deprecated WmiIcon component
packages/react-icons/src/icons/deprecated/WmiIcon.js - Added deprecated `WmiIcon` component.
index.js
Update icon exports for new and deprecated icons
packages/react-icons/src/icons/index.js
generate-icons.mjs
Enhance icon generation script with deprecation support
packages/react-icons/scripts/generate-icons.mjs
1 files
package.json
Update tmicon dependency version
packages/react-icons/package.json - Updated `tmicon` dependency version to `1.41.0`.