Skip to content

Commit

Permalink
NavList: Fix group dividers (#3328)
Browse files Browse the repository at this point in the history
* Fix NavLIst.Group dividers

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

* Update snapshots and stories
  • Loading branch information
colebemis authored May 25, 2023
1 parent b1395e9 commit 1fd6d32
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 20 deletions.
7 changes: 6 additions & 1 deletion src/NavList/NavList.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)

Expand Down
14 changes: 8 additions & 6 deletions src/NavList/NavList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
)
}

Expand Down
26 changes: 13 additions & 13 deletions src/NavList/__snapshots__/NavList.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -407,7 +407,7 @@ exports[`NavList renders with groups 1`] = `
list-style: none;
}
.c2:first-child {
.c2:first-of-type {
display: none;
}
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down

0 comments on commit 1fd6d32

Please sign in to comment.