feat(preview-modernization): Update Sidebar Nav icons and tooltips

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

@@ -7,8 +7,14 @@ declare module '@box/blueprint-web-assets/icons/Medium' {
   declare export var AlertCircle: React$ComponentType<any>;
   declare export var AlertTriangle: React$ComponentType<any>;
   declare export var XMark: React$ComponentType<any>;
-  declare export var BoxAiAdvancedLogo24: React$ComponentType<any>;
-  declare export var BoxAiLogo24: React$ComponentType<any>;
+  declare export var Comment: React$ComponentType<any>;
+  declare export var Metadata: 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 module '@box/blueprint-web-assets/icons/Content' {
@@ -37,6 +43,7 @@ declare module '@box/blueprint-web-assets/icons/Fill' {
 declare module '@box/blueprint-web-assets/icons/Logo' {
   declare export var BoxLogo: React$ComponentType<any>;
   declare export var BoxAiLogo: React$ComponentType<any>;
+  declare export var BoxAiLogo24: React$ComponentType<any>;
 }
 
 declare module '@box/blueprint-web-assets/illustrations/Medium' {
@@ -56,4 +63,5 @@ declare module '@box/blueprint-web-assets/tokens/tokens' {
   declare export var Gray50: any;
   declare export var Size3: any;
   declare export var Size6: any;
+  declare export var IconIconBlue: any;
 }

src/components/sidebar-toggle-button/SidebarToggleButton.js

@@ -3,12 +3,12 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { injectIntl } from 'react-intl';
 import type { IntlShape } from 'react-intl';
-
+import { Tooltip as BPTooltip } from '@box/blueprint-web';
 import IconHide from '../../icons/general/IconHide';
 import IconShow from '../../icons/general/IconShow';
 import PlainButton from '../plain-button';
 import Tooltip from '../tooltip';
-
+import { useFeatureConfig } from '../../elements/common/feature-checking';
 import messages from '../../elements/common/messages';
 
 import './SidebarToggleButton.scss';
@@ -32,21 +32,36 @@ const SidebarToggleButton = ({
     onClick,
     ...rest
 }: Props) => {
+    const { enabled: isPreviewModernizationEnabled } = useFeatureConfig('previewModernization');
     const isCollapsed = !isOpen ? 'collapsed' : '';
     const intlMessage = isOpen ? messages.sidebarHide : messages.sidebarShow;
     const intlText = intl.formatMessage(intlMessage);
     const classes = classNames(className, 'bdl-SidebarToggleButton', {
         'bdl-is-collapsed': isCollapsed,
+        'bdl-SidebarToggleButton--modernized': isPreviewModernizationEnabled,
     });
     const tooltipPosition = direction === DIRECTION_LEFT ? 'middle-right' : 'middle-left';
-
     const renderButton = () => {
         if (direction === DIRECTION_LEFT) {
             return isOpen ? <IconShow height={16} width={16} /> : <IconHide height={16} width={16} />;
         }
         return isOpen ? <IconHide height={16} width={16} /> : <IconShow height={16} width={16} />;
     };
 
+    if (isPreviewModernizationEnabled) {
+        const tooltipPositionModernized = direction === DIRECTION_LEFT ? DIRECTION_RIGHT : DIRECTION_LEFT;
+
+        return (
+            <BPTooltip content={intlText} side={tooltipPositionModernized}>
+                {/* Workaround to attach BP tooltip to legacy button, remove span when buttons are migrated to BP */}
+                <span>
+                    <PlainButton aria-label={intlText} className={classes} onClick={onClick} type="button" {...rest}>
+                        {renderButton()}
+                    </PlainButton>
+                </span>
+            </BPTooltip>
+        );
+    }
     return (
         <Tooltip position={tooltipPosition} text={intlText}>
             <PlainButton aria-label={intlText} className={classes} onClick={onClick} type="button" {...rest}>

src/components/sidebar-toggle-button/SidebarToggleButton.scss

@@ -29,3 +29,17 @@
         }
     }
 }
+
+.bcs-SidebarNav--modernized {
+    .bdl-SidebarToggleButton {
+        &:not(.bdl-is-disabled):hover svg,
+        &:not(.is-disabled):hover svg,
+        &:not(.bdl-is-disabled):focus svg,
+        &:not(.is-disabled):focus svg,
+        &.bdl-is-collapsed svg,
+        &.bdl-is-collapsed:hover svg {
+            transform: scale(1.09);
+            transition: transform 150ms;
+        }
+    }
+}

src/elements/content-sidebar/SidebarNav.js

@@ -9,10 +9,18 @@ import { injectIntl } from 'react-intl';
 import type { IntlShape } from 'react-intl';
 import classNames from 'classnames';
 import noop from 'lodash/noop';
-// $FlowFixMe
-import { BoxAiLogo } from '@box/blueprint-web-assets/icons/Logo';
-// $FlowFixMe
-import { Size6 } from '@box/blueprint-web-assets/tokens/tokens';
+import { BoxAiLogo, BoxAiLogo24 } from '@box/blueprint-web-assets/icons/Logo';
+import {
+    Comment as CommentIcon,
+    InformationCircle as InformationCircleIcon,
+    Metadata as MetadataIcon,
+} from '@box/blueprint-web-assets/icons/Medium';
+import {
+    Comment as CommentIconFilled,
+    InformationCircle as InformationCircleIconFilled,
+    Metadata as MetadataIconFilled,
+} 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';
 import AdditionalTabs from './additional-tabs';
 import DocGenIcon from '../../icon/fill/DocGenIcon';
@@ -40,6 +48,50 @@ import type { InternalSidebarNavigation, InternalSidebarNavigationHandler } from
 import './SidebarNav.scss';
 import type { SignSidebarProps } from './SidebarNavSign';
 
+const SIDEBAR_TAB_ICON_PROPS = {
+    height: Size5,
+    width: Size5,
+};
+
+type IconWrapperProps = {
+    isActive?: boolean,
+    isPreviewModernizationEnabled: boolean,
+};
+
+// Icon wrapper components that receive isActive prop from SidebarNavButton
+const ActivityIconWrapper = ({ isActive, isPreviewModernizationEnabled }: IconWrapperProps) => {
+    if (!isPreviewModernizationEnabled) {
+        return <IconChatRound className="bcs-SidebarNav-icon" />;
+    }
+    return isActive ? (
+        <CommentIconFilled {...SIDEBAR_TAB_ICON_PROPS} color={IconIconBlue} />
+    ) : (
+        <CommentIcon {...SIDEBAR_TAB_ICON_PROPS} />
+    );
+};
+
+const DetailsIconWrapper = ({ isActive, isPreviewModernizationEnabled }: IconWrapperProps) => {
+    if (!isPreviewModernizationEnabled) {
+        return <IconDocInfo className="bcs-SidebarNav-icon" />;
+    }
+    return isActive ? (
+        <InformationCircleIconFilled {...SIDEBAR_TAB_ICON_PROPS} color={IconIconBlue} />
+    ) : (
+        <InformationCircleIcon {...SIDEBAR_TAB_ICON_PROPS} />
+    );
+};
+
+const MetadataIconWrapper = ({ isActive, isPreviewModernizationEnabled }: IconWrapperProps) => {
+    if (!isPreviewModernizationEnabled) {
+        return <IconMetadataThick className="bcs-SidebarNav-icon" />;
+    }
+    return isActive ? (
+        <MetadataIconFilled {...SIDEBAR_TAB_ICON_PROPS} color={IconIconBlue} />
+    ) : (
+        <MetadataIcon {...SIDEBAR_TAB_ICON_PROPS} />
+    );
+};
+
 type Props = {
     additionalTabs?: Array<AdditionalSidebarTab>,
     elementId: string,
@@ -98,7 +150,12 @@ const SidebarNav = ({
     };
 
     return (
-        <div className="bcs-SidebarNav" aria-label={intl.formatMessage(messages.sidebarNavLabel)}>
+        <div
+            className={classNames('bcs-SidebarNav', {
+                'bcs-SidebarNav--modernized': isPreviewModernizationEnabled,
+            })}
+            aria-label={intl.formatMessage(messages.sidebarNavLabel)}
+        >
             <div className="bcs-SidebarNav-tabs">
                 <SidebarNavTablist
                     elementId={elementId}
@@ -110,6 +167,7 @@ const SidebarNav = ({
                 >
                     {hasBoxAI && (
                         <SidebarNavButton
+                            isPreviewModernizationEnabled={isPreviewModernizationEnabled}
                             data-resin-target={SIDEBAR_NAV_TARGETS.BOXAI}
                             data-target-id="SidebarNavButton-boxAI"
                             data-testid="sidebarboxai"
@@ -122,35 +180,42 @@ const SidebarNav = ({
                                     : intl.formatMessage(messages.sidebarBoxAITitle)
                             }
                         >
-                            <BoxAiLogo height={Size6} width={Size6} />
+                            {isPreviewModernizationEnabled ? (
+                                <BoxAiLogo24 {...SIDEBAR_TAB_ICON_PROPS} />
+                            ) : (
+                                <BoxAiLogo height={Size6} width={Size6} />
+                            )}
                         </SidebarNavButton>
                     )}
                     {hasActivity && (
                         <SidebarNavButton
+                            isPreviewModernizationEnabled={isPreviewModernizationEnabled}
                             data-resin-target={SIDEBAR_NAV_TARGETS.ACTIVITY}
                             data-target-id="SidebarNavButton-activity"
                             data-testid="sidebaractivity"
                             onClick={handleSidebarNavButtonClick}
                             sidebarView={SIDEBAR_VIEW_ACTIVITY}
                             tooltip={intl.formatMessage(messages.sidebarActivityTitle)}
                         >
-                            <IconChatRound className="bcs-SidebarNav-icon" />
+                            <ActivityIconWrapper isPreviewModernizationEnabled={isPreviewModernizationEnabled} />
                         </SidebarNavButton>
                     )}
                     {hasDetails && (
                         <SidebarNavButton
+                            isPreviewModernizationEnabled={isPreviewModernizationEnabled}
                             data-resin-target={SIDEBAR_NAV_TARGETS.DETAILS}
                             data-target-id="SidebarNavButton-details"
                             data-testid="sidebardetails"
                             onClick={handleSidebarNavButtonClick}
                             sidebarView={SIDEBAR_VIEW_DETAILS}
                             tooltip={intl.formatMessage(messages.sidebarDetailsTitle)}
                         >
-                            <IconDocInfo className="bcs-SidebarNav-icon" />
+                            <DetailsIconWrapper isPreviewModernizationEnabled={isPreviewModernizationEnabled} />
                         </SidebarNavButton>
                     )}
                     {hasSkills && (
                         <SidebarNavButton
+                            isPreviewModernizationEnabled={isPreviewModernizationEnabled}
                             data-resin-target={SIDEBAR_NAV_TARGETS.SKILLS}
                             data-target-id="SidebarNavButton-skills"
                             data-testid="sidebarskills"
@@ -163,19 +228,21 @@ const SidebarNav = ({
                     )}
                     {hasMetadata && (
                         <SidebarNavButton
+                            isPreviewModernizationEnabled={isPreviewModernizationEnabled}
                             data-resin-target={SIDEBAR_NAV_TARGETS.METADATA}
                             data-target-id="SidebarNavButton-metadata"
                             data-testid="sidebarmetadata"
                             onClick={handleSidebarNavButtonClick}
                             sidebarView={SIDEBAR_VIEW_METADATA}
                             tooltip={intl.formatMessage(messages.sidebarMetadataTitle)}
                         >
-                            <IconMetadataThick className="bcs-SidebarNav-icon" />
+                            <MetadataIconWrapper isPreviewModernizationEnabled={isPreviewModernizationEnabled} />
                         </SidebarNavButton>
                     )}
                     {hasDocGen && (
                         <SidebarNavButton
                             elementId=""
+                            isPreviewModernizationEnabled={isPreviewModernizationEnabled}
                             data-resin-target={SIDEBAR_NAV_TARGETS.DOCGEN}
                             data-target-id="SidebarNavButton-docGen"
                             data-testid="sidebardocgen"
@@ -201,7 +268,11 @@ const SidebarNav = ({
                         })}
                         data-testid="additional-tabs-overflow"
                     >
-                        <AdditionalTabs key={fileId} tabs={additionalTabs} />
+                        <AdditionalTabs
+                            isPreviewModernizationEnabled={isPreviewModernizationEnabled}
+                            key={fileId}
+                            tabs={additionalTabs}
+                        />
                     </div>
                 )}
             </div>