feat(BreadcrumbWithOverflow): adopt overflowMenuV12 and floating ui

e2e/components/PageHeader/PageHeader-test.avt.e2e.js

@@ -138,7 +138,10 @@ test.describe('PageHeader @avt', () => {
     // collapses into menu button on small screens
     await page.setViewportSize({ width: 1024, height: 768 });
     // reset focus to first focusable element
-    await page.getByLabel('Open and close additional').focus();
+    await page
+      .getByLabel('Breadcrumb', { exact: true })
+      .getByRole('button')
+      .focus();
     await pressTabKey(page, 6);
 
     await expect(
@@ -229,7 +232,10 @@ test.describe('PageHeader @avt', () => {
     // collapses into menu button on small screens
     await page.setViewportSize({ width: 1024, height: 768 });
     // reset focus to first focusable element
-    await page.getByLabel('Open and close additional').focus();
+    await page
+      .getByLabel('Breadcrumb', { exact: true })
+      .getByRole('button')
+      .focus();
     await pressTabKey(page, 1);
     await expect(page.getByRole('tooltip').getByText('Action 1')).toBeVisible();
     await pressTabKey(page, 2);

packages/ibm-products-styles/src/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss

@@ -89,7 +89,6 @@ $_block-class: #{c4p-settings.$pkg-prefix}--breadcrumb-with-overflow;
     text-overflow: ellipsis;
   }
 }
-
-.#{$_block-class}__overflow-menu-options.#{$_block-class}__overflow-menu-options {
-  z-index: utilities.z('header');
+.#{$_block-class}__overflow-menu {
+  line-height: 0;
 }

packages/ibm-products/src/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -19,9 +19,10 @@ import {
   BreadcrumbItem,
   Link,
   OverflowMenu,
-  OverflowMenuItem,
   Tooltip,
   usePrefix,
+  unstable_FeatureFlags as FeatureFlags,
+  MenuItem,
 } from '@carbon/react';
 import { pkg } from '../../settings';
 import { ArrowLeft, OverflowMenuHorizontal } from '@carbon/react/icons';
@@ -59,30 +60,37 @@ export let BreadcrumbWithOverflow = ({
 
   // eslint-disable-next-line react/prop-types
   const BreadcrumbOverflowMenu = ({ overflowItems }) => {
+    const handleClick = (evt, item) => {
+      if (item?.props?.href) {
+        window.location.href = item.props.href;
+      }
+      item?.props?.onClick?.(evt);
+    };
+
     return (
       <BreadcrumbItem key={`breadcrumb-overflow-${internalId.current}`}>
-        <OverflowMenu
-          align={overflowTooltipAlign}
-          aria-label={overflowAriaLabel}
-          iconDescription={overflowAriaLabel} // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
-          renderIcon={(props) => (
-            <OverflowMenuHorizontal size={32} {...props} />
-          )}
-          className={`${blockClass}__overflow-menu`}
-          menuOptionsClass={`${blockClass}__overflow-menu-options`}
-        >
-          {
-            // eslint-disable-next-line react/prop-types
-            overflowItems.map((item, index) => (
-              <OverflowMenuItem
-                key={`breadcrumb-overflow-menu-item-${internalId.current}-${index}`}
-                href={item.props.href}
-                onClick={item.props.onClick}
-                itemText={item.props.children}
-              />
-            ))
-          }
-        </OverflowMenu>
+        <FeatureFlags enableV12Overflowmenu>
+          <OverflowMenu
+            aria-label={overflowAriaLabel}
+            label={overflowAriaLabel} // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
+            renderIcon={(props) => (
+              <OverflowMenuHorizontal size={32} {...props} />
+            )}
+            className={`${blockClass}__overflow-menu`}
+            tooltipAlignment={overflowTooltipAlign}
+          >
+            {
+              // eslint-disable-next-line react/prop-types
+              overflowItems.map((item, index) => (
+                <MenuItem
+                  key={`breadcrumb-overflow-menu-item-${internalId.current}-${index}`}
+                  onClick={(evt) => handleClick(evt, item)}
+                  label={item.props.children}
+                />
+              ))
+            }
+          </OverflowMenu>
+        </FeatureFlags>
       </BreadcrumbItem>
     );
   };

packages/ibm-products/src/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.test.js

@@ -19,13 +19,13 @@ const breadcrumbContent = Array.from(
   { length: 5 },
   (_, index) => `Breadcrumb ${index + 1}`
 );
-
+const myOnClick = jest.fn();
 const breadcrumbItems = breadcrumbContent.map((item) => ({
   href: '/#',
   id: `id-${item.replace(' ', '_')}`,
   key: item,
   label: item,
-  onClick: () => {},
+  onClick: myOnClick,
 }));
 
 const sizes = {
@@ -152,9 +152,10 @@ describe(BreadcrumbWithOverflow.displayName, () => {
     );
 
     // item 2 contains an overflow menu
-    const overflowBtn = screen.getByLabelText(/Open and close/, {
-      selector: `.${blockClass}__overflow-menu`,
-    });
+    const overflowBtn = document.querySelector(
+      `.${blockClass}__overflow-menu button`
+    );
+
     await act(() => click(overflowBtn));
 
     // <ul role='menu' /> but default <ul> role of list used for query
@@ -167,6 +168,8 @@ describe(BreadcrumbWithOverflow.displayName, () => {
     expect(menuItems).toHaveLength(overflowItemsExpected);
     expect(menuItems[0]).toHaveTextContent(breadcrumbContent[1]);
     expect(menuItems[1]).toHaveTextContent(breadcrumbContent[2]);
+    await act(() => click(menuItems[1]));
+    expect(myOnClick).toHaveBeenCalled();
   });
 
   it('Renders just the breadcrumb and last item when very little space', async () => {