Add enterDelayMs-type prop to SideNav isRail

[ecrvich]

The problem

<SideNav isRail> is the most elegant nav solution Carbon offers, and it truly is great...except in one regard, where it is just plain irritating: it is wayyyyy too eager to open on mouse hover. Most of our pages contain DataTables, which consistently have expansion and checkbox components at their left edges. So very frequently, people accidentally mouse-stray a little too far left and into the rail zone, which causes the sidenav to flash open instantly...so then they have to move the mouse back to the right a significant distance to get out of the now-open sidenav area to get it to close...then CAREFULLY move the mouse back to the left edge of the page body without accidentally opening the nav again. This happens all day long, so it's become a constant frustration and usability issue.

Horizontal space is extremely precious/valuable in our app (DataTables galore with lots of columns), so isRail is a must, and for the same reason we can't just add arbitrary dead space between the rail and the table to act as accidental mouse-stray mitigation.

The solution

Why not offer a prop like your Tooltip component has, enterDelayMs? That way we can prevent the nav from opening accidentally when the mouse strays into the rail zone for just a fraction of a second. People are aiming for the expansion chevron or checkbox, so the mouse cursor only strays into the rail for, say, a tenth of a second. If people linger for, I dunno...half a second to a full second, then sure...they obviously want to stay there and open the nav. We'll figure out the ideal delay ourselves with trials once the option is available.

Taylor Jones thought this was worthy of opening an enhancement for, and IMHO this would really improve SideNav usability / user happiness. Hopefully it won't be a lot of work, so a very nice ROI.

Examples

Just view your own example here:

https://react.carbondesignsystem.com/?path=/story/components-ui-shell--side-nav-rail

This has a lot of dead buffer space between the body and nav to prevent accidental strays, mind you, but the idea is similar: do a quick mouse circle around the page body and get close to the rail...the instant you stray into the rail area, BOOM! the nav slams open. It's just way too eager. If it only just waited a small amount of time by default, even that would be a big improvement...but a user-specific delay would be best (so we can choose how long is long enough).

Application/PAL

CDD Hub

Business priority

None

Available extra resources

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[tay1orjones]

This would mirror the approach taken for Tooltip in v11 having an enterDelayMs prop added to improve accessibility support by enabling configurable timeouts for popups.

[sstrubberg]

Thanks for drumming up this issue @ecrvich, I've added it to our backlog, but due to constraints from our roadmap, we probably won't get to this one soon. We're totally open to a community contribution though.

[Shankar-CodeJunkie]

@sstrubberg & @tay1orjones : Can I work on this issue ?

[Shankar-CodeJunkie]

@sstrubberg and @tay1orjones : I've created a new pull request for this issue. Please review and let me know in case of any changes needed