From d845aa0c48e1eec97d60a59fcf62508a52eca6f7 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 3 Jun 2022 11:28:34 -0700 Subject: [PATCH 1/5] Export ActionListDividerProps --- src/ActionList/Divider.tsx | 5 +++-- src/ActionList/index.ts | 1 + src/index.ts | 1 + 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/ActionList/Divider.tsx b/src/ActionList/Divider.tsx index e286448eb42..2d03ef24b8a 100644 --- a/src/ActionList/Divider.tsx +++ b/src/ActionList/Divider.tsx @@ -4,11 +4,12 @@ import {get} from '../constants' import {Theme} from '../ThemeProvider' import {SxProp, merge} from '../sx' +export type ActionListDividerProps = SxProp + /** * Visually separates `Item`s or `Group`s in an `ActionList`. */ - -export const Divider: React.FC = ({sx = {}}) => { +export const Divider: React.FC = ({sx = {}}) => { return ( Date: Fri, 3 Jun 2022 11:28:59 -0700 Subject: [PATCH 2/5] Export NavList from the main bundle --- docs/content/NavList.mdx | 11 ++++++----- src/NavList/NavList.tsx | 17 ++++++++++++++--- src/index.ts | 10 ++++++++++ 3 files changed, 30 insertions(+), 8 deletions(-) diff --git a/docs/content/NavList.mdx b/docs/content/NavList.mdx index 9293821a83f..008471f8708 100644 --- a/docs/content/NavList.mdx +++ b/docs/content/NavList.mdx @@ -1,12 +1,13 @@ --- title: NavList -status: Draft -description: Use nav list to render a vertical list of navigation links. +status: Alpha +description: Use a nav list to render a vertical list of navigation links. source: https://github.com/primer/react/tree/main/src/NavList +storybook: '/react/storybook/?path=/story/composite-components-navlist--simple' --- ```js -import {NavList} from '@primer/react/drafts' +import {NavList} from '@primer/react' ``` ## Examples @@ -333,9 +334,9 @@ function App() { adaptsToThemes: true, adaptsToScreenSizes: true, fullTestCoverage: true, - usedInProduction: false, + usedInProduction: true, usageExamplesDocumented: true, - hasStorybookStories: false, + hasStorybookStories: true, designReviewed: false, a11yReviewed: false, stableApi: false, diff --git a/src/NavList/NavList.tsx b/src/NavList/NavList.tsx index c86dc471677..798e39b82a3 100644 --- a/src/NavList/NavList.tsx +++ b/src/NavList/NavList.tsx @@ -3,7 +3,12 @@ import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/r import {useSSRSafeId} from '@react-aria/ssr' import React, {isValidElement} from 'react' import styled from 'styled-components' -import {ActionList} from '../ActionList' +import { + ActionList, + ActionListDividerProps, + ActionListLeadingVisualProps, + ActionListTrailingVisualProps +} from '../ActionList' import Box from '../Box' import StyledOcticon from '../StyledOcticon' import sx, {merge, SxProp} from '../sx' @@ -154,7 +159,7 @@ function ItemWithSubNav({children, subNav, sx: sxProp = {}}: ItemWithSubNavProps // ---------------------------------------------------------------------------- // NavList.SubNav -type NavListSubNavProps = { +export type NavListSubNavProps = { children: React.ReactNode } & SxProp @@ -203,6 +208,8 @@ SubNav.displayName = 'NavList.SubNav' // ---------------------------------------------------------------------------- // NavList.LeadingVisual +export type NavListLeadingVisualProps = ActionListLeadingVisualProps + const LeadingVisual = ActionList.LeadingVisual LeadingVisual.displayName = 'NavList.LeadingVisual' @@ -210,6 +217,8 @@ LeadingVisual.displayName = 'NavList.LeadingVisual' // ---------------------------------------------------------------------------- // NavList.TrailingVisual +export type NavListTrailingVisualProps = ActionListTrailingVisualProps + const TrailingVisual = ActionList.TrailingVisual TrailingVisual.displayName = 'NavList.TrailingVisual' @@ -217,6 +226,8 @@ TrailingVisual.displayName = 'NavList.TrailingVisual' // ---------------------------------------------------------------------------- // NavList.Divider +export type NavListDividerProps = ActionListDividerProps + const Divider = ActionList.Divider Divider.displayName = 'NavList.Divider' @@ -224,7 +235,7 @@ Divider.displayName = 'NavList.Divider' // ---------------------------------------------------------------------------- // NavList.Group -type NavListGroupProps = { +export type NavListGroupProps = { children: React.ReactNode title?: string } & SxProp diff --git a/src/index.ts b/src/index.ts index ede7401fa4d..5d7f6542cd4 100644 --- a/src/index.ts +++ b/src/index.ts @@ -96,6 +96,16 @@ export {default as LabelGroup} from './LabelGroup' export type {LabelGroupProps} from './LabelGroup' export {default as Link} from './Link' export type {LinkProps} from './Link' +export {NavList} from './NavList' +export type { + NavListProps, + NavListItemProps, + NavListSubNavProps, + NavListGroupProps, + NavListLeadingVisualProps, + NavListTrailingVisualProps, + NavListDividerProps +} from './NavList' export {default as Overlay} from './Overlay' export type {OverlayProps} from './Overlay' export {default as Pagehead} from './Pagehead' From e1f393f0b81a0489341b3a9144a33a2bb18cc198 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 3 Jun 2022 11:50:06 -0700 Subject: [PATCH 3/5] Add NavList link to the nav --- docs/src/@primer/gatsby-theme-doctocat/nav.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 5464c178421..b353429d7c5 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -90,6 +90,8 @@ url: /LabelGroup - title: Link url: /Link + - title: NavList + url: /NavList - title: Overlay url: /Overlay - title: Pagehead From 35dc6f294a299a9134e9f12757b0431c94e21b26 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 3 Jun 2022 11:52:23 -0700 Subject: [PATCH 4/5] Create stale-hounds-notice.md --- .changeset/stale-hounds-notice.md | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 .changeset/stale-hounds-notice.md diff --git a/.changeset/stale-hounds-notice.md b/.changeset/stale-hounds-notice.md new file mode 100644 index 00000000000..7727ac53be6 --- /dev/null +++ b/.changeset/stale-hounds-notice.md @@ -0,0 +1,9 @@ +--- +"@primer/react": minor +--- + +[NavList](https://primer.style/NavList) is ready to use. You can now import it from the main bundle: + +```js +import {NavList} from '@primer/react' +``` From 9fdb626ae5418313e61c2499068b58559f591ca8 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 7 Jun 2022 15:04:19 -0700 Subject: [PATCH 5/5] Add componentId --- docs/content/NavList.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/content/NavList.mdx b/docs/content/NavList.mdx index 008471f8708..61f2cd0bf8f 100644 --- a/docs/content/NavList.mdx +++ b/docs/content/NavList.mdx @@ -1,6 +1,7 @@ --- title: NavList status: Alpha +componentId: nav_list description: Use a nav list to render a vertical list of navigation links. source: https://github.com/primer/react/tree/main/src/NavList storybook: '/react/storybook/?path=/story/composite-components-navlist--simple'