Breadcrumbs: Show only current page on narrow viewports with overflow menu (#7754)

Co-authored-by: liuliu-dev <6688812+liuliu-dev@users.noreply.github.com>

Author: liuliu-dev

.changeset/fast-pugs-camp.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Breadcrumbs: On narrow viewports, only show the current page breadcrumb and the overflow menu when `overflow="menu"` is set.

.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-OverflowMenu-narrow-linux.png

@@ -1,6 +1,7 @@
 import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
+import {viewports} from '../test-helpers/viewports'
 
 const stories = [
   {
@@ -37,4 +38,44 @@ test.describe('Breadcrumbs', () => {
       }
     })
   }
+
+  test.describe('Overflow Menu', () => {
+    test('narrow viewport @vrt', async ({page}) => {
+      await visit(page, {
+        id: 'components-breadcrumbs-features--overflow-menu',
+        globals: {
+          colorScheme: 'light',
+        },
+      })
+
+      await page.setViewportSize({width: viewports['primer.breakpoint.xs'] - 1, height: 768})
+      await expect(page).toHaveScreenshot('Breadcrumbs.OverflowMenu.narrow.png')
+    })
+
+    test('wide viewport @vrt', async ({page}) => {
+      await visit(page, {
+        id: 'components-breadcrumbs-features--overflow-menu',
+        globals: {
+          colorScheme: 'light',
+        },
+      })
+
+      await page.setViewportSize({width: viewports['primer.breakpoint.md'], height: 768})
+      await expect(page).toHaveScreenshot('Breadcrumbs.OverflowMenu.wide.png')
+    })
+  })
+
+  test.describe('Overflow Menu With Root', () => {
+    test('narrow viewport @vrt', async ({page}) => {
+      await visit(page, {
+        id: 'components-breadcrumbs-features--overflow-menu-with-root',
+        globals: {
+          colorScheme: 'light',
+        },
+      })
+
+      await page.setViewportSize({width: viewports['primer.breakpoint.xs'] - 1, height: 768})
+      await expect(page).toHaveScreenshot('Breadcrumbs.OverflowMenuWithRoot.narrow.png')
+    })
+  })
 })

.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-OverflowMenu-wide-linux.png

@@ -189,7 +189,15 @@ function Breadcrumbs({className, children, style, overflow = 'wrap', variant = '
     (availableWidth: number) => {
       let eHideRoot = effectiveHideRoot
       const MENU_BUTTON_WIDTH = menuButtonWidth
-      const MIN_VISIBLE_ITEMS = !eHideRoot ? 3 : 4
+      const NARROW_BREAKPOINT = 544
+      const isNarrow = availableWidth < NARROW_BREAKPOINT
+
+      let MIN_VISIBLE_ITEMS = 4
+      if (!eHideRoot) {
+        MIN_VISIBLE_ITEMS = 3
+      } else if (isNarrow) {
+        MIN_VISIBLE_ITEMS = 1
+      }
 
       const calculateVisibleItemsWidth = (w: number[]) => {
         const widths = w.reduce((sum, width) => sum + width + 16, 0)