Add hideDivider prop to NavList.Group

.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.

e2e/components/NavList.test.ts

@@ -35,6 +35,10 @@ const stories = [
     title: 'With Description',
     id: 'components-navlist-features--with-description',
   },
+  {
+    title: 'Without Divider',
+    id: 'components-navlist-features--without-divider',
+  },
 ]
 
 test.describe('NavList', () => {

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<HTMLElement>"

packages/react/src/NavList/NavList.features.stories.tsx

@@ -646,6 +646,31 @@ export const WithItemGap: StoryFn = () => (
 
 WithItemGap.storyName = 'With gap between items (behind feature flag)'
 
+export const WithoutDivider: StoryFn = () => (
+  <PageLayout>
+    <PageLayout.Pane position="start">
+      <NavList>
+        <NavList.Item href="#" aria-current="page">
+          Home
+        </NavList.Item>
+        <NavList.Group hideDivider={true}>
+          <NavList.Item defaultOpen href="#">
+            About
+            <NavList.SubNav>
+              <NavList.Item href="#">Team</NavList.Item>
+              <NavList.Item href="#">History</NavList.Item>
+            </NavList.SubNav>
+          </NavList.Item>
+          <NavList.Item href="#">Settings</NavList.Item>
+        </NavList.Group>
+        <NavList.Group>
+          <NavList.Item href="#">Contact</NavList.Item>
+        </NavList.Group>
+      </NavList>
+    </PageLayout.Pane>
+  </PageLayout>
+)
+
 export const WithHeading: StoryFn = () => (
   <PageLayout>
     <PageLayout.Pane position="start">

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(
+        <NavList>
+          <NavList.Group title="Account">
+            <NavList.Item href="#">Profile</NavList.Item>
+          </NavList.Group>
+        </NavList>,
+      )
+
+      expect(container.querySelector('[data-component="ActionList.Divider"]')).toBeInTheDocument()
+    })
+
+    it('does not render a divider when hideDivider is set', () => {
+      const {container} = render(
+        <NavList>
+          <NavList.Group title="Account" hideDivider>
+            <NavList.Item href="#">Profile</NavList.Item>
+          </NavList.Group>
+        </NavList>,
+      )
+
+      expect(container.querySelector('[data-component="ActionList.Divider"]')).not.toBeInTheDocument()
+    })
+  })
 })

packages/react/src/NavList/NavList.tsx

@@ -363,17 +363,18 @@ TrailingAction.displayName = 'NavList.TrailingAction'
 export type NavListGroupProps = React.HTMLAttributes<HTMLLIElement> & {
   children: React.ReactNode
   title?: string
+  hideDivider?: boolean
 }
 
-const Group: React.FC<NavListGroupProps> = ({title, children, ...props}) => {
+const Group: React.FC<NavListGroupProps> = ({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
   // use a different level, pass NavList.GroupHeading with an explicit `as` instead.
   const groupHeadingAs = headingLevel ? levelToHeadingTag(headingLevel + 1) : 'h3'
   return (
     <>
-      <ActionList.Divider />
+      {!hideDivider && <ActionList.Divider />}
       <ActionList.Group {...props}>
         {title ? (
           <ActionList.GroupHeading as={groupHeadingAs} data-component="ActionList.GroupHeading">