diff --git a/.changeset/shiny-cheetahs-flash.md b/.changeset/shiny-cheetahs-flash.md
new file mode 100644
index 00000000000..d5e89ad0142
--- /dev/null
+++ b/.changeset/shiny-cheetahs-flash.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Bug fix: ActionList Group className prop
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-colorblind-linux.png
new file mode 100644
index 00000000000..c6f30df62c0
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-dimmed-linux.png
new file mode 100644
index 00000000000..0f9d0cc5621
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..e44c0adabfc
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-linux.png
new file mode 100644
index 00000000000..c6f30df62c0
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..c6f30df62c0
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-colorblind-linux.png
new file mode 100644
index 00000000000..ea786b54974
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-high-contrast-linux.png
new file mode 100644
index 00000000000..b05289fcd97
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-linux.png
new file mode 100644
index 00000000000..ea786b54974
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-tritanopia-linux.png
new file mode 100644
index 00000000000..ea786b54974
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/Group-Heading-with-Classname-light-tritanopia-linux.png differ
diff --git a/e2e/components/ActionList.test.ts b/e2e/components/ActionList.test.ts
index 69dd0010c15..99f18363cea 100644
--- a/e2e/components/ActionList.test.ts
+++ b/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()
+ })
+ })
+ }
+ })
})
diff --git a/packages/react/.storybook/storybook.css b/packages/react/.storybook/storybook.css
index 21e5d2d88b4..e75241aed06 100644
--- a/packages/react/.storybook/storybook.css
+++ b/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);
+}
diff --git a/packages/react/src/ActionList/ActionList.dev.stories.tsx b/packages/react/src/ActionList/ActionList.dev.stories.tsx
index 4578ddb7e59..6d0fc3d1da7 100644
--- a/packages/react/src/ActionList/ActionList.dev.stories.tsx
+++ b/packages/react/src/ActionList/ActionList.dev.stories.tsx
@@ -103,3 +103,16 @@ export const GroupWithFilledTitleOldAPI = () => {
>
)
}
+
+export const GroupHeadingCustomClassname = () => (
+
+ Filter by
+
+
+ Repositories
+
+ {}}>app/assets/modules
+ {}}>src/react/components
+
+
+)
diff --git a/packages/react/src/ActionList/Group.tsx b/packages/react/src/ActionList/Group.tsx
index da31c6830ef..fbace08dc7a 100644
--- a/packages/react/src/ActionList/Group.tsx
+++ b/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>
_internalBackwardCompatibleTitle,
auxiliaryText,
children,
+ className,
sx = defaultSxProp,
...props
}) => {
@@ -191,7 +193,13 @@ export const GroupHeading: React.FC>
) : (
// 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.
-
+
{_internalBackwardCompatibleTitle ?? children}
{auxiliaryText && {auxiliaryText}
}