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,13 +1,13 @@
 import React from 'react'
-import {UnderlineNav} from '..'
-import {render, rendersClass, behavesAsComponent, checkExports} from '../utils/testing'
+import {UnderlineNav} from '../../deprecated'
+import {render, rendersClass, behavesAsComponent, checkExports} from '../../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import {axe} from 'jest-axe'
 
 describe('UnderlineNav', () => {
   behavesAsComponent({Component: UnderlineNav})
 
-  checkExports('UnderlineNav', {
+  checkExports('deprecated/UnderlineNav', {
     default: UnderlineNav,
   })
 

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'
 
 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'
+import {render, behavesAsComponent} from '../../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 

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'