Remove components from draft and move UnderlineNav2 to main bundle (#…

…3260) * move draft UnderlinNav to main bundle * Update generated/components.json * Remove components from draft bundle * fix broken file paths * snaps * fix as you find errors * snaps * update docs path * update draft imports * linting * Remove act() warning check * test fixes * update e2e tests * remove Drafts from underlinenav stories title * add code back in that was lost in the merge conflict * Update generated/components.json * add changed components * test(vrt): update snapshots * chore: add NavList back to drafts bundle for gatsby theme compat * Fix merge conflict issues and clean up * name fix and remove behaveascomponent --------- Co-authored-by: broccolinisoup <broccolinisoup@users.noreply.github.com> Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
primer · Jul 28, 2023 · 52c8d22 · 52c8d22
1 parent 830ac6a
commit 52c8d22
Show file tree

Hide file tree

Showing 52 changed files with 1,455 additions and 2,410 deletions.
diff --git a/.changeset/early-timers-speak.md b/.changeset/early-timers-speak.md
@@ -0,0 +1,43 @@
+---
+'@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'
+```
+
+....
+* 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'
+```
+
+<!-- Changed components: UnderlineNav, TreeView, SegmentedControl, NavList, SplitPageLayout -->
diff --git a/docs/components/ThemeReferenceTree.js b/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 (

diff --git a/docs/content/TreeView.mdx b/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)

diff --git a/docs/content/UnderlineNav.mdx b/docs/content/UnderlineNav.mdx
@@ -1,32 +1,194 @@
 ---
-componentId: underline_nav
 title: UnderlineNav
+componentId: underline_nav
 status: Alpha
+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,
+  }}
+/>
diff --git a/docs/content/deprecated/UnderlineNav.mdx b/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} />
diff --git a/docs/content/drafts/PageHeader.mdx b/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>
 ```