Describe the bug
A clear and concise description of what the bug is.
Note: As this is a public repo, please be careful not to include details or screenshots from unreleased GitHub products or features. In most cases, a good bug report should be able to describe the new component without including business logic or feature details, but if you must discuss context relating to an unreleased feature, please open an issue in the private Design Systems repo and link to it here.
When using React Router links, with Primer components, primer tries to forward an activeClassName, as was exposed in the v5 and lower apis. React router v6 no longer supports this classname, so it gets dropped onto the dom, and causes the console warning in dev Warning: React does not recognize the activeClassNameprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercaseactiveclassname instead. If you accidentally passed it from a parent component, remove it from the DOM element.
A workaround, also in the sandbox, exists, by manually filtering it, but that's a bit annoying
import"./styles.css";import{TabNav}from"@primer/react";import{BrowserRouter,Link}from"react-router-dom";constFilteredActiveClassName=({ activeClassName, ...props})=>{return<Link{...props}/>;};exportdefaultfunctionApp(){return(<BrowserRouter><divclassName="App"><TabNav><TabNav.Linkas={Link}to="/">
No filtering of prop
</TabNav.Link><TabNav.Linkas={FilteredActiveClassName}to="/">
Filtered dom prop
</TabNav.Link></TabNav><h2>Start editing to see some magic happen!</h2></div></BrowserRouter>);}<navclass="TabNav__TabNavBody-sc-1ab407u-1 gXszLR"><aactiveclassname="selected" class="TabNav__TabNavLink-sc-1ab407u-2 eatcUG TabNav-item" href="/">
No filtering of prop
</a><aclass="TabNav__TabNavLink-sc-1ab407u-2 eatcUG TabNav-item" href="/">
Filtered dom prop
</a></nav>
To Reproduce
I built a small sandbox for this, related to tab nav, but it seems other components like sidenav do similar
https://codesandbox.io/s/still-https-5p2wb?file=/src/App.js
Expected behavior
activeClassName is not passed if not necessary (or not included on the as={} component)
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
Smartphone (please complete the following information):
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
Additional context
Add any other context about the problem here.
Describe the bug
A clear and concise description of what the bug is.
Note: As this is a public repo, please be careful not to include details or screenshots from unreleased GitHub products or features. In most cases, a good bug report should be able to describe the new component without including business logic or feature details, but if you must discuss context relating to an unreleased feature, please open an issue in the private Design Systems repo and link to it here.
When using React Router links, with Primer components, primer tries to forward an activeClassName, as was exposed in the v5 and lower apis. React router v6 no longer supports this classname, so it gets dropped onto the dom, and causes the console warning in dev
Warning: React does not recognize theactiveClassNameprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercaseactiveclassnameinstead. If you accidentally passed it from a parent component, remove it from the DOM element.A workaround, also in the sandbox, exists, by manually filtering it, but that's a bit annoying
To Reproduce
I built a small sandbox for this, related to tab nav, but it seems other components like sidenav do similar
https://codesandbox.io/s/still-https-5p2wb?file=/src/App.js
Expected behavior
activeClassNameis not passed if not necessary (or not included on theas={}component)Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.