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.

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