diff --git a/.changeset/smart-hornets-happen.md b/.changeset/smart-hornets-happen.md new file mode 100644 index 00000000000..483c9e5d21f --- /dev/null +++ b/.changeset/smart-hornets-happen.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Fix overflow calculations of more menu button in action bar diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-tritanopia-linux.png index d9daf3707d6..09a975a5a71 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-tritanopia-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-tritanopia-linux.png differ 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 index e83cc6e4e92..ef3267dde68 100644 Binary files a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-colorblind-linux.png 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 index 5f5d8f28f82..c5ca014478e 100644 Binary files a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-dimmed-linux.png 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 index e7c19ea5f8e..994ae8599e0 100644 Binary files a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-high-contrast-linux.png 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 index e83cc6e4e92..ef3267dde68 100644 Binary files a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-linux.png 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 index e83cc6e4e92..ef3267dde68 100644 Binary files a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-tritanopia-linux.png 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 index e1519ddc421..4496dfcd203 100644 Binary files a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-colorblind-linux.png 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 index f71ffeff64d..18fecbaec71 100644 Binary files a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-high-contrast-linux.png 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 index e1519ddc421..4496dfcd203 100644 Binary files a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-linux.png 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 index e1519ddc421..4496dfcd203 100644 Binary files a/.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-light-tritanopia-linux.png 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 index 64c804b87ed..0790444d4ae 100644 --- a/e2e/components/drafts/ActionBar.test.ts +++ b/e2e/components/drafts/ActionBar.test.ts @@ -31,15 +31,15 @@ test.describe('ActionBar', () => { }, }) const toolbarButtonSelector = `button[data-component="IconButton"]` - await expect(page.locator(toolbarButtonSelector)).toHaveCount(9) + await expect(page.locator(toolbarButtonSelector)).toHaveCount(10) await page.setViewportSize({width: viewports['primer.breakpoint.xs'], height: 768}) - await page.getByLabel('Insert Link').waitFor({ + await page.getByLabel('Task List').waitFor({ state: 'hidden', }) - await expect(page.locator(toolbarButtonSelector)).toHaveCount(5) + await expect(page.locator(toolbarButtonSelector)).toHaveCount(8) const moreButtonSelector = page.getByLabel('More Comment box toolbar items') await moreButtonSelector.click() - await expect(page.locator('ul[role="menu"] [role="menuitem"]')).toHaveCount(6) + await expect(page.locator('ul[role="menu"] [role="menuitem"]')).toHaveCount(3) }) }) } diff --git a/packages/react/src/ActionBar/ActionBar.examples.stories.module.css b/packages/react/src/ActionBar/ActionBar.examples.stories.module.css index d02c61fdee9..ba8f3744204 100644 --- a/packages/react/src/ActionBar/ActionBar.examples.stories.module.css +++ b/packages/react/src/ActionBar/ActionBar.examples.stories.module.css @@ -20,7 +20,15 @@ } .CommentBoxHeaderLeft { - width: 50%; + width: 100%; + min-width: 0; +} + +.CommentBoxHeaderRight { + display: flex; + gap: var(--base-size-8); + justify-content: flex-end; + align-items: center; } .DialogContent { diff --git a/packages/react/src/ActionBar/ActionBar.examples.stories.tsx b/packages/react/src/ActionBar/ActionBar.examples.stories.tsx index 3160d41f2b6..d7c18e79123 100644 --- a/packages/react/src/ActionBar/ActionBar.examples.stories.tsx +++ b/packages/react/src/ActionBar/ActionBar.examples.stories.tsx @@ -95,6 +95,10 @@ export const CommentBox = (props: CommentBoxProps) => { > +
+ + +