chore: update wds icon component #34950
Conversation
WalkthroughThis update primarily focuses on enhancing the design system's icon component by removing the Changes
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 (
|
github-actions
bot
added
the
skip-changelog
![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, codebase verification and nitpick comments (1)
app/client/packages/design-system/widgets/src/components/Icon/stories/Icon.stories.tsx (1)
45-45: Usage of@ts-expect-errordirective.The
@ts-expect-errordirective is used to bypass TypeScript's type-checking for theiconprop. Ensure that this is necessary and consider adding a comment explaining why the type error is being ignored.+ // @ts-expect-error we don't want to cast a type here + // Explanation: Add a brief explanation for why the type error is being ignored.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
app/client/yarn.lockis excluded by!**/yarn.lock,!**/*.lock
Files selected for processing (11)
- app/client/packages/design-system/headless/src/index.ts (1 hunks)
- app/client/packages/design-system/widgets/package.json (1 hunks)
- app/client/packages/design-system/widgets/src/components/Icon/src/Icon.tsx (2 hunks)
- app/client/packages/design-system/widgets/src/components/Icon/src/icons.ts (93 hunks)
- app/client/packages/design-system/widgets/src/components/Icon/src/styles.module.css (2 hunks)
- app/client/packages/design-system/widgets/src/components/Icon/src/types.ts (1 hunks)
- app/client/packages/design-system/widgets/src/components/Icon/stories/Icon.stories.tsx (1 hunks)
- app/client/packages/design-system/widgets/src/scripts/build-icons.ts (1 hunks)
- app/client/src/widgets/wds/WDSStatsWidget/component/index.tsx (2 hunks)
- app/client/src/widgets/wds/WDSStatsWidget/config/propertyPaneConfig/contentConfig.ts (1 hunks)
- app/client/src/widgets/wds/WDSStatsWidget/widget/types.ts (1 hunks)
Files skipped from review due to trivial changes (1)
- app/client/packages/design-system/widgets/src/scripts/build-icons.ts
Additional context used
Biome
app/client/packages/design-system/widgets/src/components/Icon/src/Icon.tsx
[error] 20-20: Avoid redundant
BooleancallIt is not necessary to use
Booleancall when a value will already be coerced to a boolean.
Unsafe fix: Remove redundantBooleancall(lint/complexity/noExtraBooleanCast)
[error] 55-55: Avoid redundant
BooleancallIt is not necessary to use
Booleancall when a value will already be coerced to a boolean.
Unsafe fix: Remove redundantBooleancall(lint/complexity/noExtraBooleanCast)
Additional comments not posted (21)
app/client/packages/design-system/headless/src/index.ts (1)
1-5: Verify the impact of removing theIconcomponent export.The removal of the
Iconcomponent export might affect other parts of the codebase that rely on this export. Ensure that all dependencies on theIconcomponent are updated accordingly.Verification successful
No issues found with the removal of the
Iconcomponent export.The search did not find any occurrences of the
Iconcomponent being imported in the codebase, indicating that its removal does not impact other parts of the codebase.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the impact of removing the `Icon` component export. # Test: Search for the usage of the `Icon` component export. Expect: No occurrences. rg --type typescript -A 5 $'from "./components/Icon"'Length of output: 89
Script:
#!/bin/bash # Description: Verify the impact of removing the `Icon` component export. # Test: Search for the usage of the `Icon` component export. Expect: No occurrences. rg 'import .* from .*/components/Icon.*' --glob '*.ts' --glob '*.tsx'Length of output: 71
app/client/src/widgets/wds/WDSStatsWidget/widget/types.ts (1)
11-11: LGTM! The change enhances flexibility.The update to the
valueColorproperty in theStatsWidgetPropsinterface to include the"default"option enhances flexibility by allowing a default color setting.app/client/packages/design-system/widgets/src/components/Icon/src/styles.module.css (1)
1-1: LGTM! The changes improve styling capabilities.The addition of the import statement and the loop for dynamic color application based on the
data-colorattribute significantly enhances the styling capabilities of the.iconclass.app/client/packages/design-system/widgets/package.json (1)
22-22: Upgrade of@tabler/icons-reactpackage version.The package version has been updated from
^2.45.0to^3.10.0. Ensure that the new version does not introduce breaking changes or regressions.Consider running the tests and verifying the changelog of the new version.
app/client/packages/design-system/widgets/src/components/Icon/src/types.ts (2)
1-3: Import statements for updatedIconPropsinterface.The import statements are necessary for the updated
IconPropsinterface and are correctly included.
5-30: EnhancedIconPropsinterface.The
IconPropsinterface has been updated to extendDOMPropsandAriaLabelingProps, enhancing accessibility and functionality. The changes are well-structured and improve the component's compliance with accessibility standards.app/client/src/widgets/wds/WDSStatsWidget/component/index.tsx (2)
26-30: Enhanced handling ofcolorproperty forIconcomponent.The
Iconcomponent now receives acolorprop that defaults toundefinedifvalueColoris"default". This change improves flexibility in the icon's color representation.
47-50: Enhanced handling ofcolorproperty forTextcomponent.The
Textcomponent'scolorprop now defaults toundefinedifvalueColoris"default". This change ensures consistency in color application across the component.app/client/packages/design-system/widgets/src/components/Icon/src/Icon.tsx (6)
1-1: Import statement looks good.The import statement correctly includes necessary modules and types.
10-10: Update thereftype.The
reftype has been changed fromRef<SVGSVGElement>toRef<Component>. Ensure that this change aligns with the expected type of the component reference.
11-11: Destructure props correctly.The props destructuring includes a new
colorproperty and removes theiconproperty. Ensure that thecolorprop is properly utilized and theiconprop is no longer needed.
16-16: Logic for derivingpascalNamelooks good.The logic for deriving
pascalNamefromICONS[name]is clear and concise.
39-39: Memoization ofIconcomponent looks good.The use of
useMemofor memoizing theIconcomponent is appropriate.
51-58: Rendering logic looks good.The rendering logic within the
Suspensecomponent is clear and concise. Ensure that all props are correctly passed down.Tools
Biome
[error] 55-55: Avoid redundant
BooleancallIt is not necessary to use
Booleancall when a value will already be coerced to a boolean.
Unsafe fix: Remove redundantBooleancall(lint/complexity/noExtraBooleanCast)
app/client/src/widgets/wds/WDSStatsWidget/config/propertyPaneConfig/contentConfig.ts (1)
35-44: Addition of default option and removal of validation section.The addition of a default option labeled "Default" enhances the user interface by providing a clear default selection. Ensure that the removal of the validation section does not negatively impact the component's behavior.
app/client/packages/design-system/widgets/src/components/Icon/src/icons.ts (6)
46-46: New icon entry added:IconAi.The new icon entry follows the existing naming conventions and appears to be correctly added.
93-95: New icon entries added:IconAlignLeft2andIconAlignRight2.The new icon entries follow the existing naming conventions and appear to be correctly added.
97-104: New icon entries added:IconAlphabetArabic,IconAlphabetBangla,IconAlphabetCyrillic,IconAlphabetGreek,IconAlphabetHebrew,IconAlphabetKorean,IconAlphabetLatin,IconAlphabetThai.The new icon entries follow the existing naming conventions and appear to be correctly added.
331-334: New icon entries added:IconAuth2fa,IconAutomaticGearbox,IconAutomation,IconAvocado.The new icon entries follow the existing naming conventions and appear to be correctly added.
353-353: New icon entry added:IconBadgeAdOff.The new icon entry follows the existing naming conventions and appears to be correctly added.
480-488: New icon entries added:IconBinoculars,IconBiohazard,IconBiohazardOff,IconBlade,IconBleach,IconBleachChlorine,IconBleachNoChlorine,IconBleachOff.The new icon entries follow the existing naming conventions and appear to be correctly added.
| return lazy(async () => | ||
| import("@tabler/icons-react").then((module) => { | ||
| if (Boolean(filled)) { | ||
| const filledVariant = `${pascalName}Filled`; | ||
|
|
||
| Icon = lazy(async () => | ||
| import("@tabler/icons-react").then((module) => { | ||
| if (Boolean(filled)) { | ||
| const filledVariant = `${pascalName}Filled`; | ||
|
|
||
| if (filledVariant in module) { | ||
| return { | ||
| default: module[filledVariant] as React.ComponentType, | ||
| }; | ||
| } | ||
| } | ||
|
|
||
| if (pascalName in module) { | ||
| if (filledVariant in module) { | ||
| return { | ||
| default: module[pascalName] as React.ComponentType, | ||
| default: module[filledVariant] as React.ComponentType, | ||
| }; | ||
| } | ||
| } | ||
|
|
||
| if (pascalName in module) { | ||
| return { | ||
| default: module[pascalName] as React.ComponentType, | ||
| }; | ||
| } | ||
|
|
||
| return { default: FallbackIcon }; | ||
| }), | ||
| ); | ||
| } else { | ||
| Icon = FallbackIcon; | ||
| } | ||
| return Icon; | ||
| }, [name, icon, filled]); | ||
| return { default: FallbackIcon }; | ||
| }), | ||
| ); |
There was a problem hiding this comment.
Optimize icon loading logic.
The icon loading logic has been streamlined. However, the redundant Boolean calls should be removed.
- if (Boolean(filled)) {
+ if (filled) {
- if (Boolean(size)) {
+ if (size) {Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| return lazy(async () => | |
| import("@tabler/icons-react").then((module) => { | |
| if (Boolean(filled)) { | |
| const filledVariant = `${pascalName}Filled`; | |
| Icon = lazy(async () => | |
| import("@tabler/icons-react").then((module) => { | |
| if (Boolean(filled)) { | |
| const filledVariant = `${pascalName}Filled`; | |
| if (filledVariant in module) { | |
| return { | |
| default: module[filledVariant] as React.ComponentType, | |
| }; | |
| } | |
| } | |
| if (pascalName in module) { | |
| if (filledVariant in module) { | |
| return { | |
| default: module[pascalName] as React.ComponentType, | |
| default: module[filledVariant] as React.ComponentType, | |
| }; | |
| } | |
| } | |
| if (pascalName in module) { | |
| return { | |
| default: module[pascalName] as React.ComponentType, | |
| }; | |
| } | |
| return { default: FallbackIcon }; | |
| }), | |
| ); | |
| } else { | |
| Icon = FallbackIcon; | |
| } | |
| return Icon; | |
| }, [name, icon, filled]); | |
| return { default: FallbackIcon }; | |
| }), | |
| ); | |
| return lazy(async () => | |
| import("@tabler/icons-react").then((module) => { | |
| if (filled) { | |
| const filledVariant = `${pascalName}Filled`; | |
| if (filledVariant in module) { | |
| return { | |
| default: module[filledVariant] as React.ComponentType, | |
| }; | |
| } | |
| } | |
| if (pascalName in module) { | |
| return { | |
| default: module[pascalName] as React.ComponentType, | |
| }; | |
| } | |
| return { default: FallbackIcon }; | |
| }), | |
| ); |
Tools
Biome
[error] 20-20: Avoid redundant
BooleancallIt is not necessary to use
Booleancall when a value will already be coerced to a boolean.
Unsafe fix: Remove redundantBooleancall(lint/complexity/noExtraBooleanCast)
Description
Tip
Add a TL;DR when the description is longer than 500 words or extremely technical (helps the content, marketing, and DevRel team).
Please also include relevant motivation and context. List any dependencies that are required for this change. Add links to Notion, Figma or any other documents that might be relevant to the PR.
Fixes #
Issue Numberor
Fixes
Issue URLWarning
If no issue exists, please create an issue first, and check with the maintainers if the issue is valid.
Automation
/ok-to-test tags="@tag.Anvil"
🔍 Cypress test results
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/9942515767
Commit: db1ef7c
Cypress dashboard.
Tags:
@tag.AnvilSpec:
Mon, 15 Jul 2024 16:12:38 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit
New Features
Bug Fixes
Improvements
Documentation