feat(sidebar-nav): update skills and docgen icons to BP (WEBAPP-42958)

Author: Duncan Hsu

flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js

@@ -9,12 +9,15 @@ declare module '@box/blueprint-web-assets/icons/Medium' {
   declare export var XMark: React$ComponentType<any>;
   declare export var Comment: React$ComponentType<any>;
   declare export var Metadata: React$ComponentType<any>;
+  declare export var MagicWand: React$ComponentType<any>;
+  declare export var DocGen: React$ComponentType<any>;
 }
 
 declare module '@box/blueprint-web-assets/icons/MediumFilled' {
   declare export var Comment: React$ComponentType<any>;
   declare export var InformationCircle: React$ComponentType<any>;
   declare export var Metadata: React$ComponentType<any>;
+  declare export var MagicWand: React$ComponentType<any>;
 }
 
 declare module '@box/blueprint-web-assets/icons/Content' {

package.json

@@ -125,7 +125,7 @@
         "@babel/template": "^7.24.7",
         "@babel/types": "^7.24.7",
         "@box/blueprint-web": "^12.98.0",
-        "@box/blueprint-web-assets": "^4.80.4",
+        "@box/blueprint-web-assets": "4.88.2",
         "@box/box-ai-agent-selector": "^0.53.0",
         "@box/box-ai-content-answers": "^0.139.0",
         "@box/box-item-type-selector": "^0.73.1",

src/elements/content-sidebar/SidebarNav.js

@@ -14,11 +14,14 @@ import {
     Comment as CommentIcon,
     InformationCircle as InformationCircleIcon,
     Metadata as MetadataIcon,
+    MagicWand as MagicWandIcon,
+    DocGen as BPDocGenIcon,
 } from '@box/blueprint-web-assets/icons/Medium';
 import {
     Comment as CommentIconFilled,
     InformationCircle as InformationCircleIconFilled,
     Metadata as MetadataIconFilled,
+    MagicWand as MagicWandIconFilled,
 } from '@box/blueprint-web-assets/icons/MediumFilled';
 import { Size6, Size5, IconIconBlue } from '@box/blueprint-web-assets/tokens/tokens';
 import { usePromptFocus } from '@box/box-ai-content-answers';
@@ -92,6 +95,28 @@ const MetadataIconWrapper = ({ isActive, isPreviewModernizationEnabled }: IconWr
     );
 };
 
+const MagicWandIconWrapper = ({ isActive, isPreviewModernizationEnabled }: IconWrapperProps) => {
+    if (!isPreviewModernizationEnabled) {
+        return <IconMagicWand className="bcs-SidebarNav-icon" />;
+    }
+    return isActive ? (
+        <MagicWandIconFilled {...SIDEBAR_TAB_ICON_PROPS} color={IconIconBlue} />
+    ) : (
+        <MagicWandIcon {...SIDEBAR_TAB_ICON_PROPS} />
+    );
+};
+
+const DocGenIconWrapper = ({ isActive, isPreviewModernizationEnabled }: IconWrapperProps) => {
+    if (!isPreviewModernizationEnabled) {
+        return <DocGenIcon className="bcs-SidebarNav-icon" />;
+    }
+    return isActive ? (
+        <BPDocGenIcon {...SIDEBAR_TAB_ICON_PROPS} color={IconIconBlue} />
+    ) : (
+        <BPDocGenIcon {...SIDEBAR_TAB_ICON_PROPS} />
+    );
+};
+
 type Props = {
     additionalTabs?: Array<AdditionalSidebarTab>,
     elementId: string,
@@ -223,7 +248,7 @@ const SidebarNav = ({
                             sidebarView={SIDEBAR_VIEW_SKILLS}
                             tooltip={intl.formatMessage(messages.sidebarSkillsTitle)}
                         >
-                            <IconMagicWand className="bcs-SidebarNav-icon" />
+                            <MagicWandIconWrapper isPreviewModernizationEnabled={isPreviewModernizationEnabled} />
                         </SidebarNavButton>
                     )}
                     {hasMetadata && (
@@ -250,7 +275,7 @@ const SidebarNav = ({
                             sidebarView={SIDEBAR_VIEW_DOCGEN}
                             tooltip={intl.formatMessage(messages.sidebarDocGenTooltip)}
                         >
-                            <DocGenIcon className="bcs-SidebarNav-icon" />
+                            <DocGenIconWrapper isPreviewModernizationEnabled={isPreviewModernizationEnabled} />
                         </SidebarNavButton>
                     )}
                 </SidebarNavTablist>

yarn.lock

@@ -1419,7 +1419,12 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@box/blueprint-web-assets@^4.80.0", "@box/blueprint-web-assets@^4.80.4":
+"@box/blueprint-web-assets@4.88.2":
+  version "4.88.2"
+  resolved "https://registry.yarnpkg.com/@box/blueprint-web-assets/-/blueprint-web-assets-4.88.2.tgz#cb98f14dcd5a072d7c97be31030485cf9219478e"
+  integrity sha512-TAtiYWvudxj3i5GAa4NsiHzlF9WcIARBbp1dCxgwsFP652NEamo/3SH2wyhcc/5u1bJJLftxe5xsTv6a7dpj0w==
+
+"@box/blueprint-web-assets@^4.80.0":
   version "4.80.4"
   resolved "https://registry.yarnpkg.com/@box/blueprint-web-assets/-/blueprint-web-assets-4.80.4.tgz#3db74e9c1006d2eb86ddc7e4caa23a4f0376cf92"
   integrity sha512-zXIUfIC+RgzpQkA6KtLi0M5gtbXjNO3orWPNsVaJgEbYjrKahC4AejL2j4/XNaxt7AO0Xvz6vRr1Zjn1Byu4YA==
@@ -14400,7 +14405,7 @@ node-fetch@^2.6.12, node-fetch@^2.6.7:
   dependencies:
     whatwg-url "^5.0.0"
 
-node-forge@1.3.2, node-forge@^1:
+node-forge@^1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.3.2.tgz#d0d2659a26eef778bf84d73e7f55c08144ee7750"
   integrity sha512-6xKiQ+cph9KImrRh0VsjH2d8/GXA4FIMlgU4B757iI1ApvcyA9VlouP0yZJha01V+huImO+kKMU7ih+2+E14fw==