Adds NavList.GroupHeading component

.changeset/twelve-kings-confess.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Adds NavList.GroupHeading component that can be used instead of the ActionList.Group 'title' prop if you need to render something besides a string

packages/react/src/ActionList/Group.tsx

@@ -106,7 +106,7 @@ export const Group: React.FC<React.PropsWithChildren<ActionListGroupProps>> = ({
   )
 }
 
-export type GroupHeadingProps = Pick<ActionListGroupProps, 'variant' | 'auxiliaryText'> &
+export type ActionListGroupHeadingProps = Pick<ActionListGroupProps, 'variant' | 'auxiliaryText'> &
   Omit<ActionListHeadingProps, 'as'> &
   SxProp &
   React.HTMLAttributes<HTMLElement> & {
@@ -122,7 +122,7 @@ export type GroupHeadingProps = Pick<ActionListGroupProps, 'variant' | 'auxiliar
  * hidden from the accessibility tree due to the limitation of listbox children. https://w3c.github.io/aria/#listbox
  * groups under menu or listbox are labelled by `aria-label`
  */
-export const GroupHeading: React.FC<React.PropsWithChildren<GroupHeadingProps>> = ({
+export const GroupHeading: React.FC<React.PropsWithChildren<ActionListGroupHeadingProps>> = ({
   as,
   variant,
   // We are not recommending this prop to be used, it should only be used internally for incremental rollout.

packages/react/src/ActionList/index.ts

@@ -9,7 +9,7 @@ import {LeadingVisual, TrailingVisual} from './Visuals'
 import {Heading} from './Heading'
 
 export type {ActionListProps} from './shared'
-export type {ActionListGroupProps} from './Group'
+export type {ActionListGroupProps, ActionListGroupHeadingProps} from './Group'
 export type {ActionListItemProps} from './shared'
 export type {ActionListLinkItemProps} from './LinkItem'
 export type {ActionListDividerProps} from './Divider'

packages/react/src/NavList/NavList.stories.tsx

@@ -247,6 +247,34 @@ export const WithGroup: StoryFn = () => (
   </PageLayout>
 )
 
+export const WithGroupHeadingLinks: StoryFn = () => (
+  <PageLayout>
+    <PageLayout.Pane position="start">
+      <NavList>
+        <NavList.Group>
+          <NavList.GroupHeading>
+            <a href="#group-1">Group 1</a>
+          </NavList.GroupHeading>
+          <NavList.Item aria-current="true" href="#">
+            Item 1A
+          </NavList.Item>
+          <NavList.Item href="#">Item 1B</NavList.Item>
+          <NavList.Item href="#">Item 1C</NavList.Item>
+        </NavList.Group>
+        <NavList.Group>
+          <NavList.GroupHeading>
+            <a href="#group-2">Group 2</a>
+          </NavList.GroupHeading>
+          <NavList.Item href="#">Item 2A</NavList.Item>
+          <NavList.Item href="#">Item 2B</NavList.Item>
+          <NavList.Item href="#">Item 2C</NavList.Item>
+        </NavList.Group>
+      </NavList>
+    </PageLayout.Pane>
+    <PageLayout.Content></PageLayout.Content>
+  </PageLayout>
+)
+
 export const WithTrailingAction = () => {
   return (
     <PageLayout>

packages/react/src/NavList/NavList.tsx

@@ -7,6 +7,7 @@ import type {
   ActionListDividerProps,
   ActionListLeadingVisualProps,
   ActionListTrailingVisualProps,
+  ActionListGroupHeadingProps,
 } from '../ActionList'
 import {ActionList} from '../ActionList'
 import {ActionListContainerContext} from '../ActionList/ActionListContainerContext'
@@ -290,6 +291,31 @@ const Group: React.FC<NavListGroupProps> = ({title, children, sx: sxProp = defau
 
 Group.displayName = 'NavList.Group'
 
+export type NavListGroupHeadingProps = ActionListGroupHeadingProps
+
+/**
+ * This is an alternative to the `title` prop on `NavList.Group`.
+ * It was primarily added to allow links in group headings.
+ */
+const GroupHeading: React.FC<NavListGroupHeadingProps> = ({sx: sxProp = defaultSxProp, ...rest}) => {
+  return (
+    <ActionList.GroupHeading
+      as="h3"
+      sx={merge<SxProp['sx']>(
+        {
+          '> a {': {
+            color: 'var(--fgColor-default)',
+            textDecoration: 'inherit',
+            ':hover': {textDecoration: 'underline'},
+          },
+        },
+        sxProp,
+      )}
+      {...rest}
+    />
+  )
+}
+
 // ----------------------------------------------------------------------------
 // Export
 
@@ -301,4 +327,5 @@ export const NavList = Object.assign(Root, {
   TrailingAction,
   Divider,
   Group,
+  GroupHeading,
 })