Sidebar spacing changes when collapsed and hovered over

[KyeMaloy97]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you're having.

When the sidebar collapses and is hovered over. the spacing changes and makes the icons move about.

Is this issue related to a specific component?

Yes, SideNav and SideNavItems, SideNavLink

What did you expect to happen? What happened instead? What would you like to
see changed?

Stop the sidebar spacing changing on hover.

What browser are you working in?

Safari and Chrome on macOS.

What version of the Carbon Design System are you using?

Latest.

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

Needs to be fixed for a Q1 2021 release but ideally before the end of Q4 2020.

Steps to reproduce the issue

1. Create SideNav with Items inside
2. Make it collapsible
3. Move mouse into sidebar area and notice how the icons move as their spacing changes.

https://codesandbox.io/s/wizardly-thunder-y0hl5?file=/src/index.js

Additional information

In Slack, Andrew Wang suggested the issue seems to be that it looks like there’s an inline height and width style being set on li s when the nav is hovered over.

[KyeMaloy97]

Some additional info/chat from the Slack thread in case it is helpful in fixing the issue:

Dragos Ristici: "Looks like an overwrite on hover from the _site-nav.scss (line 315 over line 310) for the bx--side-nav__item class, because the hover state (with auto width and height) overwrites the 3rem width & height initial set. If I set auto for the width and height for the .bx--side-nav__item items from the start, the problem is gone."

[tw15egan]

PR: #7646