diff --git a/.changeset/mean-terms-bathe.md b/.changeset/mean-terms-bathe.md new file mode 100644 index 00000000000..9b7ddae6349 --- /dev/null +++ b/.changeset/mean-terms-bathe.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +ActionBar: Add a few fixes and relevant tests diff --git a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-colorblind-linux.png new file mode 100644 index 00000000000..4a72d6fa66f Binary files /dev/null and b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-dimmed-linux.png new file mode 100644 index 00000000000..f2773d1d698 Binary files /dev/null and b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-high-contrast-linux.png new file mode 100644 index 00000000000..ce5416737d1 Binary files /dev/null and b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-linux.png b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-linux.png new file mode 100644 index 00000000000..4a72d6fa66f Binary files /dev/null and b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-tritanopia-linux.png new file mode 100644 index 00000000000..4a72d6fa66f Binary files /dev/null and b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-colorblind-linux.png new file mode 100644 index 00000000000..ee281093c96 Binary files /dev/null and b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-high-contrast-linux.png new file mode 100644 index 00000000000..b5ea113e4b1 Binary files /dev/null and b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-linux.png b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-linux.png new file mode 100644 index 00000000000..ee281093c96 Binary files /dev/null and b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-tritanopia-linux.png new file mode 100644 index 00000000000..ee281093c96 Binary files /dev/null and b/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-tritanopia-linux.png differ diff --git a/e2e/components/drafts/ActionBar.test.ts b/e2e/components/drafts/ActionBar.test.ts new file mode 100644 index 00000000000..f7c74f0f750 --- /dev/null +++ b/e2e/components/drafts/ActionBar.test.ts @@ -0,0 +1,54 @@ +import {test, expect} from '@playwright/test' +import {visit} from '../../test-helpers/storybook' +import {themes} from '../../test-helpers/themes' +import {viewports} from '../../test-helpers/viewports' + +test.describe('ActionBar', () => { + test.describe('Default state', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-actionbar--comment-box', + globals: { + colorScheme: theme, + }, + }) + expect(await page.screenshot()).toMatchSnapshot(`drafts.ActionBar.CommentBox.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-actionbar--comment-box', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('ActionBar Interactions', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('Overflow interaction @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-actionbar--comment-box', + globals: { + colorScheme: theme, + }, + }) + const toolbarButtonSelector = `button[data-component="IconButton"]` + await expect(page.locator(toolbarButtonSelector)).toHaveCount(10) + await page.setViewportSize({width: viewports['primer.breakpoint.xs'], height: 768}) + await expect(page.locator(toolbarButtonSelector)).toHaveCount(6) + const moreButtonSelector = `button[aria-label="More Comment box toolbar items"]` + await page.locator(moreButtonSelector).click() + await expect(page.locator('ul[role="menu"]>li')).toHaveCount(5) + }) + }) + } + }) +}) diff --git a/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx b/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx index 27d5ce0173e..f2dd0563a0a 100644 --- a/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx +++ b/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx @@ -68,7 +68,7 @@ export const CommentBox = (props: CommentBoxProps) => { const [value, setValue] = React.useState('') const [isOpen, setIsOpen] = React.useState(false) const buttonRef = React.useRef(null) - const toolBarLabel = `${ariaLabel} toolbar` + const toolBarLabel = `${ariaLabel ? ariaLabel : 'Comment box'} toolbar` return ( ).current.getBoundingClientRect() setChildrenWidth({text, width: domRect.width}) }, [ref, setChildrenWidth]) - return + return }) const sizeToHeight = {