From 1fd6d326fc9936428e9485e4f41f2328d8b22684 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Thu, 25 May 2023 14:48:51 -0700
Subject: [PATCH] NavList: Fix group dividers (#3328)

* Fix NavLIst.Group dividers

* Use first-of-type instead of first-child

* Update snapshots and stories
---
 src/NavList/NavList.stories.tsx               |  7 ++++-
 src/NavList/NavList.tsx                       | 14 +++++-----
 .../__snapshots__/NavList.test.tsx.snap       | 26 +++++++++----------
 3 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/NavList/NavList.stories.tsx b/src/NavList/NavList.stories.tsx
index 4e1b472570c..f643302c1f8 100644
--- a/src/NavList/NavList.stories.tsx
+++ b/src/NavList/NavList.stories.tsx
@@ -28,13 +28,18 @@ export const Simple: Story = () => (
 
 export const WithGroup: Story = () => (
   <NavList>
-    <NavList.Group title="Group title">
+    <NavList.Group title="Group 1">
       <NavList.Item href="#" aria-current="page">
         Item 1
       </NavList.Item>
       <NavList.Item href="#">Item 2</NavList.Item>
       <NavList.Item href="#">Item 3</NavList.Item>
     </NavList.Group>
+    <NavList.Group title="Group 2">
+      <NavList.Item href="#">Item 4</NavList.Item>
+      <NavList.Item href="#">Item 5</NavList.Item>
+      <NavList.Item href="#">Item 6</NavList.Item>
+    </NavList.Group>
   </NavList>
 )
 
diff --git a/src/NavList/NavList.tsx b/src/NavList/NavList.tsx
index 077b46d96ad..80550abc989 100644
--- a/src/NavList/NavList.tsx
+++ b/src/NavList/NavList.tsx
@@ -246,14 +246,16 @@ const defaultSx = {}
 // TODO: ref prop
 const Group: React.FC<NavListGroupProps> = ({title, children, sx: sxProp = defaultSx, ...props}) => {
   return (
-    <Box as="li" sx={sxProp} {...props}>
+    <>
       {/* Hide divider if the group is the first item in the list */}
-      <ActionList.Divider as="div" sx={{'&:first-child': {display: 'none'}}} />
-      {title && <ActionList.Heading title={title} />}
-      <Box as="ul" sx={{paddingInlineStart: 0}}>
-        {children}
+      <ActionList.Divider sx={{'&:first-of-type': {display: 'none'}}} />
+      <Box as="li" sx={sxProp} {...props}>
+        {title && <ActionList.Heading title={title} />}
+        <Box as="ul" sx={{paddingInlineStart: 0}}>
+          {children}
+        </Box>
       </Box>
-    </Box>
+    </>
   )
 }
 
diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap
index 0bf63a4a99d..443240545e4 100644
--- a/src/NavList/__snapshots__/NavList.test.tsx.snap
+++ b/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -407,7 +407,7 @@ exports[`NavList renders with groups 1`] = `
   list-style: none;
 }
 
-.c2:first-child {
+.c2:first-of-type {
   display: none;
 }
 
@@ -701,15 +701,15 @@ exports[`NavList renders with groups 1`] = `
       <ul
         class="c1"
       >
+        <li
+          aria-hidden="true"
+          class="c2"
+          data-component="ActionList.Divider"
+          role="separator"
+        />
         <li
           class=""
         >
-          <div
-            aria-hidden="true"
-            class="c2"
-            data-component="ActionList.Divider"
-            role="separator"
-          />
           <div
             class="c3"
           >
@@ -748,15 +748,15 @@ exports[`NavList renders with groups 1`] = `
             </li>
           </ul>
         </li>
+        <li
+          aria-hidden="true"
+          class="c2"
+          data-component="ActionList.Divider"
+          role="separator"
+        />
         <li
           class=""
         >
-          <div
-            aria-hidden="true"
-            class="c2"
-            data-component="ActionList.Divider"
-            role="separator"
-          />
           <div
             class="c3"
           >