feat: add enterDelayMs-type prop to delay displaying SideNav component

[Shankar-CodeJunkie]

Closes #13791

Add enterDelayMs-type prop to Specify the duration in milliseconds to delay before displaying the sidenavigation

Changelog

Changed

• Modified SideNav.tsx to include a new prop of type enterDelayMs to specify the duration in milliseconds to delay before displaying the sidenavigation
• Modified UIShell.stories.js to include a playground story, where developers can test with two input params from browser. Earlier, the playground part for UIShell wasn't available, and hence I created a new one that expects two props ( isRail & enterDelayMs

Testing / Reviewing

• Ran yarn test
• I have also ran story book testing and modified the playground by giving different duration for prop enterDelayMs and I see the delay in opening up the sidenavigation.

[netlify]

✅ Deploy Preview for carbon-components-react ready!

Name	Link
🔨 Latest commit	ad2deb3
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/6477bed49ebb1f000884904c
😎 Deploy Preview	https://deploy-preview-13850--carbon-components-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	ad2deb3
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/6477bed4c7b98e0008611620
😎 Deploy Preview	https://deploy-preview-13850--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[Shankar-CodeJunkie]

I see one of the test is failing and I am investigating the reason for it . I will push the changes, once I have a fix for it . Thanks

[tw15egan]

Visual regressions due to class name removal, playground story respects the enter delay but it just flashes open and closes immediately.

[Shankar-CodeJunkie]

@tw15egan : Thanks for comments. I made the required changes and push the code to the PR.

[tw15egan]

I left some comments, testing locally I could achieve the same functionality without the additional classes. Let me know if I missed anything though!

[Shankar-CodeJunkie]

Thanks @tw15egan . Yes, I removed that additional blocks in the scss file, and it worked fine without the need of additional class.

[tw15egan]

Small documentation issue, but the functionality looks great. Thanks for working on this!

[francinelucca]

This is looking great! I agree with @tw15egan , @Shankar-CodeJunkie could we put the controls in the sidenav rail story https://deploy-preview-13850--carbon-components-react.netlify.app/?path=/story/components-ui-shell--side-nav-rail instead of adding a playground for it? I believe adding a playground to the UIShell would involve a bigger effort than just these two controls since it's an umbrella for a lot of subcomps and we might not want to tackle that in the scope of this pr

[Shankar-CodeJunkie]

@tw15egan @francinelucca : As recommended, I've removed the playground story and modified the existing
SideNav w/ Rail stories by adding the props for enterDelayMs for 1 and 3 seconds.

[francinelucca]

This is almost there, @Shankar-CodeJunkie we meant to add a customizable control for the enterDelayMs prop so that it's customizable in the story, here's an example with ClickableTile and the disabled prop: https://react.carbondesignsystem.com/?path=/story/components-tile--clickable

https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Tile/Tile.stories.js#L79

[Shankar-CodeJunkie]

@francinelucca !. Oh yes .. I see it now, what needs to be changed ! .. Thanks for your help !

When I make the change, I see an extra - appears on the description column, and I m not sure how to remove it . Please let me know if there is a way to remove it. I tried to check other stories, and I am not sure, where the description is being rendered on the page

[tw15egan]

@Shankar-CodeJunkie It seems like it's having an issue pulling the description from the SideNav.propTypes definition inside SideNav.tsx. Not sure why though 🤔

[francinelucca]

Not sure why it's adding the '-' in the bottom but I wouldn't worry about it, other than that LGTM

[Shankar-CodeJunkie]

Thanks @francinelucca and @tw15egan for your help !.