Stop rendering activeClassName when there is no to prop is passed for react-router (#3061)

* do not render the activeclassname when there is no prop 'to'

* add changeset

Author: broccolinisoup

.changeset/stupid-bats-end.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Stop rendering `activeClassName` when there is no `to` prop is passed for react-router (TabNav, SubNav, BreadCrumb, UnderlineNav v1)

src/Breadcrumbs/Breadcrumbs.tsx

@@ -59,7 +59,7 @@ type StyledBreadcrumbsItemProps = {
 } & SxProp
 
 const BreadcrumbsItem = styled.a.attrs<StyledBreadcrumbsItemProps>(props => ({
-  activeClassName: typeof props.to === 'string' ? 'selected' : '',
+  activeClassName: typeof props.to === 'string' ? 'selected' : undefined,
   className: classnames(props.selected && SELECTED_CLASS, props.className),
   'aria-current': props.selected ? 'page' : null,
 }))<StyledBreadcrumbsItemProps>`

src/SubNav.tsx

@@ -63,7 +63,7 @@ type StyledSubNavLinkProps = {
 } & SxProp
 
 const SubNavLink = styled.a.attrs<StyledSubNavLinkProps>(props => ({
-  activeClassName: typeof props.to === 'string' ? 'selected' : '',
+  activeClassName: typeof props.to === 'string' ? 'selected' : undefined,
   className: classnames(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className),
 }))<StyledSubNavLinkProps>`
   padding-left: ${get('space.3')};

src/TabNav/TabNav.tsx

@@ -81,7 +81,7 @@ export type TabNavLinkProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLA
 } & SxProp
 
 const TabNavLink = styled.a.attrs<TabNavLinkProps>(props => ({
-  activeClassName: typeof props.to === 'string' ? 'selected' : '',
+  activeClassName: typeof props.to === 'string' ? 'selected' : undefined,
   className: classnames(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className),
   role: 'tab',
   'aria-selected': !!props.selected,

src/UnderlineNav.tsx

@@ -70,7 +70,7 @@ type StyledUnderlineNavLinkProps = {
 } & SxProp
 
 const UnderlineNavLink = styled.a.attrs<StyledUnderlineNavLinkProps>(props => ({
-  activeClassName: typeof props.to === 'string' ? 'selected' : '',
+  activeClassName: typeof props.to === 'string' ? 'selected' : undefined,
   className: classnames(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className),
 }))<StyledUnderlineNavLinkProps>`
   padding: ${get('space.3')} ${get('space.2')};