React does not recognize the `isSideNavExpanded` prop on a DOM element

What package(s) are you using?

• carbon-components - 10.6.1 (latest)
• carbon-components-react - 7.6.1 (latest)

Detailed description

Describe in detail the issue you’re having.

It looks like https://github.com/carbon-design-system/carbon/pull/3626 introduced a warning about unrecognized props being applied to DOM elements.

Warning: React does not recognize the `isSideNavExpanded` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `issidenavexpanded` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in a (created by Context.Consumer)
    in Link (created by Context.Consumer)
    in NavLink (created by Link)
    in Link (created by ForwardRef(SideNavMenuItem))

here, the props (including isSideNavExpanded) are being spread onto element: https://github.com/carbon-design-system/carbon/blob/99f12f98e226b2ab1872b7379167d827e4fe7bd5/packages/react/src/components/UIShell/Link.js#L19

Is this issue related to a specific component?

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

The Carbon components should not be passing through all props like this, instead they should filter out those that are not supported / relevant for the target component / element, or explicitly pass only the expected props to their children.

Having these warnings causes a lot of noise in logs, both in the browser and in tests, making it harder to spot / debug genuine problems.

Steps to reproduce the issue

This can be reproduced by running the storybook in dev mode

1. from packages/react: npm run storybook
2. navigate to http://localhost:9000/?path=/story/ui-shell--fixed-sidenav
3. see the warning in the browser console

Please create a reduced test case in CodeSandbox

• Style and vanilla JS: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox
• React: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

Additional information

• Screenshots or code
• Notes

[kubijo]

If I understood it correctly this should be the link https://codesandbox.io/s/magical-clarke-ldj9i?file=/src/index.js

[emyarod]

@kubijo would you mind sharing a reduced test case in a ZIP if Code Sandbox is still not playing nice?