Bug fix: ActionList Group className prop (#5132)

* testing

* lint

* Create shiny-cheetahs-flash.md

* setup better test

* add test

* fix test

* test(vrt): update snapshots

---------

Co-authored-by: langermank <langermank@users.noreply.github.com>

.changeset/shiny-cheetahs-flash.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Bug fix: ActionList Group className prop

e2e/components/ActionList.test.ts

@@ -712,4 +712,32 @@ test.describe('ActionList', () => {
       })
     }
   })
+
+  test.describe('Group Heading with Classname', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-actionlist-dev--group-heading-custom-classname',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Group Heading with Classname.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-actionlist-dev--group-heading-custom-classname',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
 })

packages/react/.storybook/storybook.css

@@ -8,10 +8,11 @@
   background-color: var(--bgColor-default);
 }
 
+/* stylelint-disable-next-line selector-max-specificity, selector-max-id */
 #storybook-preview-wrapper {
-  background-color: var(--bgColor-default) !important;
   width: 100% !important;
   height: 100% !important;
+  background-color: var(--bgColor-default) !important;
 }
 
 .theme-wrap-grid {
@@ -22,9 +23,9 @@
 }
 
 .story-wrap-grid {
-  outline: 1px solid #d4d4d8;
-  padding-bottom: 40px;
   position: relative;
+  padding-bottom: var(--base-size-40);
+  outline: 1px solid #d4d4d8;
 }
 
 @media (max-width: calc(20rem * 4)) {
@@ -47,14 +48,22 @@
 
 .theme-name {
   position: absolute;
-  bottom: 0;
   right: 0;
-  background-color: var(--bgColor-muted);
+  bottom: 0;
   padding: var(--base-size-4) var(--base-size-8);
-  font: var(--text-caption-shorthand);
   margin: 0;
+  font: var(--text-caption-shorthand);
+  background-color: var(--bgColor-muted);
 }
 
-.testCustomClassname {
+.testCustomClassnameColor {
   color: var(--fgColor-sponsors);
 }
+
+.testCustomClassnameBgColor {
+  background-color: var(--bgColor-sponsors-emphasis);
+}
+
+.testCustomClassnameBorderColor {
+  border-color: var(--borderColor-sponsors-emphasis);
+}

packages/react/src/ActionList/ActionList.dev.stories.tsx

@@ -103,3 +103,16 @@ export const GroupWithFilledTitleOldAPI = () => {
     </>
   )
 }
+
+export const GroupHeadingCustomClassname = () => (
+  <ActionList>
+    <ActionList.Heading as="h2">Filter by</ActionList.Heading>
+    <ActionList.Group>
+      <ActionList.GroupHeading className="testCustomClassnameColor" as="h3">
+        Repositories
+      </ActionList.GroupHeading>
+      <ActionList.Item onClick={() => {}}>app/assets/modules</ActionList.Item>
+      <ActionList.Item onClick={() => {}}>src/react/components</ActionList.Item>
+    </ActionList.Group>
+  </ActionList>
+)

packages/react/src/ActionList/Group.tsx

@@ -9,6 +9,7 @@ import type {ActionListHeadingProps} from './Heading'
 import {useSlots} from '../hooks/useSlots'
 import {defaultSxProp} from '../utils/defaultSxProp'
 import {invariant} from '../utils/invariant'
+import {clsx} from 'clsx'
 
 export type ActionListGroupProps = {
   /**
@@ -129,6 +130,7 @@ export const GroupHeading: React.FC<React.PropsWithChildren<GroupHeadingProps>>
   _internalBackwardCompatibleTitle,
   auxiliaryText,
   children,
+  className,
   sx = defaultSxProp,
   ...props
 }) => {
@@ -191,7 +193,13 @@ export const GroupHeading: React.FC<React.PropsWithChildren<GroupHeadingProps>>
       ) : (
         // 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.
         <Box sx={styles}>
-          <Heading className="ActionListGroupHeading" as={as || 'h3'} id={groupHeadingId} sx={sx} {...props}>
+          <Heading
+            className={clsx(className, 'ActionListGroupHeading')}
+            as={as || 'h3'}
+            id={groupHeadingId}
+            sx={sx}
+            {...props}
+          >
             {_internalBackwardCompatibleTitle ?? children}
           </Heading>
           {auxiliaryText && <div className="ActionListGroupHeadingDescription">{auxiliaryText}</div>}