diff --git a/.changeset/navlist-group-hide-divider.md b/.changeset/navlist-group-hide-divider.md new file mode 100644 index 00000000000..5bc82cd4b78 --- /dev/null +++ b/.changeset/navlist-group-hide-divider.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Add a `hideDivider` prop to `NavList.Group` so consumers can opt out of rendering the divider before a group. diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-Without-Divider-dark-colorblind-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-Without-Divider-dark-colorblind-linux.png new file mode 100644 index 00000000000..e2dfb663e65 Binary files /dev/null and b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-Without-Divider-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-Without-Divider-dark-dimmed-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-Without-Divider-dark-dimmed-linux.png new file mode 100644 index 00000000000..618abbfcc0c Binary files /dev/null and b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-Without-Divider-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-Without-Divider-dark-high-contrast-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-Without-Divider-dark-high-contrast-linux.png new file mode 100644 index 00000000000..ac686b0c09c Binary files /dev/null and b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-Without-Divider-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-Without-Divider-dark-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-Without-Divider-dark-linux.png new file mode 100644 index 00000000000..e2dfb663e65 Binary files /dev/null and b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-Without-Divider-dark-linux.png differ diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-Without-Divider-dark-tritanopia-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-Without-Divider-dark-tritanopia-linux.png new file mode 100644 index 00000000000..e2dfb663e65 Binary files /dev/null and b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-Without-Divider-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-Without-Divider-light-colorblind-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-Without-Divider-light-colorblind-linux.png new file mode 100644 index 00000000000..3b0f87eca5d Binary files /dev/null and b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-Without-Divider-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-Without-Divider-light-high-contrast-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-Without-Divider-light-high-contrast-linux.png new file mode 100644 index 00000000000..fe198e8de13 Binary files /dev/null and b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-Without-Divider-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-Without-Divider-light-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-Without-Divider-light-linux.png new file mode 100644 index 00000000000..3b0f87eca5d Binary files /dev/null and b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-Without-Divider-light-linux.png differ diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-Without-Divider-light-tritanopia-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-Without-Divider-light-tritanopia-linux.png new file mode 100644 index 00000000000..3b0f87eca5d Binary files /dev/null and b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-Without-Divider-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-4-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-4-linux.png index 47f04629f3d..832ed07ed42 100644 Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-4-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-4-linux.png differ diff --git a/e2e/components/NavList.test.ts b/e2e/components/NavList.test.ts index 8e2b3413e09..e74bf0e8c06 100644 --- a/e2e/components/NavList.test.ts +++ b/e2e/components/NavList.test.ts @@ -35,6 +35,10 @@ const stories = [ title: 'With Description', id: 'components-navlist-features--with-description', }, + { + title: 'Without Divider', + id: 'components-navlist-features--without-divider', + }, ] test.describe('NavList', () => { diff --git a/packages/react/src/NavList/NavList.docs.json b/packages/react/src/NavList/NavList.docs.json index 6ea9ab1e73f..72258bed5f1 100644 --- a/packages/react/src/NavList/NavList.docs.json +++ b/packages/react/src/NavList/NavList.docs.json @@ -198,6 +198,12 @@ "type": "string", "description": "The text that gets rendered as the group's heading. Alternatively, you can pass the `NavList.GroupHeading` component as a child of `NavList.Group`.\nIf both `title` and `NavList.GroupHeading` are passed, `NavList.GroupHeading` will be rendered as the heading." }, + { + "name": "hideDivider", + "type": "boolean", + "defaultValue": "false", + "description": "Whether to hide the divider that is rendered before the group." + }, { "name": "ref", "type": "React.RefObject" diff --git a/packages/react/src/NavList/NavList.features.stories.tsx b/packages/react/src/NavList/NavList.features.stories.tsx index fb3983f64c0..b9488ea1fae 100644 --- a/packages/react/src/NavList/NavList.features.stories.tsx +++ b/packages/react/src/NavList/NavList.features.stories.tsx @@ -646,6 +646,31 @@ export const WithItemGap: StoryFn = () => ( WithItemGap.storyName = 'With gap between items (behind feature flag)' +export const WithoutDivider: StoryFn = () => ( + + + + + Home + + + + About + + Team + History + + + Settings + + + Contact + + + + +) + export const WithHeading: StoryFn = () => ( diff --git a/packages/react/src/NavList/NavList.test.tsx b/packages/react/src/NavList/NavList.test.tsx index cedde128ac5..e3121b2e6d6 100644 --- a/packages/react/src/NavList/NavList.test.tsx +++ b/packages/react/src/NavList/NavList.test.tsx @@ -752,4 +752,30 @@ describe('NavList.ShowMoreItem with pages', () => { expect(heading).toHaveAttribute('title', 'Section navigation') }) }) + + describe('NavList.Group', () => { + it('renders a divider before the group by default', () => { + const {container} = render( + + + Profile + + , + ) + + expect(container.querySelector('[data-component="ActionList.Divider"]')).toBeInTheDocument() + }) + + it('does not render a divider when hideDivider is set', () => { + const {container} = render( + + + Profile + + , + ) + + expect(container.querySelector('[data-component="ActionList.Divider"]')).not.toBeInTheDocument() + }) + }) }) diff --git a/packages/react/src/NavList/NavList.tsx b/packages/react/src/NavList/NavList.tsx index 3deb4662531..9ff77d01548 100644 --- a/packages/react/src/NavList/NavList.tsx +++ b/packages/react/src/NavList/NavList.tsx @@ -363,9 +363,10 @@ TrailingAction.displayName = 'NavList.TrailingAction' export type NavListGroupProps = React.HTMLAttributes & { children: React.ReactNode title?: string + hideDivider?: boolean } -const Group: React.FC = ({title, children, ...props}) => { +const Group: React.FC = ({title, children, hideDivider, ...props}) => { const headingLevel = React.useContext(NavListHeadingLevelContext) // Default the group heading to one level below the NavList.Heading (h3 under an // h2, h4 under an h3), falling back to h3 when there is no NavList.Heading. To @@ -373,7 +374,7 @@ const Group: React.FC = ({title, children, ...props}) => { const groupHeadingAs = headingLevel ? levelToHeadingTag(headingLevel + 1) : 'h3' return ( <> - + {!hideDivider && } {title ? (