From 6671a207066bebdd54939d0806fca89c7ab55137 Mon Sep 17 00:00:00 2001
From: Katie Langerman <18661030+langermank@users.noreply.github.com>
Date: Fri, 27 Sep 2024 13:13:40 -0700
Subject: [PATCH] ActionListGroup description style bug fix (#5036)

* add classname

* fix description styles

* remove role on story

* add fallback

* Create angry-tigers-jump.md

* lint
---
 .changeset/angry-tigers-jump.md               |  5 +++
 packages/react/src/ActionList/Group.tsx       | 27 ++++++++----
 .../__snapshots__/NavList.test.tsx.snap       | 42 ++++++++++++++-----
 3 files changed, 57 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/angry-tigers-jump.md

diff --git a/.changeset/angry-tigers-jump.md b/.changeset/angry-tigers-jump.md
new file mode 100644
index 00000000000..8ab9717c248
--- /dev/null
+++ b/.changeset/angry-tigers-jump.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+ActionListGroup description style bug fix
diff --git a/packages/react/src/ActionList/Group.tsx b/packages/react/src/ActionList/Group.tsx
index f4c1e2e8105..da31c6830ef 100644
--- a/packages/react/src/ActionList/Group.tsx
+++ b/packages/react/src/ActionList/Group.tsx
@@ -1,8 +1,7 @@
 import React from 'react'
 import {useId} from '../hooks/useId'
 import Box from '../Box'
-import type {SxProp, BetterSystemStyleObject} from '../sx'
-import {merge} from '../sx'
+import type {SxProp} from '../sx'
 import {ListContext, type ActionListProps} from './shared'
 import type {AriaRole} from '../utils/types'
 import {default as Heading} from '../Heading'
@@ -165,6 +164,20 @@ export const GroupHeading: React.FC<React.PropsWithChildren<GroupHeadingProps>>
       borderBottom: '1px solid',
       borderColor: 'neutral.muted',
     }),
+
+    [`.ActionListGroupHeading`]: {
+      fontSize: 'var(--text-body-size-small), 12px',
+      fontWeight: 'var(--base-text-weight-semibold, 600)',
+      lineHeight: 'var(--text-body-lineHeight-small, 1.6666)',
+      color: 'var(--fgColor-muted)',
+    },
+
+    [`.ActionListGroupHeadingDescription`]: {
+      fontSize: 'var(--text-body-size-small, 12px)',
+      fontWeight: 'var(--base-text-weight-normal, 400)',
+      lineHeight: 'var(--text-body-lineHeight-small, 1.6666)',
+      color: 'var(--fgColor-muted)',
+    },
   }
 
   return (
@@ -173,16 +186,16 @@ export const GroupHeading: React.FC<React.PropsWithChildren<GroupHeadingProps>>
       {listRole && listRole !== 'list' ? (
         <Box sx={styles} role="presentation" aria-hidden="true" {...props}>
           <span id={groupHeadingId}>{_internalBackwardCompatibleTitle ?? children}</span>
-          {auxiliaryText && <span>{auxiliaryText}</span>}
+          {auxiliaryText && <div className="ActionListGroupHeadingDescription">{auxiliaryText}</div>}
         </Box>
       ) : (
         // for explicit (role="list" is passed as prop) and implicit list roles (ActionList ins rendered as list by default), group titles are proper heading tags.
-        <>
-          <Heading as={as || 'h3'} id={groupHeadingId} sx={merge<BetterSystemStyleObject>(styles, sx)} {...props}>
+        <Box sx={styles}>
+          <Heading className="ActionListGroupHeading" as={as || 'h3'} id={groupHeadingId} sx={sx} {...props}>
             {_internalBackwardCompatibleTitle ?? children}
           </Heading>
-          {auxiliaryText && <span>{auxiliaryText}</span>}
-        </>
+          {auxiliaryText && <div className="ActionListGroupHeadingDescription">{auxiliaryText}</div>}
+        </Box>
       )}
     </>
   )
diff --git a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap
index 837ba3e6eb9..7319ed101bf 100644
--- a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap
+++ b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -474,6 +474,20 @@ exports[`NavList renders with groups 1`] = `
   color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
+.c3 .ActionListGroupHeading {
+  font-size: var(--text-body-size-small),12px;
+  font-weight: var(--base-text-weight-semibold,600);
+  line-height: var(--text-body-lineHeight-small,1.6666);
+  color: var(--fgColor-muted);
+}
+
+.c3 .ActionListGroupHeadingDescription {
+  font-size: var(--text-body-size-small,12px);
+  font-weight: var(--base-text-weight-normal,400);
+  line-height: var(--text-body-lineHeight-small,1.6666);
+  color: var(--fgColor-muted);
+}
+
 .c4 {
   padding-inline-start: 0;
 }
@@ -853,12 +867,16 @@ exports[`NavList renders with groups 1`] = `
       <li
         class="c2"
       >
-        <h3
-          class="c3 Heading"
-          id=":r7:"
+        <div
+          class="c3"
         >
-          Overview
-        </h3>
+          <h3
+            class="ActionListGroupHeading Heading"
+            id=":r7:"
+          >
+            Overview
+          </h3>
+        </div>
         <ul
           aria-labelledby=":r7:"
           class="c4"
@@ -897,12 +915,16 @@ exports[`NavList renders with groups 1`] = `
       <li
         class="c2"
       >
-        <h3
-          class="c3 Heading"
-          id=":r9:"
+        <div
+          class="c3"
         >
-          Components
-        </h3>
+          <h3
+            class="ActionListGroupHeading Heading"
+            id=":r9:"
+          >
+            Components
+          </h3>
+        </div>
         <ul
           aria-labelledby=":r9:"
           class="c4"