ActionListGroup description style bug fix (#5036)

* add classname * fix description styles * remove role on story * add fallback * Create angry-tigers-jump.md * lint
primer · Sep 27, 2024 · 6671a20 · 6671a20
1 parent 14b6506
commit 6671a20
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 17 deletions.
diff --git a/.changeset/angry-tigers-jump.md 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
@@ -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
@@ -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"