diff --git a/.changeset/free-wasps-drop.md b/.changeset/free-wasps-drop.md new file mode 100644 index 00000000000..0da34567fd6 --- /dev/null +++ b/.changeset/free-wasps-drop.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Breadcrumbs overflow menu no longer appears when there are only two crumb items. diff --git a/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-TwoItemsOverflowMenu-narrow-linux.png b/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-TwoItemsOverflowMenu-narrow-linux.png new file mode 100644 index 00000000000..8118954fa0d Binary files /dev/null and b/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-TwoItemsOverflowMenu-narrow-linux.png differ diff --git a/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-TwoItemsOverflowMenuWithRoot-narrow-linux.png b/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-TwoItemsOverflowMenuWithRoot-narrow-linux.png new file mode 100644 index 00000000000..8118954fa0d Binary files /dev/null and b/.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-TwoItemsOverflowMenuWithRoot-narrow-linux.png differ diff --git a/e2e/components/Breadcrumbs.test.ts b/e2e/components/Breadcrumbs.test.ts index d43b91c85c9..2a59221ab34 100644 --- a/e2e/components/Breadcrumbs.test.ts +++ b/e2e/components/Breadcrumbs.test.ts @@ -78,4 +78,32 @@ test.describe('Breadcrumbs', () => { await expect(page).toHaveScreenshot('Breadcrumbs.OverflowMenuWithRoot.narrow.png') }) }) + + test.describe('Two Items With Overflow Menu', () => { + test('narrow viewport @vrt', async ({page}) => { + await visit(page, { + id: 'components-breadcrumbs-features--two-items-with-overflow-menu', + globals: { + colorScheme: 'light', + }, + }) + + await page.setViewportSize({width: viewports['primer.breakpoint.xs'] - 1, height: 768}) + await expect(page).toHaveScreenshot('Breadcrumbs.TwoItemsOverflowMenu.narrow.png') + }) + }) + + test.describe('Two Items With Overflow Menu With Root', () => { + test('narrow viewport @vrt', async ({page}) => { + await visit(page, { + id: 'components-breadcrumbs-features--two-items-with-overflow-menu-with-root', + globals: { + colorScheme: 'light', + }, + }) + + await page.setViewportSize({width: viewports['primer.breakpoint.xs'] - 1, height: 768}) + await expect(page).toHaveScreenshot('Breadcrumbs.TwoItemsOverflowMenuWithRoot.narrow.png') + }) + }) }) diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.features.stories.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.features.stories.tsx index e8eeefbcec5..0df6ac9e5f0 100644 --- a/packages/react/src/Breadcrumbs/Breadcrumbs.features.stories.tsx +++ b/packages/react/src/Breadcrumbs/Breadcrumbs.features.stories.tsx @@ -76,3 +76,21 @@ export const SpaciousVariantWithOverflowWrap = () => ( ) + +export const TwoItemsWithOverflowMenu = () => ( + + Home + + Current Page + + +) + +export const TwoItemsWithOverflowMenuWithRoot = () => ( + + Home + + Current Page + + +) diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx index cd25fe6e1a9..8d5ae785ba6 100644 --- a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx @@ -195,7 +195,7 @@ function Breadcrumbs({className, children, style, overflow = 'wrap', variant = ' let MIN_VISIBLE_ITEMS = 4 if (!eHideRoot) { MIN_VISIBLE_ITEMS = 3 - } else if (isNarrow) { + } else if (isNarrow && childArray.length > 2) { MIN_VISIBLE_ITEMS = 1 }