diff --git a/.changeset/navlist-group-hide-divider.md b/.changeset/navlist-group-hide-divider.md new file mode 100644 index 00000000000..5bc82cd4b78 --- /dev/null +++ b/.changeset/navlist-group-hide-divider.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Add a `hideDivider` prop to `NavList.Group` so consumers can opt out of rendering the divider before a group. diff --git a/packages/react/src/NavList/NavList.docs.json b/packages/react/src/NavList/NavList.docs.json index 6ea9ab1e73f..72258bed5f1 100644 --- a/packages/react/src/NavList/NavList.docs.json +++ b/packages/react/src/NavList/NavList.docs.json @@ -198,6 +198,12 @@ "type": "string", "description": "The text that gets rendered as the group's heading. Alternatively, you can pass the `NavList.GroupHeading` component as a child of `NavList.Group`.\nIf both `title` and `NavList.GroupHeading` are passed, `NavList.GroupHeading` will be rendered as the heading." }, + { + "name": "hideDivider", + "type": "boolean", + "defaultValue": "false", + "description": "Whether to hide the divider that is rendered before the group." + }, { "name": "ref", "type": "React.RefObject" diff --git a/packages/react/src/NavList/NavList.test.tsx b/packages/react/src/NavList/NavList.test.tsx index cedde128ac5..e3121b2e6d6 100644 --- a/packages/react/src/NavList/NavList.test.tsx +++ b/packages/react/src/NavList/NavList.test.tsx @@ -752,4 +752,30 @@ describe('NavList.ShowMoreItem with pages', () => { expect(heading).toHaveAttribute('title', 'Section navigation') }) }) + + describe('NavList.Group', () => { + it('renders a divider before the group by default', () => { + const {container} = render( + + + Profile + + , + ) + + expect(container.querySelector('[data-component="ActionList.Divider"]')).toBeInTheDocument() + }) + + it('does not render a divider when hideDivider is set', () => { + const {container} = render( + + + Profile + + , + ) + + expect(container.querySelector('[data-component="ActionList.Divider"]')).not.toBeInTheDocument() + }) + }) }) diff --git a/packages/react/src/NavList/NavList.tsx b/packages/react/src/NavList/NavList.tsx index 3deb4662531..9ff77d01548 100644 --- a/packages/react/src/NavList/NavList.tsx +++ b/packages/react/src/NavList/NavList.tsx @@ -363,9 +363,10 @@ TrailingAction.displayName = 'NavList.TrailingAction' export type NavListGroupProps = React.HTMLAttributes & { children: React.ReactNode title?: string + hideDivider?: boolean } -const Group: React.FC = ({title, children, ...props}) => { +const Group: React.FC = ({title, children, hideDivider, ...props}) => { const headingLevel = React.useContext(NavListHeadingLevelContext) // Default the group heading to one level below the NavList.Heading (h3 under an // h2, h4 under an h3), falling back to h3 when there is no NavList.Heading. To @@ -373,7 +374,7 @@ const Group: React.FC = ({title, children, ...props}) => { const groupHeadingAs = headingLevel ? levelToHeadingTag(headingLevel + 1) : 'h3' return ( <> - + {!hideDivider && } {title ? (