Export new UnderlineNav in main and deprecate the other

.changeset/slow-humans-visit.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Promoto newly written UnderlineNav to the main bundle and deprecate the old UnderlineNav

src/__tests__/__snapshots__/exports.test.ts.snap

@@ -122,6 +122,7 @@ exports[`@primer/react/decprecated should not update exports without a semver ch
   "Relative",
   "SelectMenu",
   "Sticky",
+  "UnderlineNav",
 ]
 `;
 

src/__tests__/UnderlineNav.test.tsx → src/__tests__/deprecated/UnderlineNav.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import {UnderlineNav} from '..'
-import {render, rendersClass, behavesAsComponent, checkExports} from '../utils/testing'
+import UnderlineNav from '../../deprecated/UnderlineNav'
+import {render, rendersClass, behavesAsComponent, checkExports} from '../../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import {axe} from 'jest-axe'
 

src/__tests__/UnderlineNav.types.test.tsx → src/__tests__/deprecated/UnderlineNav.types.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import UnderlineNav from '../UnderlineNav'
+import UnderlineNav from '../../deprecated/UnderlineNav'
 
 export function shouldAcceptCallWithNoProps() {
   return (

src/__tests__/UnderlineNavLink.test.tsx → src/__tests__/deprecated/UnderlineNavLink.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import {UnderlineNav} from '..'
-import {render, behavesAsComponent} from '../utils/testing'
+import UnderlineNav from '../../deprecated/UnderlineNav'
+import {render, behavesAsComponent} from '../../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 

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

@@ -0,0 +1,178 @@
+// 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: #24292f;
+  text-align: center;
+  border-bottom: 2px solid transparent;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:hover,
+.c0:focus {
+  color: #24292f;
+  -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: #57606a;
+}
+
+.c0.PRC-selected {
+  color: #24292f;
+  border-bottom-color: #fd8c73;
+}
+
+.c0.PRC-selected .PRC-UnderlineNav-octicon {
+  color: #24292f;
+}
+
+.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;
+  margin-right: 16px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #24292f;
+  text-align: center;
+  border-bottom: 2px solid transparent;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:hover,
+.c0:focus {
+  color: #24292f;
+  -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: #57606a;
+}
+
+.c0.PRC-selected {
+  color: #24292f;
+  border-bottom-color: #fd8c73;
+}
+
+.c0.PRC-selected .PRC-UnderlineNav-octicon {
+  color: #24292f;
+}
+
+.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;
+}
+
+<a
+  className="c0 PRC-UnderlineNav-item"
+/>
+`;
+
+exports[`UnderlineNav.Link respects the "selected" prop 1`] = `
+.c0 {
+  padding: 16px 8px;
+  margin-right: 16px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #24292f;
+  text-align: center;
+  border-bottom: 2px solid transparent;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:hover,
+.c0:focus {
+  color: #24292f;
+  -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: #57606a;
+}
+
+.c0.PRC-selected {
+  color: #24292f;
+  border-bottom-color: #fd8c73;
+}
+
+.c0.PRC-selected .PRC-UnderlineNav-octicon {
+  color: #24292f;
+}
+
+.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;
+}
+
+<a
+  className="c0 PRC-UnderlineNav-item PRC-selected"
+  selected={true}
+/>
+`;

src/UnderlineNav.tsx → src/deprecated/UnderlineNav.tsx

@@ -2,10 +2,10 @@ import classnames from 'classnames'
 import {To} from 'history'
 import React from 'react'
 import styled from 'styled-components'
-import {get} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-import getGlobalFocusStyles from './_getGlobalFocusStyles'
+import {get} from '../constants'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
+import getGlobalFocusStyles from '../_getGlobalFocusStyles'
 
 const ITEM_CLASS = 'PRC-UnderlineNav-item'
 const SELECTED_CLASS = 'PRC-selected'
@@ -111,4 +111,7 @@ const UnderlineNavLink = styled.a.attrs<StyledUnderlineNavLinkProps>(props => ({
 UnderlineNavLink.displayName = 'UnderlineNav.Link'
 
 export type UnderlineNavLinkProps = ComponentProps<typeof UnderlineNavLink>
+/**
+ * @deprecated Use the new responsive and accessible UnderlineNav. See https://primer.style/react/UnderlineNav for more details.
+ */
 export default Object.assign(UnderlineNav, {Link: UnderlineNavLink})

src/deprecated/index.ts

@@ -72,3 +72,7 @@ export type {
   ButtonCloseProps,
 } from './Button'
 // end of v35.0.0
+
+// Will be deprecated in v36.0.0
+export {default as UnderlineNav} from './UnderlineNav'
+export type {UnderlineNavProps, UnderlineNavLinkProps} from './UnderlineNav'

src/drafts/index.ts

@@ -23,8 +23,6 @@ export type {MarkdownViewerProps, InteractiveMarkdownViewerProps} from './Markdo
 export {default as MarkdownEditor} from './MarkdownEditor'
 export * from './MarkdownEditor'
 
-export * from '../UnderlineNav2'
-
 export * from './hooks'
 
 export * from '../TreeView'
@@ -33,3 +31,4 @@ export * from '../TreeView'
 export * from '../NavList'
 export * from '../SegmentedControl'
 export * from '../SplitPageLayout'
+export * from '../UnderlineNav2'

src/index.ts

@@ -170,8 +170,8 @@ export {default as Tooltip} from './Tooltip'
 export type {TooltipProps} from './Tooltip'
 export {default as Truncate} from './Truncate'
 export type {TruncateProps} from './Truncate'
-export {default as UnderlineNav} from './UnderlineNav'
-export type {UnderlineNavProps, UnderlineNavLinkProps} from './UnderlineNav'
+export {UnderlineNav} from './UnderlineNav2'
+export type {UnderlineNavProps, UnderlineNavItemProps} from './UnderlineNav2'
 
 export {default as Checkbox} from './Checkbox'
 export type {CheckboxProps} from './Checkbox'