Small fixes to menu button

Author: pksjce

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

@@ -38,14 +38,13 @@ export const OverflowMenu = () => (
 
 export const OverflowMenuShowRoot = () => (
   <Breadcrumbs overflow="menu" hideRoot={false}>
-    <Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
-    <Breadcrumbs.Item href="#">Products</Breadcrumbs.Item>
-    <Breadcrumbs.Item href="#">Category</Breadcrumbs.Item>
-    <Breadcrumbs.Item href="#">Subcategory</Breadcrumbs.Item>
-    <Breadcrumbs.Item href="#">Item</Breadcrumbs.Item>
-    <Breadcrumbs.Item href="#">Details</Breadcrumbs.Item>
+    <Breadcrumbs.Item href="#">github</Breadcrumbs.Item>
+    <Breadcrumbs.Item href="#">Teams</Breadcrumbs.Item>
+    <Breadcrumbs.Item href="#">Engineering</Breadcrumbs.Item>
+    <Breadcrumbs.Item href="#">core-productivity</Breadcrumbs.Item>
+    <Breadcrumbs.Item href="#">collaboration-workflows-flex</Breadcrumbs.Item>
     <Breadcrumbs.Item href="#" selected>
-      Current Page
+      global-navigation-reviewers
     </Breadcrumbs.Item>
   </Breadcrumbs>
 )

packages/react/src/Breadcrumbs/Breadcrumbs.module.css

@@ -13,9 +13,17 @@
 [data-overflow='menu'] .BreadcrumbsList {
   white-space: nowrap;
   overflow: hidden;
+  display: flex;
+  flex-direction: row;
+}
+
+[data-overflow='menu'] .BreadcrumbsItem {
+  display: inline-grid;
+  grid-auto-flow: column;
+  align-items: center;
 }
 
-.ItemWrapper {
+.BreadcrumbsItem {
   display: inline-block;
   font-size: var(--text-body-size-medium);
   white-space: nowrap;
@@ -25,7 +33,7 @@
     display: inline-block;
     height: 0.8em;
     /* stylelint-disable-next-line primer/spacing */
-    margin: 0 0.5em;
+    margin: 0.25em 0.5em 0 0.5em;
     font-size: var(--text-body-size-medium);
     content: '';
     /* stylelint-disable-next-line primer/borders, primer/colors */
@@ -66,9 +74,6 @@
 }
 
 .MenuButton {
-  display: inline-flex;
-  align-items: flex-end;
-  justify-content: center;
-  height: 0.75rem;
   color: var(--fgColor-link);
+  padding-top: 4px;
 }

packages/react/src/Breadcrumbs/Breadcrumbs.tsx

@@ -81,8 +81,9 @@ const getValidChildren = (children: React.ReactNode) => {
 
 function Breadcrumbs({className, children, sx: sxProp, overflow = 'wrap', hideRoot = true}: BreadcrumbsProps) {
   const containerRef = useRef<HTMLElement>(null)
+  const menuButtonRef = useRef<HTMLButtonElement>(null)
   const [effectiveHideRoot, setEffectiveHideRoot] = useState<boolean>(hideRoot)
-  let effectiveOverflow = 'wrap'
+  //let effectiveOverflow = 'wrap'
   const childArray = useMemo(() => getValidChildren(children), [children])
 
   const rootItem = childArray[0]
@@ -93,9 +94,13 @@ function Breadcrumbs({className, children, sx: sxProp, overflow = 'wrap', hideRo
   const [menuItems, setMenuItems] = useState<React.ReactElement[]>([])
   const [rootItemWidth, setRootItemWidth] = useState<number>(0)
 
-  if (typeof window !== 'undefined') {
-    effectiveOverflow = overflow
-  }
+  // Menu button width with fallback
+  const MENU_BUTTON_FALLBACK_WIDTH = 32 // Design system small IconButton
+  const [menuButtonWidth, setMenuButtonWidth] = useState(MENU_BUTTON_FALLBACK_WIDTH)
+
+  // if (typeof window !== 'undefined') {
+  //   effectiveOverflow = overflow
+  // }
   const MIN_VISIBLE_ITEMS = !effectiveHideRoot ? 3 : 4
 
   useEffect(() => {
@@ -108,9 +113,19 @@ function Breadcrumbs({className, children, sx: sxProp, overflow = 'wrap', hideRo
     }
   }, [childArray.length])
 
+  // Measure actual menu button width when it exists
+  useEffect(() => {
+    if (menuButtonRef.current) {
+      const measuredWidth = menuButtonRef.current.offsetWidth
+      if (measuredWidth > 0) {
+        setMenuButtonWidth(measuredWidth)
+      }
+    }
+  }, [menuItems.length]) // Re-measure when menu button appears/disappears
+
   const calculateOverflow = useCallback(
     (availableWidth: number) => {
-      const MENU_BUTTON_WIDTH = 50 // Approximate width of "..." button
+      const MENU_BUTTON_WIDTH = menuButtonWidth // Use measured width with fallback
 
       const calculateVisibleItemsWidth = (w: number[]) => {
         const widths = w.reduce((sum, width) => sum + width + 16, 0)
@@ -165,7 +180,16 @@ function Breadcrumbs({className, children, sx: sxProp, overflow = 'wrap', hideRo
         effectiveHideRoot: eHideRoot,
       }
     },
-    [MIN_VISIBLE_ITEMS, childArray, childArrayWidths, effectiveHideRoot, hideRoot, overflow, rootItemWidth],
+    [
+      MIN_VISIBLE_ITEMS,
+      childArray,
+      childArrayWidths,
+      effectiveHideRoot,
+      hideRoot,
+      overflow,
+      rootItemWidth,
+      menuButtonWidth,
+    ],
   )
 
   const handleResize = useCallback(
@@ -197,9 +221,9 @@ function Breadcrumbs({className, children, sx: sxProp, overflow = 'wrap', hideRo
 
   // Determine final children to render
   const finalChildren = React.useMemo(() => {
-    if (effectiveOverflow === 'wrap' || menuItems.length === 0) {
+    if (overflow === 'wrap' || menuItems.length === 0) {
       return visibleItems.map((child, index) => (
-        <li className={classes.ItemWrapper} key={`visible + ${index}`}>
+        <li className={classes.BreadcrumbsItem} key={`visible + ${index}`}>
           {child}
         </li>
       ))
@@ -210,22 +234,23 @@ function Breadcrumbs({className, children, sx: sxProp, overflow = 'wrap', hideRo
       effectiveMenuItems = [...menuItems.slice(1)]
     }
     const menuElement = (
-      <li className={classes.ItemWrapper} key="breadcrumbs-menu">
+      <li className={classes.BreadcrumbsItem} key="breadcrumbs-menu">
         <BreadcrumbsMenuItem
+          ref={menuButtonRef}
           items={effectiveMenuItems}
           aria-label={`${effectiveMenuItems.length} more breadcrumb items`}
         />
       </li>
     )
 
     const visibleElements = visibleItems.map((child, index) => (
-      <li className={classes.ItemWrapper} key={`visible + ${index}`}>
+      <li className={classes.BreadcrumbsItem} key={`visible + ${index}`}>
         {child}
       </li>
     ))
 
     const rootElement = (
-      <li className={classes.ItemWrapper} key={`rootElement`}>
+      <li className={classes.BreadcrumbsItem} key={`rootElement`}>
         {rootItem}
       </li>
     )
@@ -238,7 +263,7 @@ function Breadcrumbs({className, children, sx: sxProp, overflow = 'wrap', hideRo
       // Show: [root breadcrumb, overflow menu, leaf breadcrumb]
       return [rootElement, menuElement, ...visibleElements]
     }
-  }, [effectiveOverflow, menuItems, visibleItems, rootItem, effectiveHideRoot])
+  }, [overflow, menuItems, effectiveHideRoot, visibleItems, rootItem])
 
   return (
     <BoxWithFallback
@@ -247,7 +272,7 @@ function Breadcrumbs({className, children, sx: sxProp, overflow = 'wrap', hideRo
       aria-label="Breadcrumbs"
       sx={sxProp}
       ref={containerRef}
-      data-overflow={effectiveOverflow}
+      data-overflow={overflow}
     >
       <BreadcrumbsList>{finalChildren}</BreadcrumbsList>
     </BoxWithFallback>