From b95e5750f47947762018558e555d7f3333b485b4 Mon Sep 17 00:00:00 2001 From: Liu Liu Date: Tue, 28 Apr 2026 14:04:17 -0700 Subject: [PATCH 1/3] >2, tests, stories --- e2e/components/Breadcrumbs.test.ts | 28 +++++++++++++++++++ .../Breadcrumbs.features.stories.tsx | 18 ++++++++++++ .../react/src/Breadcrumbs/Breadcrumbs.tsx | 2 +- 3 files changed, 47 insertions(+), 1 deletion(-) 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 } From deb158754a269fde96fde753c4604387f522f132 Mon Sep 17 00:00:00 2001 From: Liu Liu Date: Tue, 28 Apr 2026 14:05:14 -0700 Subject: [PATCH 2/3] changeset --- .changeset/free-wasps-drop.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/free-wasps-drop.md 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. From a2680e6203b5b33980e12e4987fd46e59a03d3e5 Mon Sep 17 00:00:00 2001 From: liuliu-dev <6688812+liuliu-dev@users.noreply.github.com> Date: Tue, 28 Apr 2026 21:24:03 +0000 Subject: [PATCH 3/3] test(vrt): update snapshots --- ...dcrumbs-TwoItemsOverflowMenu-narrow-linux.png | Bin 0 -> 5254 bytes ...TwoItemsOverflowMenuWithRoot-narrow-linux.png | Bin 0 -> 5254 bytes 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 .playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-TwoItemsOverflowMenu-narrow-linux.png create mode 100644 .playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-TwoItemsOverflowMenuWithRoot-narrow-linux.png 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 0000000000000000000000000000000000000000..8118954fa0d230ad77368d345116d0e2ab33bdea GIT binary patch literal 5254 zcmeHL`B&3-7X6|XMlCQi4xmtAIu=nVi?S%BfYySg3RJeJVbM~c)IgLNB3bQFhtpPq ztq^356~h*i02=lrVwA|fgf$6-#Q=eXuxBTO{S)Swo;imf-~Hu%?!E7G&pYp@uY)fb zAFw zofQw_T|GFf*G~O-?q3A*C-)yt)XD`@WBzpy;u5|dFE-?ibr$$sY7ZrTV&>5vT2=dx z+)4QQU|7#!Mn?=ytKKSQE{ zw_z5*+W%VKyrNP^`bcu&@)Gsy^sP6$xq#=o^OFt6HlYT})0@<& zmP?P7^NR8i*vN~H*1TguB|-+IuPmr=OUjz)bfkxe@hbE$yIP>5v+8rBpYqBOVv@YR z4T(`sXIfRWCtLFfe#;9?g^>AC>$ch|L*BSPbv_%)yhHIAsh|K_f$G@JJQvT~ol+Vb zm0Zc;IwQLqZ7lSvETpeP20s5}dB=8~q3>FrM+kZ|^Fp>@@zrPvI(d$t*vemiy$Xp@ z@(W4bC#nt+&%6^eg3+5#HDx_=r zJOm6`Uvs28gXt~P?bPNpmvRVFh8y-RnVf9z`VZ>7lUE*s z8l-g-*Zd&*4Yxj)xV|mkI?@`yR#}eZr#I9Ai;WU<@lVeada8g=ufIaibAF8CW1~YWN@`g*Bet&U;p64BdPOPq^LHoPbSAtwZYZJcz%by@7CMB6D`RQ z^#<3TejSB zJKy#8jI2R;MmvyM7F?XRR+*U7mc%QwMo3p>7k^l8WhM)3N%%IsJ9K4LG+hW|F%)>~ z{`f*_32J6wmf%&jAsIBt0|Vx+q8ewrz41<`6t!G4SU5K`TR-*Ybb`s4%%}^;F1uaY z`Gd6uTXSC`$GMiH81AK)Ih~=ucwDQDm(5Y!b#32deQz1bcVXX3|EdYqk-^&%RjB$R zuQaAV`j1iaAckpXae|qzpeFW|_NyhUtlx*{cd zX>q$${ThGQ%|Dy(YIr@rq6JCDzF(Zt$A z*ZpzW91AMxZ-x0JNR_tEyym1w{&UQ5;t4y~T-Y-Ng{)tGfuJn5jn&S|tx6eBqJO9tsvWCCv7y2?$x;gr3&`uRbpAv%o25YQtCBs^|t>SN?*%9W#s?6)h6 zh($ScSWtnmYIv}xz=PTwi)9Q4WT94P``mEa^QNYbie=yR4#*z_Yn&ZlR7^C=M4rR* zDMj6nBmCs=_yNWavFGyBaD7BgijwJ4;yE*}nlyJrs0I#nWgqsc)0VT=JUpOEWLINA z*0$vYgexy-#gmCyU7omc4!wj>=uQ!89FQHXPIw-q zZWT_)o>AP9KD+9ch!3XtPTsl7n9#;NgMJx>siQa@AfHny)o0BFS=!c&G)2^MkmS^OACmd_BV4H$}f$RM+tUL;tg?a z9A(ytsNJ@Lu{_XQ(nZORCsjtt*BWem)Z`|**A5M&2u{DiGj=(W@>`<4x| zF}oG{Jsn|Ap{l;RnaA{0PCl8I3w2tq-}_75S=XeqgdimT|G=?MiP)|;}U^$`a5Ho2k3fturAiGZha;`Q*S$$ zbN`|s7Yyyc&T4Yd90A9qNeq{e3-C0yHFB9LGRS<9#8YoUQnZ0B^|{$$16ZBOQp#8@ zyu24e%Q|-_k{2EATpReeS9R56X~P*NKHsphTh1VDtSehMYkBgUZ#4+K zFM2DlH8p})7DPBBeR$pkR0kys-8NXP#Nx>^1jWP(D%|OodSSWydGCqY(I|}|v}cjo zV(xS;3jXHh?+Txquc9@*kd)`z)Gk@m1^I!Od&o;aU7h^;IkAkYwhfQBFZHP9qbEFao|z00vlgtoWOG z@|?dNCHZKI)?*HD&g{I!Qv~H5>|FvWxVHiGTZ?F=@K za#xMrVc7i(yHT*4gnvpBF5B)227nJ--roXtE%;L`*p+=(_W!FLU{Y@Y0D8T-%f^$P gYog)%=-3PVF8%z>exQ=Kg8+g4!C%lmzy9z40!?7acmMzZ literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..8118954fa0d230ad77368d345116d0e2ab33bdea GIT binary patch literal 5254 zcmeHL`B&3-7X6|XMlCQi4xmtAIu=nVi?S%BfYySg3RJeJVbM~c)IgLNB3bQFhtpPq ztq^356~h*i02=lrVwA|fgf$6-#Q=eXuxBTO{S)Swo;imf-~Hu%?!E7G&pYp@uY)fb zAFw zofQw_T|GFf*G~O-?q3A*C-)yt)XD`@WBzpy;u5|dFE-?ibr$$sY7ZrTV&>5vT2=dx z+)4QQU|7#!Mn?=ytKKSQE{ zw_z5*+W%VKyrNP^`bcu&@)Gsy^sP6$xq#=o^OFt6HlYT})0@<& zmP?P7^NR8i*vN~H*1TguB|-+IuPmr=OUjz)bfkxe@hbE$yIP>5v+8rBpYqBOVv@YR z4T(`sXIfRWCtLFfe#;9?g^>AC>$ch|L*BSPbv_%)yhHIAsh|K_f$G@JJQvT~ol+Vb zm0Zc;IwQLqZ7lSvETpeP20s5}dB=8~q3>FrM+kZ|^Fp>@@zrPvI(d$t*vemiy$Xp@ z@(W4bC#nt+&%6^eg3+5#HDx_=r zJOm6`Uvs28gXt~P?bPNpmvRVFh8y-RnVf9z`VZ>7lUE*s z8l-g-*Zd&*4Yxj)xV|mkI?@`yR#}eZr#I9Ai;WU<@lVeada8g=ufIaibAF8CW1~YWN@`g*Bet&U;p64BdPOPq^LHoPbSAtwZYZJcz%by@7CMB6D`RQ z^#<3TejSB zJKy#8jI2R;MmvyM7F?XRR+*U7mc%QwMo3p>7k^l8WhM)3N%%IsJ9K4LG+hW|F%)>~ z{`f*_32J6wmf%&jAsIBt0|Vx+q8ewrz41<`6t!G4SU5K`TR-*Ybb`s4%%}^;F1uaY z`Gd6uTXSC`$GMiH81AK)Ih~=ucwDQDm(5Y!b#32deQz1bcVXX3|EdYqk-^&%RjB$R zuQaAV`j1iaAckpXae|qzpeFW|_NyhUtlx*{cd zX>q$${ThGQ%|Dy(YIr@rq6JCDzF(Zt$A z*ZpzW91AMxZ-x0JNR_tEyym1w{&UQ5;t4y~T-Y-Ng{)tGfuJn5jn&S|tx6eBqJO9tsvWCCv7y2?$x;gr3&`uRbpAv%o25YQtCBs^|t>SN?*%9W#s?6)h6 zh($ScSWtnmYIv}xz=PTwi)9Q4WT94P``mEa^QNYbie=yR4#*z_Yn&ZlR7^C=M4rR* zDMj6nBmCs=_yNWavFGyBaD7BgijwJ4;yE*}nlyJrs0I#nWgqsc)0VT=JUpOEWLINA z*0$vYgexy-#gmCyU7omc4!wj>=uQ!89FQHXPIw-q zZWT_)o>AP9KD+9ch!3XtPTsl7n9#;NgMJx>siQa@AfHny)o0BFS=!c&G)2^MkmS^OACmd_BV4H$}f$RM+tUL;tg?a z9A(ytsNJ@Lu{_XQ(nZORCsjtt*BWem)Z`|**A5M&2u{DiGj=(W@>`<4x| zF}oG{Jsn|Ap{l;RnaA{0PCl8I3w2tq-}_75S=XeqgdimT|G=?MiP)|;}U^$`a5Ho2k3fturAiGZha;`Q*S$$ zbN`|s7Yyyc&T4Yd90A9qNeq{e3-C0yHFB9LGRS<9#8YoUQnZ0B^|{$$16ZBOQp#8@ zyu24e%Q|-_k{2EATpReeS9R56X~P*NKHsphTh1VDtSehMYkBgUZ#4+K zFM2DlH8p})7DPBBeR$pkR0kys-8NXP#Nx>^1jWP(D%|OodSSWydGCqY(I|}|v}cjo zV(xS;3jXHh?+Txquc9@*kd)`z)Gk@m1^I!Od&o;aU7h^;IkAkYwhfQBFZHP9qbEFao|z00vlgtoWOG z@|?dNCHZKI)?*HD&g{I!Qv~H5>|FvWxVHiGTZ?F=@K za#xMrVc7i(yHT*4gnvpBF5B)227nJ--roXtE%;L`*p+=(_W!FLU{Y@Y0D8T-%f^$P gYog)%=-3PVF8%z>exQ=Kg8+g4!C%lmzy9z40!?7acmMzZ literal 0 HcmV?d00001