NavList: Fix group dividers (#3328)

* Fix NavLIst.Group dividers * Use first-of-type instead of first-child * Update snapshots and stories
primer · May 25, 2023 · 1fd6d32 · 1fd6d32
1 parent b1395e9
commit 1fd6d32
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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"
           >