From 2119322dac5a07796f460102559a2e9582a35cfe Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Thu, 25 May 2023 12:12:56 -0700
Subject: [PATCH 1/3] Fix NavLIst.Group dividers

---
 src/NavList/NavList.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/NavList/NavList.tsx b/src/NavList/NavList.tsx
index 077b46d96ad..68789ce03ca 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-child': {display: 'none'}}} />
+      <Box as="li" sx={sxProp} {...props}>
+        {title && <ActionList.Heading title={title} />}
+        <Box as="ul" sx={{paddingInlineStart: 0}}>
+          {children}
+        </Box>
       </Box>
-    </Box>
+    </>
   )
 }
 

From 4ded6119f6126fbe7404b11e70b746af19c44e5b Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Thu, 25 May 2023 12:47:32 -0700
Subject: [PATCH 2/3] Use first-of-type instead of first-child

---
 src/NavList/NavList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/NavList/NavList.tsx b/src/NavList/NavList.tsx
index 68789ce03ca..1c16588005f 100644
--- a/src/NavList/NavList.tsx
+++ b/src/NavList/NavList.tsx
@@ -248,7 +248,7 @@ const Group: React.FC<NavListGroupProps> = ({title, children, sx: sxProp = defau
   return (
     <>
       {/* Hide divider if the group is the first item in the list */}
-      <ActionList.Divider sx={{'&:first-child': {display: 'none'}}} />
+      {/* <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}}>

From e9ab27c6d1544224f814eb31ea5d281c7902f18f Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Thu, 25 May 2023 14:37:34 -0700
Subject: [PATCH 3/3] Update snapshots and stories

---
 src/NavList/NavList.stories.tsx               |  7 ++++-
 src/NavList/NavList.tsx                       |  2 +-
 .../__snapshots__/NavList.test.tsx.snap       | 26 +++++++++----------
 3 files changed, 20 insertions(+), 15 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 1c16588005f..80550abc989 100644
--- a/src/NavList/NavList.tsx
+++ b/src/NavList/NavList.tsx
@@ -248,7 +248,7 @@ const Group: React.FC<NavListGroupProps> = ({title, children, sx: sxProp = defau
   return (
     <>
       {/* Hide divider if the group is the first item in the list */}
-      {/* <ActionList.Divider sx={{'&:first-of-type': {display: 'none'}}} /> */}
+      <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}}>
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"
           >