NavList: Fix group dividers (#3328)

* Fix NavLIst.Group dividers

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

* Update snapshots and stories

Author: colebemis

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

src/NavList/NavList.tsx

@@ -250,14 +250,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>
+    </>
   )
 }
 

src/NavList/__snapshots__/NavList.test.tsx.snap

@@ -411,7 +411,7 @@ exports[`NavList renders with groups 1`] = `
   list-style: none;
 }
 
-.c2:first-child {
+.c2:first-of-type {
   display: none;
 }
 
@@ -705,15 +705,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"
           >
@@ -752,15 +752,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"
           >