feat(preview-modernization): Update SidebarNav overflow separator (#4370)

* feat(preview-modernization): Update SidebarNav overflow separator

* feat(preview-modernization): Add test

---------

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Author: JChan106

src/elements/content-sidebar/SidebarNav.js

@@ -7,6 +7,7 @@
 import * as React from 'react';
 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';
@@ -83,6 +84,7 @@ const SidebarNav = ({
     const { enabled: hasBoxSign } = signSidebarProps || {};
     const { disabledTooltip: boxAIDisabledTooltip, showOnlyNavButton: showOnlyBoxAINavButton } =
         useFeatureConfig('boxai.sidebar');
+    const { enabled: isPreviewModernizationEnabled } = useFeatureConfig('previewModernization');
 
     const { focusPrompt } = usePromptFocus('.be.bcs');
 
@@ -193,7 +195,12 @@ const SidebarNav = ({
                 )}
 
                 {hasAdditionalTabs && (
-                    <div className="bcs-SidebarNav-overflow" data-testid="additional-tabs-overflow">
+                    <div
+                        className={classNames('bcs-SidebarNav-overflow', {
+                            'bcs-SidebarNav-overflow--modernized': isPreviewModernizationEnabled,
+                        })}
+                        data-testid="additional-tabs-overflow"
+                    >
                         <AdditionalTabs key={fileId} tabs={additionalTabs} />
                     </div>
                 )}

src/elements/content-sidebar/SidebarNav.scss

@@ -58,6 +58,22 @@
         }
     }
 
+    .bcs-SidebarNav-overflow--modernized {
+        position: relative;
+
+        // Gradient overlay at bottom to indicate scrollable content
+        &::after {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 30px;
+            background: linear-gradient(to top, $white, transparent);
+            content: '';
+            pointer-events: none;
+        }
+    }
+
     .bcs-SidebarNav-footer {
         display: flex;
         flex: 0 0 60px;

src/elements/content-sidebar/__tests__/SidebarNav.test.js

@@ -163,6 +163,24 @@ describe('elements/content-sidebar/SidebarNav', () => {
         expect(placeholders).toHaveLength(5);
     });
 
+    test('should render additional tabs with modernized class when previewModernization is enabled', () => {
+        renderSidebarNav({
+            features: {
+                previewModernization: {
+                    enabled: true,
+                },
+            },
+            props: {
+                additionalTabs: [],
+                hasAdditionalTabs: true,
+            },
+        });
+
+        const overflowContainer = screen.getByTestId('additional-tabs-overflow');
+        expect(overflowContainer).toBeInTheDocument();
+        expect(overflowContainer).toHaveClass('bcs-SidebarNav-overflow--modernized');
+    });
+
     test('should render the Box Sign entry point if its feature is enabled', () => {
         renderSidebarNav({
             props: {