Open
Conversation
Open
…-refactor-sidebar-v2
Contributor
There was a problem hiding this comment.
Pull request overview
Introduces a new SidebarV2 layout system (with TopbarV2, secondary rail, and mobile bottom navigation) and updates related theming/tokens + Directory item tooltip behavior to support the new sidebar experience.
Changes:
- Added
SidebarV2+TopbarV2components with responsive tokens and ThemeContext/init wiring. - Implemented
SidebarV2MobileNavigation(token-driven) and updated Directory items to use truncation-aware TooltipV2 behavior. - Adjusted scroll/interaction locking behavior (scroll-lock implementation and dropdown interaction lock gated by
asModal).
Reviewed changes
Copilot reviewed 52 out of 52 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/blend/lib/tokens/zIndex.tokens.ts | Adds additional z-index token values used by new components. |
| packages/blend/lib/hooks/useScrollLock.ts | Updates scroll-lock strategy to avoid layout jumps for sidebar layouts. |
| packages/blend/lib/context/useComponentToken.ts | Registers new token keys (TOPBARV2, SIDEBARV2, MOBILE_NAVIGATION_V2). |
| packages/blend/lib/context/ThemeContext.tsx | Adds default ThemeContext tokens for new V2 components. |
| packages/blend/lib/context/initComponentTokens.ts | Initializes V2 component tokens during theme setup. |
| packages/blend/lib/components/TopbarV2/types.ts | Defines TopbarV2 public props/types. |
| packages/blend/lib/components/TopbarV2/TopbarV2.tsx | Implements TopbarV2 rendering for mobile/desktop. |
| packages/blend/lib/components/TopbarV2/topbarV2.tokens.ts | Adds token contract + theme switch for TopbarV2. |
| packages/blend/lib/components/TopbarV2/topbarV2.light.tokens.ts | Provides light theme tokens for TopbarV2. |
| packages/blend/lib/components/TopbarV2/topbarV2.dark.tokens.ts | Provides dark theme tokens for TopbarV2. |
| packages/blend/lib/components/TopbarV2/index.ts | Exports TopbarV2 and related types/tokens. |
| packages/blend/lib/components/SidebarV2/utils.ts | Adds SidebarV2 helpers (state, announcements, auto-hide, mobile item mapping). |
| packages/blend/lib/components/SidebarV2/types.ts | Defines SidebarV2 public props/types + secondary rail types. |
| packages/blend/lib/components/SidebarV2/SidebarV2MobileNavigation/utils.ts | Adds layout/height calculation helpers for mobile nav. |
| packages/blend/lib/components/SidebarV2/SidebarV2MobileNavigation/PrimaryActionButton.tsx | Adds primary action button for the mobile dock. |
| packages/blend/lib/components/SidebarV2/SidebarV2MobileNavigation/MoreButton.tsx | Adds overflow (“More”) button for mobile dock expansion. |
| packages/blend/lib/components/SidebarV2/SidebarV2MobileNavigation/MobileNavigationItem.tsx | Adds mobile dock item button renderer. |
| packages/blend/lib/components/SidebarV2/SidebarV2MobileNavigation/mobile.tokens.ts | Defines token contract + theme switch for mobile dock. |
| packages/blend/lib/components/SidebarV2/SidebarV2MobileNavigation/mobile.light.tokens.ts | Light theme tokens for mobile dock. |
| packages/blend/lib/components/SidebarV2/SidebarV2MobileNavigation/mobile.dark.tokens.ts | Dark theme tokens for mobile dock. |
| packages/blend/lib/components/SidebarV2/SidebarV2MobileNavigation/index.tsx | Implements the floating, expandable mobile navigation dock. |
| packages/blend/lib/components/SidebarV2/SidebarV2MobileNavigation/hooks.ts | Adds ordering/selection behavior for mobile dock items. |
| packages/blend/lib/components/SidebarV2/SidebarV2Header.tsx | Adds V2 sidebar header (merchant slot + toggle button). |
| packages/blend/lib/components/SidebarV2/SidebarV2Footer.tsx | Adds V2 sidebar footer wrapper. |
| packages/blend/lib/components/SidebarV2/SidebarV2Content.tsx | Composes header + Directory + footer for V2 primary sidebar. |
| packages/blend/lib/components/SidebarV2/sidebarV2.types.ts | Back-compat re-export types shim for SidebarV2. |
| packages/blend/lib/components/SidebarV2/SidebarV2.tsx | Main V2 layout composition incl. secondary rail + TopbarV2 + mobile dock. |
| packages/blend/lib/components/SidebarV2/sidebarV2.tokens.ts | Adds token contract + theme switch for SidebarV2. |
| packages/blend/lib/components/SidebarV2/sidebarV2.light.tokens.ts | Light theme tokens for SidebarV2. |
| packages/blend/lib/components/SidebarV2/sidebarV2.dark.tokens.ts | Dark theme tokens for SidebarV2. |
| packages/blend/lib/components/SidebarV2/SecondarySidebar.tsx | Adds secondary sidebar rail renderer (tenant/app switcher + footer slot). |
| packages/blend/lib/components/SidebarV2/index.ts | Exports SidebarV2 and types/enums. |
| packages/blend/lib/components/Sidebar/SidebarContent.tsx | Adds debug logging (should be removed). |
| packages/blend/lib/components/Sidebar/Sidebar.tsx | Adds debug logging (should be removed). |
| packages/blend/lib/components/MenuV2/MenuV2.tsx | Locks dropdown interaction only when asModal is true. |
| packages/blend/lib/components/Menu/Menu.tsx | Locks dropdown interaction only when asModal is true. |
| packages/blend/lib/components/Directory/NavItem.tsx | Switches to TooltipV2 + truncation-aware tooltip behavior; adjusts icon-only padding. |
| packages/blend/lib/components/Directory/directory.tokens.ts | Adds tokenized iconOnlyPadding for NavItem layout. |
| packages/blend/lib/components/common/TruncatedTextWithTooltipV2/utils.ts | Utility for tooltip content selection. |
| packages/blend/lib/components/common/TruncatedTextWithTooltipV2/types.ts | Public prop types for truncation-aware tooltip component. |
| packages/blend/lib/components/common/TruncatedTextWithTooltipV2/TruncatedTextWithTooltipV2.tsx | Adds truncation-detection wrapper that only shows tooltip when needed. |
| packages/blend/lib/components/common/TruncatedTextWithTooltipV2/index.ts | Barrel export for the new common component. |
| packages/blend/lib/components/common/index.ts | Exposes TruncatedTextWithTooltipV2 from common exports. |
| packages/blend/Design-docs/Sidebar/SidebarDoc.md | Adds design/usage documentation for SidebarV2. |
| packages/blend/tests/components/SidebarV2/utils.test.ts | Unit tests for SidebarV2 utility functions. |
| packages/blend/tests/components/SidebarV2/SidebarV2.test.tsx | Main component tests for SidebarV2 behavior. |
| packages/blend/tests/components/SidebarV2/SidebarV2.parts.test.tsx | Tests for SidebarV2 subcomponents/composition. |
| packages/blend/tests/components/SidebarV2/SidebarV2.accessibility.test.tsx | Axe + ARIA behavior tests for SidebarV2. |
| packages/blend/tests/components/SidebarV2/SecondarySidebar.test.tsx | Tests for secondary rail behavior. |
| apps/storybook/stories/components/SidebarV2/SidebarV2.stories.tsx | Storybook stories demonstrating SidebarV2 configurations. |
| apps/site/src/demos/SidebarV2Demo.tsx | Adds a comprehensive site demo for SidebarV2. |
| apps/site/src/App.tsx | Switches app demo composition to include SidebarV2 demo (currently incorrect/duplicated). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 52 out of 52 changed files in this pull request and generated 9 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 54 out of 54 changed files in this pull request and generated 4 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 55 out of 55 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…-refactor-sidebar-v2
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 55 out of 55 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 58 out of 58 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 58 out of 58 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 58 out of 58 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 58 out of 58 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 58 out of 58 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 58 out of 59 changed files in this pull request and generated 5 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…yed deps Agent-Logs-Url: https://github.com/juspay/blend-design-system/sessions/4dbc71f9-f688-4826-aa65-862a24cbcef3 Co-authored-by: vinitkhandal717 <205167873+vinitkhandal717@users.noreply.github.com>
…-refactor-sidebar-v2
…-refactor-sidebar-v2
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Issue Ticket
Closes #1250