Skip to content

Commit a48716e

Browse files
pksjcesiddharthkpprimer[bot]
authored
Remove breadcrumbs overflow menu feature flag (#7054)
Co-authored-by: Siddharth Kshetrapal <[email protected]> Co-authored-by: primer[bot] <119360173+primer[bot]@users.noreply.github.com>
1 parent fffff4a commit a48716e

File tree

5 files changed

+83
-163
lines changed

5 files changed

+83
-163
lines changed

‎.changeset/chilled-eggs-warn.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/react": patch
3+
---
4+
5+
Breadcrumbs: Remove feature flag for overflow_menu, this behavior is now the default

‎packages/react/src/Breadcrumbs/Breadcrumbs.features.stories.tsx‎

Lines changed: 13 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import type {Meta} from '@storybook/react-vite'
22
import type React from 'react'
33
import type {ComponentProps} from '../utils/types'
44
import Breadcrumbs from './Breadcrumbs'
5-
import {FeatureFlags} from '../FeatureFlags'
65

76
export default {
87
title: 'Components/Breadcrumbs/Features',
@@ -23,23 +22,7 @@ export const OverflowWrap = () => (
2322
</Breadcrumbs>
2423
)
2524

26-
export const OverflowMenuFeatureFlagEnabled = () => (
27-
<FeatureFlags flags={{primer_react_breadcrumbs_overflow_menu: true}}>
28-
<Breadcrumbs overflow="menu">
29-
<Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
30-
<Breadcrumbs.Item href="#">Products</Breadcrumbs.Item>
31-
<Breadcrumbs.Item href="#">Category</Breadcrumbs.Item>
32-
<Breadcrumbs.Item href="#">Subcategory</Breadcrumbs.Item>
33-
<Breadcrumbs.Item href="#">Item</Breadcrumbs.Item>
34-
<Breadcrumbs.Item href="#">Details</Breadcrumbs.Item>
35-
<Breadcrumbs.Item href="#" selected>
36-
Current Page
37-
</Breadcrumbs.Item>
38-
</Breadcrumbs>
39-
</FeatureFlags>
40-
)
41-
42-
export const OverflowMenuFeatureFlagDisabled = () => (
25+
export const OverflowMenu = () => (
4326
<Breadcrumbs overflow="menu">
4427
<Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
4528
<Breadcrumbs.Item href="#">Products</Breadcrumbs.Item>
@@ -53,7 +36,7 @@ export const OverflowMenuFeatureFlagDisabled = () => (
5336
</Breadcrumbs>
5437
)
5538

56-
export const OverflowMenuShowRootFeatureFlagDisabled = () => (
39+
export const OverflowMenuShowRoot = () => (
5740
<Breadcrumbs overflow="menu-with-root">
5841
<Breadcrumbs.Item href="#">github</Breadcrumbs.Item>
5942
<Breadcrumbs.Item href="#">Teams</Breadcrumbs.Item>
@@ -66,35 +49,18 @@ export const OverflowMenuShowRootFeatureFlagDisabled = () => (
6649
</Breadcrumbs>
6750
)
6851

69-
export const OverflowMenuShowRootFeatureFlagEnabled = () => (
70-
<FeatureFlags flags={{primer_react_breadcrumbs_overflow_menu: true}}>
71-
<Breadcrumbs overflow="menu-with-root">
72-
<Breadcrumbs.Item href="#">github</Breadcrumbs.Item>
73-
<Breadcrumbs.Item href="#">Teams</Breadcrumbs.Item>
74-
<Breadcrumbs.Item href="#">Engineering</Breadcrumbs.Item>
75-
<Breadcrumbs.Item href="#">core-productivity</Breadcrumbs.Item>
76-
<Breadcrumbs.Item href="#">collaboration-workflows-flex</Breadcrumbs.Item>
77-
<Breadcrumbs.Item href="#" selected>
78-
global-navigation-reviewers
79-
</Breadcrumbs.Item>
80-
</Breadcrumbs>
81-
</FeatureFlags>
82-
)
83-
8452
export const SpaciousVariantWithOverflowMenu = () => (
85-
<FeatureFlags flags={{primer_react_breadcrumbs_overflow_menu: true}}>
86-
<Breadcrumbs overflow="menu" variant="spacious">
87-
<Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
88-
<Breadcrumbs.Item href="#">Products</Breadcrumbs.Item>
89-
<Breadcrumbs.Item href="#">Category</Breadcrumbs.Item>
90-
<Breadcrumbs.Item href="#">Subcategory</Breadcrumbs.Item>
91-
<Breadcrumbs.Item href="#">Item</Breadcrumbs.Item>
92-
<Breadcrumbs.Item href="#">Details</Breadcrumbs.Item>
93-
<Breadcrumbs.Item href="#" selected>
94-
Current Page
95-
</Breadcrumbs.Item>
96-
</Breadcrumbs>
97-
</FeatureFlags>
53+
<Breadcrumbs overflow="menu" variant="spacious">
54+
<Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
55+
<Breadcrumbs.Item href="#">Products</Breadcrumbs.Item>
56+
<Breadcrumbs.Item href="#">Category</Breadcrumbs.Item>
57+
<Breadcrumbs.Item href="#">Subcategory</Breadcrumbs.Item>
58+
<Breadcrumbs.Item href="#">Item</Breadcrumbs.Item>
59+
<Breadcrumbs.Item href="#">Details</Breadcrumbs.Item>
60+
<Breadcrumbs.Item href="#" selected>
61+
Current Page
62+
</Breadcrumbs.Item>
63+
</Breadcrumbs>
9864
)
9965

10066
export const SpaciousVariantWithOverflowWrap = () => (

‎packages/react/src/Breadcrumbs/Breadcrumbs.tsx‎

Lines changed: 47 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {useResizeObserver} from '../hooks/useResizeObserver'
1010
import type {ResizeObserverEntry} from '../hooks/useResizeObserver'
1111
import {useOnEscapePress} from '../hooks/useOnEscapePress'
1212
import {useOnOutsideClick} from '../hooks/useOnOutsideClick'
13-
import {useFeatureFlag} from '../FeatureFlags'
1413

1514
export type BreadcrumbsProps = React.PropsWithChildren<{
1615
/**
@@ -145,8 +144,6 @@ const getValidChildren = (children: React.ReactNode) => {
145144
}
146145

147146
function Breadcrumbs({className, children, style, overflow = 'wrap', variant = 'normal'}: BreadcrumbsProps) {
148-
const overflowMenuEnabled = useFeatureFlag('primer_react_breadcrumbs_overflow_menu')
149-
const wrappedChildren = React.Children.map(children, child => <li className={classes.ItemWrapper}>{child}</li>)
150147
const containerRef = useRef<HTMLElement>(null)
151148

152149
const measureMenuButton = useCallback((element: HTMLDetailsElement | null) => {
@@ -176,18 +173,13 @@ function Breadcrumbs({className, children, style, overflow = 'wrap', variant = '
176173

177174
useEffect(() => {
178175
const listElement = containerRef.current?.querySelector('ol')
179-
if (
180-
overflowMenuEnabled &&
181-
listElement &&
182-
listElement.children.length > 0 &&
183-
listElement.children.length === childArray.length
184-
) {
176+
if (listElement && listElement.children.length > 0 && listElement.children.length === childArray.length) {
185177
const listElementArray = Array.from(listElement.children) as HTMLElement[]
186178
const widths = listElementArray.map(child => child.offsetWidth)
187179
setChildArrayWidths(widths)
188180
setRootItemWidth(listElementArray[0].offsetWidth)
189181
}
190-
}, [childArray, overflowMenuEnabled])
182+
}, [childArray])
191183

192184
const calculateOverflow = useCallback(
193185
(availableWidth: number) => {
@@ -247,7 +239,7 @@ function Breadcrumbs({className, children, style, overflow = 'wrap', variant = '
247239

248240
const handleResize = useCallback(
249241
(entries: ResizeObserverEntry[]) => {
250-
if (overflowMenuEnabled && entries[0]) {
242+
if (entries[0]) {
251243
const containerWidth = entries[0].contentRect.width
252244
const result = calculateOverflow(containerWidth)
253245
if (
@@ -260,73 +252,66 @@ function Breadcrumbs({className, children, style, overflow = 'wrap', variant = '
260252
}
261253
}
262254
},
263-
[calculateOverflow, effectiveHideRoot, menuItems.length, overflowMenuEnabled, visibleItems.length],
255+
[calculateOverflow, effectiveHideRoot, menuItems.length, visibleItems.length],
264256
)
265257

266258
useResizeObserver(handleResize, containerRef)
267259

268260
useEffect(() => {
269-
if (
270-
overflowMenuEnabled &&
271-
(overflow === 'menu' || overflow === 'menu-with-root') &&
272-
childArray.length > 5 &&
273-
menuItems.length === 0
274-
) {
261+
if ((overflow === 'menu' || overflow === 'menu-with-root') && childArray.length > 5 && menuItems.length === 0) {
275262
const containerWidth = containerRef.current?.offsetWidth || 800
276263
const result = calculateOverflow(containerWidth)
277264
setVisibleItems(result.visibleItems)
278265
setMenuItems(result.menuItems)
279266
setEffectiveHideRoot(result.effectiveHideRoot)
280267
}
281-
}, [overflow, childArray, calculateOverflow, menuItems.length, overflowMenuEnabled])
268+
}, [overflow, childArray, calculateOverflow, menuItems.length])
282269

283270
const finalChildren = React.useMemo(() => {
284-
if (overflowMenuEnabled) {
285-
if (overflow === 'wrap' || menuItems.length === 0) {
286-
return React.Children.map(children, child => <li className={classes.ItemWrapper}>{child}</li>)
287-
}
271+
if (overflow === 'wrap' || menuItems.length === 0) {
272+
return React.Children.map(children, child => <li className={classes.ItemWrapper}>{child}</li>)
273+
}
288274

289-
let effectiveMenuItems = [...menuItems]
290-
// In 'menu-with-root' mode, include the root item inside the menu even if it's visible in the breadcrumbs
291-
if (!effectiveHideRoot) {
292-
effectiveMenuItems = [...menuItems.slice(1)]
293-
}
294-
const menuElement = (
295-
<li className={classes.BreadcrumbsItem} key="breadcrumbs-menu">
296-
<BreadcrumbsMenuItem
297-
ref={measureMenuButton}
298-
items={effectiveMenuItems}
299-
aria-label={`${effectiveMenuItems.length} more breadcrumb items`}
300-
/>
301-
<ItemSeparator />
302-
</li>
303-
)
304-
305-
const visibleElements = visibleItems.map((child, index) => (
306-
<li className={classes.BreadcrumbsItem} key={`visible + ${index}`}>
307-
{child}
308-
<ItemSeparator />
309-
</li>
310-
))
311-
312-
const rootElement = (
313-
<li className={classes.BreadcrumbsItem} key={`rootElement`}>
314-
{rootItem}
315-
<ItemSeparator />
316-
</li>
317-
)
318-
319-
if (effectiveHideRoot) {
320-
// Show: [overflow menu, leaf breadcrumb]
321-
return [menuElement, ...visibleElements]
322-
} else {
323-
// Show: [root breadcrumb, overflow menu, leaf breadcrumb]
324-
return [rootElement, menuElement, ...visibleElements]
325-
}
275+
let effectiveMenuItems = [...menuItems]
276+
// In 'menu-with-root' mode, include the root item inside the menu even if it's visible in the breadcrumbs
277+
if (!effectiveHideRoot) {
278+
effectiveMenuItems = [...menuItems.slice(1)]
279+
}
280+
const menuElement = (
281+
<li className={classes.BreadcrumbsItem} key="breadcrumbs-menu">
282+
<BreadcrumbsMenuItem
283+
ref={measureMenuButton}
284+
items={effectiveMenuItems}
285+
aria-label={`${effectiveMenuItems.length} more breadcrumb items`}
286+
/>
287+
<ItemSeparator />
288+
</li>
289+
)
290+
291+
const visibleElements = visibleItems.map((child, index) => (
292+
<li className={classes.BreadcrumbsItem} key={`visible + ${index}`}>
293+
{child}
294+
<ItemSeparator />
295+
</li>
296+
))
297+
298+
const rootElement = (
299+
<li className={classes.BreadcrumbsItem} key={`rootElement`}>
300+
{rootItem}
301+
<ItemSeparator />
302+
</li>
303+
)
304+
305+
if (effectiveHideRoot) {
306+
// Show: [overflow menu, leaf breadcrumb]
307+
return [menuElement, ...visibleElements]
308+
} else {
309+
// Show: [root breadcrumb, overflow menu, leaf breadcrumb]
310+
return [rootElement, menuElement, ...visibleElements]
326311
}
327-
}, [overflowMenuEnabled, overflow, menuItems, effectiveHideRoot, measureMenuButton, visibleItems, rootItem, children])
312+
}, [overflow, menuItems, effectiveHideRoot, measureMenuButton, visibleItems, rootItem, children])
328313

329-
return overflowMenuEnabled ? (
314+
return (
330315
<nav
331316
className={clsx(className, classes.BreadcrumbsBase)}
332317
aria-label="Breadcrumbs"
@@ -337,15 +322,6 @@ function Breadcrumbs({className, children, style, overflow = 'wrap', variant = '
337322
>
338323
<BreadcrumbsList>{finalChildren}</BreadcrumbsList>
339324
</nav>
340-
) : (
341-
<nav
342-
className={clsx(className, classes.BreadcrumbsBase)}
343-
aria-label="Breadcrumbs"
344-
style={style}
345-
data-variant={variant}
346-
>
347-
<BreadcrumbsList>{wrappedChildren}</BreadcrumbsList>
348-
</nav>
349325
)
350326
}
351327

0 commit comments

Comments
 (0)