feat(preview-modernization): Update SidebarNav overflow separator

[JChan106]

Adds gradient overflow separator based on the preview modernization FF.

Before:

After:

Summary by CodeRabbit

• New Features

  • Introduced modernized sidebar navigation styling with a visual gradient overlay indicator for scrollable content, improving clarity when additional navigation tabs are present.

• Tests

  • Added test case validating the modernized sidebar styling renders correctly when the feature is enabled.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Conditional CSS class is applied to the sidebar navigation overflow container when the preview modernization feature flag is enabled. A new gradient overlay styling is added for modernized appearance, and a test validates the feature flag integration.

Changes

Cohort / File(s)	Summary
Preview Modernization Feature src/elements/content-sidebar/SidebarNav.js	Imports classNames utility, consumes previewModernization feature flag via useFeatureConfig, and conditionally applies bcs-SidebarNav-overflow--modernized CSS class to the additional-tabs overflow container.
Modernized Overflow Styling src/elements/content-sidebar/SidebarNav.scss	Adds bcs-SidebarNav-overflow--modernized modifier class that renders a 30px white-to-transparent gradient overlay at the bottom of the overflow container via a ::after pseudo-element.
Feature Integration Test src/elements/content-sidebar/__tests__/SidebarNav.test.js	Adds test case verifying that when previewModernization feature flag is enabled and additionalTabs props are set, the overflow container renders with the modernized CSS class applied.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Feature flag integration is straightforward with no branching logic
• CSS gradient overlay is a self-contained style addition with no side effects
• Single new test case focused on class application

Possibly related PRs

• feat(router): optional router in SidebarNav, SidebarNavTablist #4177: Modifies the same additional-tabs overflow container in SidebarNav.js with different prop changes (data-testid and router props), representing related refactoring to the same component area.

Suggested labels

ready-to-merge

Suggested reviewers

• kajarosz
• jankowiakdawid
• jpan-box

Poem

🐰 A gradient appears at the edge of the view,
When modernization calls, the overflow stays true,
With a feature flag's grace and a soft fade away,
The sidebar now shimmers in its brand new way! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: adding a gradient overflow separator to SidebarNav based on the preview modernization feature flag.
Description check	✅ Passed	The description provides a clear summary of changes with before/after visual comparisons, adequately explaining what was modified and why. While it lacks detailed technical explanation, the visual documentation suffices for understanding the change.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between abc11ee and 73f7c92.

📒 Files selected for processing (3)

• src/elements/content-sidebar/SidebarNav.js (3 hunks)
• src/elements/content-sidebar/SidebarNav.scss (1 hunks)
• src/elements/content-sidebar/__tests__/SidebarNav.test.js (1 hunks)

🧰 Additional context used

🧠 Learnings (7)

📚 Learning: 2025-09-03T18:10:42.760Z

Learnt from: fpan225
Repo: box/box-ui-elements PR: 4239
File: src/elements/content-sidebar/SidebarNav.js:195-206
Timestamp: 2025-09-03T18:10:42.760Z
Learning: In src/elements/content-sidebar/SidebarNav.js, the maintainer wants users to be able to override data-* attributes (data-resin-target, data-target-id, data-testid) through navButtonProps for custom tabs. The spread of {...navButtonProps} should come after the data-* attributes to allow overriding, not before them.

Applied to files:

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

📚 Learning: 2025-09-03T18:10:29.467Z

Learnt from: fpan225
Repo: box/box-ui-elements PR: 4239
File: src/elements/content-sidebar/SidebarNav.js:94-106
Timestamp: 2025-09-03T18:10:29.467Z
Learning: In the ContentSidebar CustomSidebarPanel API, the navButtonProps spread should come after explicit data-* attributes to allow users to override analytics tracking attributes like data-resin-target, data-target-id, and data-testid when needed. This is intentional API design for flexibility.

Applied to files:

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

📚 Learning: 2025-06-17T13:30:02.172Z

Learnt from: rafalmaksymiuk
Repo: box/box-ui-elements PR: 4144
File: src/elements/content-sidebar/versions/VersionsList.js:24-33
Timestamp: 2025-06-17T13:30:02.172Z
Learning: In the box-ui-elements codebase, Flow components use .flow.js type definition files, not TypeScript .ts files. The InternalSidebarNavigation type is a union type where different variants may have different properties like versionId, and proper type safety is ensured through conditional checks in methods like getSelectedVersionId.

Applied to files:

• src/elements/content-sidebar/SidebarNav.js

📚 Learning: 2025-06-11T16:30:10.431Z

Learnt from: rafalmaksymiuk
Repo: box/box-ui-elements PR: 4136
File: src/elements/common/types/SidebarNavigation.ts:16-26
Timestamp: 2025-06-11T16:30:10.431Z
Learning: `VersionSidebarView` intentionally uses the `versionId` field to stay consistent with current URL parameter naming; a potential rename to `fileVersionId` is deferred until React Router is removed.

Applied to files:

• src/elements/content-sidebar/SidebarNav.js

📚 Learning: 2025-07-11T14:43:02.677Z

Learnt from: jpan-box
Repo: box/box-ui-elements PR: 4166
File: src/elements/content-sidebar/SidebarNav.js:126-126
Timestamp: 2025-07-11T14:43:02.677Z
Learning: In the box-ui-elements repository, there's a file-type-based pattern for internationalization: TypeScript files (.tsx) predominantly use the modern useIntl hook (41 vs 15 files), while JavaScript files (.js) predominantly use the legacy injectIntl HOC (64 vs 5 files). New TypeScript components should use useIntl, while existing JavaScript components typically continue using injectIntl for consistency.

Applied to files:

• src/elements/content-sidebar/SidebarNav.js

📚 Learning: 2025-06-25T13:09:54.538Z

Learnt from: rafalmaksymiuk
Repo: box/box-ui-elements PR: 4160
File: src/elements/content-sidebar/SidebarToggle.js:21-27
Timestamp: 2025-06-25T13:09:54.538Z
Learning: The box-ui-elements project uses Flow for type annotations in JavaScript files, as indicated by flow directives in file headers. Type annotations like `: Props` are valid Flow syntax, not TypeScript syntax.

Applied to files:

• src/elements/content-sidebar/SidebarNav.js

📚 Learning: 2025-08-27T17:03:48.322Z

Learnt from: bxie-box
Repo: box/box-ui-elements PR: 4250
File: src/features/classification/applied-by-ai-classification-reason/__tests__/AppliedByAiClassificationReason.test.tsx:44-51
Timestamp: 2025-08-27T17:03:48.322Z
Learning: In test files for bxie-box, prefer using queryByTestId over getByTestId when testing for expected elements that should always exist, as null access serves as validation for regressions or unexpected changes rather than masking issues with defensive assertions.

Applied to files:

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

🧬 Code graph analysis (1)

src/elements/content-sidebar/SidebarNav.js (1)

src/elements/common/feature-checking/hooks.js (1)

• useFeatureConfig (6-9)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: lint_test_build
• GitHub Check: Summary

🔇 Additional comments (4)

src/elements/content-sidebar/__tests__/SidebarNav.test.js (1)

166-182: LGTM!

The test correctly verifies that the modernized class is applied when the feature flag is enabled. The test structure and assertions follow the existing patterns in the test suite.

src/elements/content-sidebar/SidebarNav.js (3)

10-10: LGTM!

The classNames import is appropriate for conditional CSS class application.

---

87-87: LGTM!

The feature flag integration follows the established pattern and correctly destructures the enabled property.

---

198-203: LGTM!

The conditional application of the modernized class is correctly implemented using the classNames utility, and the feature flag check is properly integrated.