Remove support for for Breadcrumb, SubNav, TabNav, UnderlineNav

.changeset/popular-rivers-warn.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Remove support for `activeClassName` for Breadcrumb, SubNav, TabNav, UnderlineNav

docs/content/Breadcrumbs.mdx

@@ -18,11 +18,6 @@ Breadcrumbs are used to show taxonomical context on pages that are many levels d
 - Do not have a section-level navigation
 - May need the ability to quickly go back to the previous (parent) page
 
-To use Breadcrumbs with [react-router](https://github.com/ReactTraining/react-router) or
-[react-router-dom](https://www.npmjs.com/package/react-router-dom), pass
-`as={NavLink}` and omit the `selected` prop.
-This ensures that the NavLink gets `activeClassName='selected'`
-
 ## Examples
 
 ```jsx live

docs/content/SubNav.mdx

@@ -6,13 +6,6 @@ status: Alpha
 
 import data from '../../src/SubNav/SubNav.docs.json'
 
-Use the SubNav component for navigation on a dashboard-type interface with another set of navigation components above it. This helps distinguish navigation hierarchy.
-
-To use SubNav with [react-router](https://github.com/ReactTraining/react-router) or
-[react-router-dom](https://www.npmjs.com/package/react-router-dom), pass
-`as={NavLink}` and omit the `selected` prop.
-This ensures that the NavLink gets `activeClassName='selected'`
-
 **Attention:** Make sure to properly label your `SubNav` with an `aria-label` to provide context about the type of navigation contained in `SubNav`.
 
 ## Examples

docs/content/TabNav.mdx

@@ -6,11 +6,6 @@ status: Alpha
 
 import data from '../../src/TabNav/TabNav.docs.json'
 
-To use TabNav with [react-router](https://github.com/ReactTraining/react-router) or
-[react-router-dom](https://www.npmjs.com/package/react-router-dom), pass
-`as={NavLink}` and omit the `selected` prop.
-This ensures that the NavLink gets `activeClassName='selected'`
-
 **Attention:** Make sure to properly label your `TabNav` with an `aria-label` to provide context about the type of navigation contained in `TabNav`.
 
 ## Examples

docs/content/UnderlineNav.mdx

@@ -12,11 +12,6 @@ Use the UnderlineNav component to style navigation with a minimal underlined sel
 
 UnderlineNav is deprecated and will be replaced by the draft `UnderlineNav` in the next major release. See [the draft UnderlineNav's docs](/drafts/UnderlineNav2) for more details.
 
-To use UnderlineNav with [react-router](https://github.com/ReactTraining/react-router) or
-[react-router-dom](https://www.npmjs.com/package/react-router-dom), pass
-`as={NavLink}` and omit the `selected` prop.
-This ensures that the NavLink gets `activeClassName='selected'`
-
 **Attention:** Make sure to properly label your `UnderlineNav` with an `aria-label` to provide context about the type of navigation contained in `UnderlineNav`.
 
 ## Examples

src/Breadcrumbs/Breadcrumbs.tsx

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

src/Breadcrumbs/__tests__/BreadcrumbsItem.test.tsx

@@ -20,9 +20,4 @@ describe('Breadcrumbs.Item', () => {
   it('respects the "selected" prop', () => {
     expect(render(<Breadcrumbs.Item selected />)).toMatchSnapshot()
   })
-
-  it('adds activeClassName={SELECTED_CLASS} when it gets a "to" prop', () => {
-    const Link = ({theme: _ignoredTheme, ...props}: Record<string, unknown>) => <div {...props} />
-    expect(render(<Breadcrumbs.Item as={Link} to="#" />)).toMatchSnapshot()
-  })
 })

src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap

@@ -1,32 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Breadcrumbs.Item adds activeClassName={SELECTED_CLASS} when it gets a "to" prop 1`] = `
-.c0 {
-  color: #0969da;
-  display: inline-block;
-  font-size: 14px;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c0:hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c0.selected {
-  color: #1F2328;
-  pointer-events: none;
-}
-
-<div
-  activeClassName="selected"
-  aria-current={null}
-  className="c0"
-  to="#"
-/>
-`;
-
 exports[`Breadcrumbs.Item renders consistently 1`] = `
 .c0 {
   color: #0969da;

src/SubNav/SubNav.tsx

@@ -63,7 +63,6 @@ type StyledSubNavLinkProps = {
 } & SxProp
 
 const SubNavLink = styled.a.attrs<StyledSubNavLinkProps>(props => ({
-  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,6 @@ export type TabNavLinkProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLA
 } & SxProp
 
 const TabNavLink = styled.a.attrs<TabNavLinkProps>(props => ({
-  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/UnderlineNav.tsx

@@ -70,7 +70,6 @@ type StyledUnderlineNavLinkProps = {
 } & SxProp
 
 const UnderlineNavLink = styled.a.attrs<StyledUnderlineNavLinkProps>(props => ({
-  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')};

src/__tests__/SubNavLink.test.tsx

@@ -22,9 +22,4 @@ describe('SubNav.Link', () => {
   it('respects the "selected" prop', () => {
     expect(render(<SubNav.Link selected />)).toMatchSnapshot()
   })
-
-  it('adds activeClassName={SELECTED_CLASS} when it gets a "to" prop', () => {
-    const Link = ({theme: _ignoredTheme, ...props}: Record<string, unknown>) => <div {...props} />
-    expect(render(<SubNav.Link as={Link} to="#" />)).toMatchSnapshot()
-  })
 })

src/__tests__/UnderlineNavLink.test.tsx

@@ -22,9 +22,4 @@ describe('UnderlineNav.Link', () => {
   it('respects the "selected" prop', () => {
     expect(render(<UnderlineNav.Link selected />)).toMatchSnapshot()
   })
-
-  it('adds activeClassName={SELECTED_CLASS} when it gets a "to" prop', () => {
-    const Link = ({theme: _ignoredTheme, ...props}: Record<string, unknown>) => <div {...props} />
-    expect(render(<UnderlineNav.Link as={Link} to="#" />)).toMatchSnapshot()
-  })
 })

src/__tests__/__snapshots__/SubNavLink.test.tsx.snap

@@ -1,72 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SubNav.Link adds activeClassName={SELECTED_CLASS} when it gets a "to" prop 1`] = `
-.c0 {
-  padding-left: 16px;
-  padding-right: 16px;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 20px;
-  min-height: 34px;
-  color: #1F2328;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  border-top: 1px solid #d0d7de;
-  border-bottom: 1px solid #d0d7de;
-  border-right: 1px solid #d0d7de;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c0:first-of-type {
-  border-top-left-radius: 6px;
-  border-bottom-left-radius: 6px;
-  border-left: 1px solid #d0d7de;
-}
-
-.c0:last-of-type {
-  border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px;
-}
-
-.c0:hover,
-.c0:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  background-color: #f6f8fa;
-  -webkit-transition: background-color 0.2s ease;
-  transition: background-color 0.2s ease;
-}
-
-.c0:hover .SubNav-octicon,
-.c0:focus .SubNav-octicon {
-  color: #656d76;
-}
-
-.c0.selected {
-  color: #ffffff;
-  background-color: #0969da;
-  border-color: #0969da;
-}
-
-.c0.selected .SubNav-octicon {
-  color: #ffffff;
-}
-
-<div
-  activeClassName="selected"
-  className="c0 SubNav-item"
-  to="#"
-/>
-`;
-
 exports[`SubNav.Link renders consistently 1`] = `
 .c0 {
   padding-left: 16px;

src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap

@@ -1,65 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`UnderlineNav.Link adds activeClassName={SELECTED_CLASS} when it gets a "to" prop 1`] = `
-.c0 {
-  padding: 16px 8px;
-  margin-right: 16px;
-  font-size: 14px;
-  line-height: 1.5;
-  color: #1F2328;
-  text-align: center;
-  border-bottom: 2px solid transparent;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c0:hover,
-.c0:focus {
-  color: #1F2328;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  border-bottom-color: rgba(175,184,193,0.2);
-  -webkit-transition: border-bottom-color 0.2s ease;
-  transition: border-bottom-color 0.2s ease;
-}
-
-.c0:hover .PRC-UnderlineNav-octicon,
-.c0:focus .PRC-UnderlineNav-octicon {
-  color: #656d76;
-}
-
-.c0.PRC-selected {
-  color: #1F2328;
-  border-bottom-color: #fd8c73;
-}
-
-.c0.PRC-selected .PRC-UnderlineNav-octicon {
-  color: #1F2328;
-}
-
-.c0:focus:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid #0969da;
-  outline-offset: -8px;
-}
-
-.c0:focus:not(:disabled):not(:focus-visible) {
-  outline: solid 1px transparent;
-}
-
-.c0:focus-visible:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid #0969da;
-  outline-offset: -8px;
-}
-
-<div
-  activeClassName="selected"
-  className="c0 PRC-UnderlineNav-item"
-  to="#"
-/>
-`;
-
 exports[`UnderlineNav.Link renders consistently 1`] = `
 .c0 {
   padding: 16px 8px;