Remove components from draft and move UnderlineNav2 to main bundle

.changeset/early-timers-speak.md

@@ -0,0 +1,45 @@
+---
+'@primer/react': major
+---
+
+Remove components from draft bundle
+
+* Move UnderlineNav2 (draft) to the main bundle
+
+```diff 
+- import {UnderlineNav} from '@primer/react/drafts'
++ import {UnderlineNav} from '@primer/react'
+```
+
+TODO: Add a note about how to switch to the new version of UnderlineNav (codemode)
+
+....
+* Remove TreeView from drafts
+
+```diff
+- import {TreeView} from '@primer/react/drafts'
++ import {TreeView} from '@primer/react'
+```
+
+* Remove SegmentedControl from drafts
+
+```diff
+- import {SegmentedControl} from '@primer/react/drafts'
++ import {SegmentedControl} from '@primer/react'
+```
+
+* Remove NavList from drafts
+
+```diff
+- import {NavList} from '@primer/react/drafts'
++ import {NavList} from '@primer/react'
+```
+
+* Remove SplitPageLayout from drafts
+
+```diff
+- import {SplitPageLayout} from '@primer/react/drafts'
++ import {SplitPageLayout} from '@primer/react'
+```
+
+

docs/components/ThemeReferenceTree.js

@@ -1,6 +1,5 @@
 import React, {useState} from 'react'
-import {Box, Text} from '@primer/react'
-import {TreeView} from '@primer/react/drafts'
+import {Box, Text, TreeView} from '@primer/react'
 
 export default function ThemeReferenceTree({themeData}) {
   return (

docs/content/TreeView.mdx

@@ -117,7 +117,7 @@ import {TreeView} from '@primer/react'
 
 ```jsx
 import {Link, useMatch, useResolvedPath, navigate} from 'react-router-dom'
-import {TreeView} from '@primer/react/drafts'
+import {TreeView} from '@primer/react'
 
 function TreeLinkItem({id, to, children}) {
   const resolved = useResolvedPath(to)

docs/content/UnderlineNav.mdx

@@ -1,31 +1,194 @@
 ---
-componentId: underline_nav
 title: UnderlineNav
-status: Alpha
+componentId: underline_nav
+status: Draft
+a11yReviewed: true
+description: Use an underlined nav to allow tab like navigation with overflow behaviour in your UI.
+source: https://github.com/primer/react/tree/main/src/UnderlineNav
+storybook: '/react/storybook/?path=/story/components-underlinenav--playground'
 ---
 
 import data from '../../src/UnderlineNav/UnderlineNav.docs.json'
 
-Use the UnderlineNav component to style navigation with a minimal underlined selected state, typically used for navigation placed at the top of the page.
+```js
+import {UnderlineNav} from '@primer/react'
+```
 
-## Deprecation
+## Examples
 
-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.
+### Simple
 
-**Attention:** Make sure to properly label your `UnderlineNav` with an `aria-label` to provide context about the type of navigation contained in `UnderlineNav`.
+```jsx live drafts
+<UnderlineNav aria-label="Repository">
+  <UnderlineNav.Item aria-current="page">Code</UnderlineNav.Item>
+  <UnderlineNav.Item>Issues</UnderlineNav.Item>
+  <UnderlineNav.Item>Pull Requests</UnderlineNav.Item>
+</UnderlineNav>
+```
 
-## Examples
+### With Icons
 
-```jsx live
-<UnderlineNav aria-label="Main">
-  <UnderlineNav.Link href="#home" selected>
-    Home
-  </UnderlineNav.Link>
-  <UnderlineNav.Link href="#documentation">Documentation</UnderlineNav.Link>
-  <UnderlineNav.Link href="#support">Support</UnderlineNav.Link>
+```jsx live drafts
+<UnderlineNav aria-label="Repository">
+  <UnderlineNav.Item aria-current="page" icon={CodeIcon}>
+    Code
+  </UnderlineNav.Item>
+  <UnderlineNav.Item icon={IssueOpenedIcon} counter={30}>
+    Issues
+  </UnderlineNav.Item>
+  <UnderlineNav.Item icon={GitPullRequestIcon} counter={3}>
+    Pull Requests
+  </UnderlineNav.Item>
+  <UnderlineNav.Item icon={CommentDiscussionIcon}>Discussions</UnderlineNav.Item>
+  <UnderlineNav.Item icon={EyeIcon} counter={9}>
+    Actions
+  </UnderlineNav.Item>
+  <UnderlineNav.Item icon={EyeIcon} counter={7}>
+    Projects
+  </UnderlineNav.Item>
 </UnderlineNav>
 ```
 
+### Overflow Behaviour
+
+Component first hides icons if they present to optimize for space and show as many items as possible. If there is still an overflow, it will display the items that don't fit in the `More` menu.
+
+```javascript noinline live drafts
+const Navigation = () => {
+  const items = [
+    {navigation: 'Code', icon: CodeIcon},
+    {navigation: 'Issues', icon: IssueOpenedIcon, counter: 120},
+    {navigation: 'Pull Requests', icon: GitPullRequestIcon, counter: 13},
+    {navigation: 'Discussions', icon: CommentDiscussionIcon, counter: 5},
+    {navigation: 'Actions', icon: PlayIcon, counter: 4},
+    {navigation: 'Projects', icon: ProjectIcon, counter: 9},
+    {navigation: 'Insights', icon: GraphIcon},
+    {navigation: 'Settings', icon: GearIcon, counter: 10},
+    {navigation: 'Security', icon: ShieldLockIcon},
+  ]
+  const [selectedIndex, setSelectedIndex] = React.useState(0)
+  return (
+    <Box sx={{width: 750, border: '1px solid', borderBottom: 0, borderColor: 'border.default'}}>
+      <UnderlineNav aria-label="Repository">
+        {items.map((item, index) => (
+          <UnderlineNav.Item
+            key={item.navigation}
+            icon={item.icon}
+            aria-current={index === selectedIndex ? 'page' : undefined}
+            onSelect={e => {
+              setSelectedIndex(index)
+              e.preventDefault()
+            }}
+            counter={item.counter}
+          >
+            {item.navigation}
+          </UnderlineNav.Item>
+        ))}
+      </UnderlineNav>
+    </Box>
+  )
+}
+render(<Navigation />)
+```
+
+### Loading State For Counters
+
+```jsx live drafts
+<UnderlineNav aria-label="Repository" loadingCounters={true}>
+  <UnderlineNav.Item counter={4} aria-current="page">
+    Code
+  </UnderlineNav.Item>
+  <UnderlineNav.Item counter={44}>Issues</UnderlineNav.Item>
+  <UnderlineNav.Item>Pull Requests</UnderlineNav.Item>
+</UnderlineNav>
+```
+
+### With React Router
+
+```jsx
+import {Link, useMatch, useResolvedPath} from 'react-router-dom'
+import {UnderlineNav} from '@primer/react'
+
+function UnderlineNavItem({to, children, ...rest}) {
+  const resolved = useResolvedPath(to)
+  const isCurrent = useMatch({path: resolved.pathname, end: true})
+  return (
+    <UnderlineNav.Item as={Link} to={to} aria-current={isCurrent ? 'page' : undefined} {...rest}>
+      {children}
+    </UnderlineNav.Item>
+  )
+}
+
+const Navigation = () => {
+  return (
+    <UnderlineNav aria-label="Repository">
+      <UnderlineNavItem to="/code" counter={4}>
+        Code
+      </UnderlineNavItem>
+      <UnderlineNavItem to="/issues" counter={44}>
+        Issues
+      </UnderlineNavItem>
+      <UnderlineNavItem to="/pulls">Pull Requests</UnderlineNavItem>
+    </UnderlineNav>
+  )
+}
+```
+
+### With Next.js
+
+```jsx
+import {useRouter} from 'next/router'
+import Link from 'next/link'
+import {UnderlineNav} from '@primer/react'
+
+function UnderlineNavItem({href, children, ...rest}) {
+  const router = useRouter()
+  const isCurrent = typeof href === 'string' ? router.asPath === href : router.pathname === href.pathname
+  return (
+    <UnderlineNav.Item as={Link} href={href} aria-current={isCurrent ? 'page' : undefined} {...rest}>
+      {children}
+    </UnderlineNav.Item>
+  )
+}
+
+const Navigation = () => {
+  return (
+    <UnderlineNav aria-label="Repository">
+      <UnderlineNavItem href="/code" counter={4}>
+        Code
+      </UnderlineNavItem>
+      <UnderlineNavItem href="/issues" counter={44}>
+        Issues
+      </UnderlineNavItem>
+      <UnderlineNavItem href="/pulls">Pull Requests</UnderlineNavItem>
+    </UnderlineNav>
+  )
+}
+```
+
 ## Props
 
 <ComponentProps data={data} />
+
+## Status
+
+<ComponentChecklist
+  items={{
+    propsDocumented: true,
+    noUnnecessaryDeps: true,
+    adaptsToThemes: true,
+    adaptsToScreenSizes: true,
+    fullTestCoverage: true,
+    visualRegressionCoverage: true,
+    noAxeViolations: true,
+    usedInProduction: false,
+    usageExamplesDocumented: true,
+    hasStorybookStories: true,
+    designReviewed: true,
+    a11yReviewed: true,
+    stableApi: false,
+    addressedApiFeedback: false,
+    hasDesignGuidelines: false,
+    hasFigmaComponent: false,
+  }}
+/>

docs/content/deprecated/UnderlineNav.mdx

@@ -0,0 +1,31 @@
+---
+componentId: legacy_underline_nav
+title: UnderlineNav (legacy)
+status: Deprecated
+---
+
+import data from '../../../src/deprecated/UnderlineNav/UnderlineNav.docs.json'
+
+Use the UnderlineNav component to style navigation with a minimal underlined selected state, typically used for navigation placed at the top of the page.
+
+## Deprecation
+
+Use [the new version of UnderlineNav](/UnderlineNav) with design and accessibility updates.
+
+**Attention:** Make sure to properly label your `UnderlineNav` with an `aria-label` to provide context about the type of navigation contained in `UnderlineNav`.
+
+## Examples
+
+```jsx live
+<UnderlineNav aria-label="Main">
+  <UnderlineNav.Link href="#home" selected>
+    Home
+  </UnderlineNav.Link>
+  <UnderlineNav.Link href="#documentation">Documentation</UnderlineNav.Link>
+  <UnderlineNav.Link href="#support">Support</UnderlineNav.Link>
+</UnderlineNav>
+```
+
+## Props
+
+<ComponentProps data={data} />

docs/content/drafts/PageHeader.mdx

@@ -162,20 +162,20 @@ import {PageHeader} from '@primer/react/drafts'
     <PageHeader.Title>Pull request title</PageHeader.Title>
   </PageHeader.TitleArea>
   <PageHeader.Navigation>
-    <UnderlineNav2 aria-label="Pull Request">
-      <UnderlineNav2.Item icon={CommentDiscussionIcon} counter="12" aria-current="page">
+    <UnderlineNav aria-label="Pull Request">
+      <UnderlineNav.Item icon={CommentDiscussionIcon} counter="12" aria-current="page">
         Conversation
-      </UnderlineNav2.Item>
-      <UnderlineNav2.Item counter={3} icon={CommitIcon}>
+      </UnderlineNav.Item>
+      <UnderlineNav.Item counter={3} icon={CommitIcon}>
         Commits
-      </UnderlineNav2.Item>
-      <UnderlineNav2.Item counter={7} icon={ChecklistIcon}>
+      </UnderlineNav.Item>
+      <UnderlineNav.Item counter={7} icon={ChecklistIcon}>
         Checks
-      </UnderlineNav2.Item>
-      <UnderlineNav2.Item counter={4} icon={FileDiffIcon}>
+      </UnderlineNav.Item>
+      <UnderlineNav.Item counter={4} icon={FileDiffIcon}>
         Files Changes
-      </UnderlineNav2.Item>
-    </UnderlineNav2>
+      </UnderlineNav.Item>
+    </UnderlineNav>
   </PageHeader.Navigation>
 </PageHeader>
 ```