diff --git a/.changeset/proud-timers-grow.md b/.changeset/proud-timers-grow.md new file mode 100644 index 00000000000..d8661fac52a --- /dev/null +++ b/.changeset/proud-timers-grow.md @@ -0,0 +1,6 @@ +--- +"@primer/react": patch +--- + +Breadcrumbs: Remove feature flag for overflow_menu, this behavior is now the default + diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.features.stories.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.features.stories.tsx index 1e8d695d3a4..b33efcbc5dd 100644 --- a/packages/react/src/Breadcrumbs/Breadcrumbs.features.stories.tsx +++ b/packages/react/src/Breadcrumbs/Breadcrumbs.features.stories.tsx @@ -2,7 +2,6 @@ import type {Meta} from '@storybook/react-vite' import type React from 'react' import type {ComponentProps} from '../utils/types' import Breadcrumbs from './Breadcrumbs' -import {FeatureFlags} from '../FeatureFlags' export default { title: 'Components/Breadcrumbs/Features', @@ -23,23 +22,7 @@ export const OverflowWrap = () => ( ) -export const OverflowMenuFeatureFlagEnabled = () => ( - - - Home - Products - Category - Subcategory - Item - Details - - Current Page - - - -) - -export const OverflowMenuFeatureFlagDisabled = () => ( +export const OverflowMenu = () => ( Home Products @@ -53,7 +36,7 @@ export const OverflowMenuFeatureFlagDisabled = () => ( ) -export const OverflowMenuShowRootFeatureFlagDisabled = () => ( +export const OverflowMenuShowRoot = () => ( github Teams @@ -66,35 +49,18 @@ export const OverflowMenuShowRootFeatureFlagDisabled = () => ( ) -export const OverflowMenuShowRootFeatureFlagEnabled = () => ( - - - github - Teams - Engineering - core-productivity - collaboration-workflows-flex - - global-navigation-reviewers - - - -) - export const SpaciousVariantWithOverflowMenu = () => ( - - - Home - Products - Category - Subcategory - Item - Details - - Current Page - - - + + Home + Products + Category + Subcategory + Item + Details + + Current Page + + ) export const SpaciousVariantWithOverflowWrap = () => ( diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx index 6e69095ca79..b773b1f9596 100644 --- a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx @@ -10,7 +10,6 @@ import {useResizeObserver} from '../hooks/useResizeObserver' import type {ResizeObserverEntry} from '../hooks/useResizeObserver' import {useOnEscapePress} from '../hooks/useOnEscapePress' import {useOnOutsideClick} from '../hooks/useOnOutsideClick' -import {useFeatureFlag} from '../FeatureFlags' export type BreadcrumbsProps = React.PropsWithChildren<{ /** @@ -145,8 +144,6 @@ const getValidChildren = (children: React.ReactNode) => { } function Breadcrumbs({className, children, style, overflow = 'wrap', variant = 'normal'}: BreadcrumbsProps) { - const overflowMenuEnabled = useFeatureFlag('primer_react_breadcrumbs_overflow_menu') - const wrappedChildren = React.Children.map(children, child =>
  • {child}
    • ) const containerRef = useRef(null) const measureMenuButton = useCallback((element: HTMLDetailsElement | null) => { @@ -176,18 +173,13 @@ function Breadcrumbs({className, children, style, overflow = 'wrap', variant = ' useEffect(() => { const listElement = containerRef.current?.querySelector('ol') - if ( - overflowMenuEnabled && - listElement && - listElement.children.length > 0 && - listElement.children.length === childArray.length - ) { + if (listElement && listElement.children.length > 0 && listElement.children.length === childArray.length) { const listElementArray = Array.from(listElement.children) as HTMLElement[] const widths = listElementArray.map(child => child.offsetWidth) setChildArrayWidths(widths) setRootItemWidth(listElementArray[0].offsetWidth) } - }, [childArray, overflowMenuEnabled]) + }, [childArray]) const calculateOverflow = useCallback( (availableWidth: number) => { @@ -247,7 +239,7 @@ function Breadcrumbs({className, children, style, overflow = 'wrap', variant = ' const handleResize = useCallback( (entries: ResizeObserverEntry[]) => { - if (overflowMenuEnabled && entries[0]) { + if (entries[0]) { const containerWidth = entries[0].contentRect.width const result = calculateOverflow(containerWidth) if ( @@ -260,73 +252,66 @@ function Breadcrumbs({className, children, style, overflow = 'wrap', variant = ' } } }, - [calculateOverflow, effectiveHideRoot, menuItems.length, overflowMenuEnabled, visibleItems.length], + [calculateOverflow, effectiveHideRoot, menuItems.length, visibleItems.length], ) useResizeObserver(handleResize, containerRef) useEffect(() => { - if ( - overflowMenuEnabled && - (overflow === 'menu' || overflow === 'menu-with-root') && - childArray.length > 5 && - menuItems.length === 0 - ) { + if ((overflow === 'menu' || overflow === 'menu-with-root') && childArray.length > 5 && menuItems.length === 0) { const containerWidth = containerRef.current?.offsetWidth || 800 const result = calculateOverflow(containerWidth) setVisibleItems(result.visibleItems) setMenuItems(result.menuItems) setEffectiveHideRoot(result.effectiveHideRoot) } - }, [overflow, childArray, calculateOverflow, menuItems.length, overflowMenuEnabled]) + }, [overflow, childArray, calculateOverflow, menuItems.length]) const finalChildren = React.useMemo(() => { - if (overflowMenuEnabled) { - if (overflow === 'wrap' || menuItems.length === 0) { - return React.Children.map(children, child =>
  • {child}
    • ) - } + if (overflow === 'wrap' || menuItems.length === 0) { + return React.Children.map(children, child =>
  • {child}
    • ) + } - let effectiveMenuItems = [...menuItems] - // In 'menu-with-root' mode, include the root item inside the menu even if it's visible in the breadcrumbs - if (!effectiveHideRoot) { - effectiveMenuItems = [...menuItems.slice(1)] - } - const menuElement = ( -
  • - - -
    • - ) - - const visibleElements = visibleItems.map((child, index) => ( -
  • - {child} - -
    • - )) - - const rootElement = ( -
  • - {rootItem} - -
    • - ) - - if (effectiveHideRoot) { - // Show: [overflow menu, leaf breadcrumb] - return [menuElement, ...visibleElements] - } else { - // Show: [root breadcrumb, overflow menu, leaf breadcrumb] - return [rootElement, menuElement, ...visibleElements] - } + let effectiveMenuItems = [...menuItems] + // In 'menu-with-root' mode, include the root item inside the menu even if it's visible in the breadcrumbs + if (!effectiveHideRoot) { + effectiveMenuItems = [...menuItems.slice(1)] + } + const menuElement = ( +
  • + + +
    • + ) + + const visibleElements = visibleItems.map((child, index) => ( +
  • + {child} + +
    • + )) + + const rootElement = ( +
  • + {rootItem} + +
    • + ) + + if (effectiveHideRoot) { + // Show: [overflow menu, leaf breadcrumb] + return [menuElement, ...visibleElements] + } else { + // Show: [root breadcrumb, overflow menu, leaf breadcrumb] + return [rootElement, menuElement, ...visibleElements] } - }, [overflowMenuEnabled, overflow, menuItems, effectiveHideRoot, measureMenuButton, visibleItems, rootItem, children]) + }, [overflow, menuItems, effectiveHideRoot, measureMenuButton, visibleItems, rootItem, children]) - return overflowMenuEnabled ? ( + return (