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}
}