feat(SideNav): add description and onLevelChange callback

[saurabhdaware]

Description

• Add description for L2 items
• Add onVisibleLevelChange callback

Changes

Additional Information

Component Checklist

• Update Component Status Page
• Perform Manual Testing in Other Browsers
• Add KitchenSink Story
• Add Interaction Tests (if applicable)
• Add changeset

[changeset-bot]

🦋 Changeset detected

Latest commit: be18e87

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@razorpay/blade	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

✅ PR title follows Conventional Commits specification.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit be18e87:

Sandbox	Source
razorpay/blade: basic	Configuration

[rzpcibot]

Bundle Size Report

Updated Components

Status	Component	Base Size (kb)	Current Size (kb)	Diff
⬆	SideNav, SideNavLink, SideNavLevel, SideNavSection, SideNavItem, SideNavFooter, SideNavBody, SIDE_NAV_EXPANDED_L1_WIDTH_BASE, SIDE_NAV_EXPANDED_L1_WIDTH_XL	33.382	33.609	+0.227 KB
⬆	SearchInput	34.737	34.738	+0.001 KB

Generated by 🚫 dangerJS against be18e87

[tewarig]

Here, onLevelChange is being called twice when I am on the same level.

When I am on level 2, I hover over level 1 items, and the level gets changed, triggering onLevelChange. Then I click on a level 1 item. Although the level has not changed, onLevelChange is still being called.

SideNav.mov

[tewarig]

can we have a check for this ? we can throw warning in console if description is provided to L1 items ?

[saurabhdaware]

makes sense. We can throw dev-only error. I was avoiding production error because if backend API mistakenly sends description then we don't want the sidenav to error out completely.

[saurabhdaware]

When I am on level 2, I hover over level 1 items, and the level gets changed, triggering onLevelChange. Then I click on a level 1 item. Although the level has not changed, onLevelChange is still being called.

So I was kind of thinking onLevelChange as callback that also gets triggered when the active level changes. So in future we can have argument of activeLevel alongside visibleLevel. For the scenario in video, the activeLevel changes when you click the item in L1.

But yes without the activeLevel argument it looks confusing. What do you think should we add activeLevel argument right now or should we only cover visibility change as activeLevel change can also be derived from which item is selected.

[saurabhdaware]

@tewarig Renamed the prop onVisibleLevelChange and calling it only once now when L1 is hovered and clicked

[anuraghazra]

onVisualLevelChange