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

[AlanGreene]

What package(s) are you using?

• [x] carbon-components - 10.6.1 (latest)
• [x] 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

[joshblack]

Should be closed by https://github.com/carbon-design-system/carbon/pull/4349! Let me know if that isn't the case and I'd be happy to re-open 😄

[AlanGreene]

Apologies for the delay, I completely lost track of this one. I've just updated to 10.9.2/7.9.2 and confirmed it's resolved 👍 Thanks

[KimWooHyun]

@joshblack Hi josh,

I still having the same problem with ts 😢

What package(s) are you using?

• [x] carbon-components - 10.10.1
• [x] carbon-components-react - 7.10.1
• [x] types/carbon-components-react - 7.6.15

Detailed description

console

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 Link)
    in Link (created by ForwardRef(SideNavMenuItem))
    in li (created by ForwardRef(SideNavMenuItem))
    in ForwardRef(SideNavMenuItem) (at Sidebar/index.tsx:26)
    in ul (created by SideNavItems)
    in SideNavItems (at Sidebar/index.tsx:24)
    in nav (created by ForwardRef(SideNav))
    in ForwardRef(SideNav) (at Sidebar/index.tsx:23)
    in Sidebar (at Header/index.tsx:26)
    in header (created by Header)
    in Header (at Header/index.tsx:15)
    in Header (at Layout/index.tsx:25)
    in div (at Layout/index.tsx:24)
    in render (created by HeaderContainer)
    in HeaderContainer (at Layout/index.tsx:16)
    in Layout (at Payment/index.tsx:62)
    in Payment (created by Context.Consumer)
    in Route (at App.tsx:34)
    in Route (at App.tsx:56)
    in Switch (at App.tsx:52)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.tsx:51)
    in ApolloProvider (at App.tsx:50)
    in App (at src/index.tsx:7)

using component

// isSideNavExpanded is props

<SideNav aria-label="Side navigation" isRail expanded={isSideNavExpanded}>
  <SideNavItems>
    <SideNavMenuItem href="" aria-current='page'>test</SideNavMenuItem>
  </SideNavItems>
</SideNav>

[muum]

Hi @joshblack ,

The error is going on. I'm using the following packages:

"carbon-components": "^10.11.2",
"carbon-components-react": "^7.10.2",
"carbon-custom-elements": "^1.0.0-beta.12",
"carbon-icons": "^7.0.7",

[AlanGreene]

@muratumutlu I'm not a Carbon developer. I'm just a user like you who reported an issue I found, and it was resolved for my use case in the versions I mentioned in my last comment.

You should probably open a new issue with details of what you're seeing, including a codesandbox reproducing it if possible. That will make it easier for the Carbon team to debug.

[muum]

Sorry @AlanGreene , I've seen your message about "it's resolved" and then I post this message. Now I'm changing my message. Thank you for the information.

[trusinaj]

Im having same issue as @KimWooHyun or @AlanGreene in version:
"carbon-components": "10.12.0",
"carbon-components-react": "7.12.0",

[hsu022210]

Hi @joshblack , I'm also having the issue with
"carbon-components": "10.12.0",
"carbon-components-react": "7.12.0"

[tw15egan]

Does anyone have a link to a reproducible example?

The example using isSideNavExpanded in storybook does not seem to be throwing that warning...

https://react.carbondesignsystem.com/iframe.html?id=ui-shell--sidenav-rail-w-header

[AlanGreene]

I'm not seeing the issue, but React only emits those warnings in dev mode so you'd need to run the storybook locally in dev mode to see it if it's happening there.

[zigzactly]

Hi there, i am also having this issue. I will see if i have the time to get a basic reproducible example, but im not doing anything differently from the storybook.

(Im a little behind on the versions)
"carbon-components": "^10.11.2",
"carbon-components-react": "^7.11.3",

[kubijo]

It's still there on

{
  "carbon-components": "^10.15.0",
  "carbon-components-react": "^7.15.0"
}