Breadcrumbs : Add overflow menu for responsive behavior

.changeset/good-cougars-hug.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Spike for breadcrumbs overflow

packages/react/src/Breadcrumbs/Breadcrumbs.docs.json

@@ -14,19 +14,34 @@
       "name": "className",
       "type": "string",
       "required": false,
-      "description": "",
+      "description": "Additional CSS class names to apply to the breadcrumbs container",
       "defaultValue": ""
     },
     {
       "name": "children",
       "type": "Breadcrumbs.Item[]",
       "defaultValue": "",
-      "description": ""
+      "description": "Breadcrumb items to render. Each item should be a Breadcrumbs.Item component."
+    },
+    {
+      "name": "overflow",
+      "type": "'wrap' | 'menu'",
+      "required": false,
+      "description": "How to handle overflow when breadcrumbs don't fit in the container. 'wrap' allows items to wrap to new lines, 'menu' collapses items into an overflow menu.",
+      "defaultValue": "'wrap'"
+    },
+    {
+      "name": "hideRoot",
+      "type": "boolean",
+      "required": false,
+      "description": "When using overflow='menu', whether to prioritize hiding the root (first) item when space is limited. If false, the root item will be kept visible when possible.",
+      "defaultValue": "true"
     },
     {
       "name": "sx",
       "type": "SystemStyleObject",
-      "deprecated": true
+      "deprecated": true,
+      "description": "System styles (deprecated, use CSS classes instead)"
     }
   ],
   "subcomponents": [
@@ -37,7 +52,7 @@
           "name": "selected",
           "type": "boolean",
           "defaultValue": "false",
-          "description": "Whether this item represents the current page"
+          "description": "Whether this item represents the current page. Sets aria-current='page' for accessibility."
         },
         {
           "name": "to",
@@ -46,6 +61,18 @@
           "description": "Used when the item is rendered using a component like React Router's `Link`. The path to navigate to.",
           "defaultValue": ""
         },
+        {
+          "name": "href",
+          "type": "string",
+          "required": false,
+          "description": "The URL that the breadcrumb item links to. Used with regular anchor elements."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "required": true,
+          "description": "The content to display inside the breadcrumb item, typically text."
+        },
         {
           "name": "ref",
           "type": "React.RefObject<HTMLAnchorElement>"

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

@@ -0,0 +1,105 @@
+import type {Meta} from '@storybook/react-vite'
+import type React from 'react'
+import type {ComponentProps} from '../utils/types'
+import Breadcrumbs from './Breadcrumbs'
+
+export default {
+  title: 'Components/Breadcrumbs/Features',
+  component: Breadcrumbs,
+} as Meta<ComponentProps<typeof Breadcrumbs>>
+
+export const OverflowWrap = () => (
+  <Breadcrumbs overflow="wrap">
+    <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="#" selected>
+      Current Page
+    </Breadcrumbs.Item>
+  </Breadcrumbs>
+)
+
+export const OverflowMenu = () => (
+  <Breadcrumbs overflow="menu">
+    <Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
+    <Breadcrumbs.Item href="#">Products</Breadcrumbs.Item>
+    <Breadcrumbs.Item href="#">Category</Breadcrumbs.Item>
+    <Breadcrumbs.Item href="#">SubcategorySubcategorySubcategorySubcategory</Breadcrumbs.Item>
+    <Breadcrumbs.Item href="#">ItemItemItemItemItemItemItem</Breadcrumbs.Item>
+    <Breadcrumbs.Item href="#">DetailsDetailsDetailsDetailsDetailsDetailsDetails</Breadcrumbs.Item>
+    <Breadcrumbs.Item href="#" selected>
+      Current Page
+    </Breadcrumbs.Item>
+  </Breadcrumbs>
+)
+
+export const OverflowMenuShowRoot = () => (
+  <Breadcrumbs overflow="menu" hideRoot={false}>
+    <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>
+      global-navigation-reviewers
+    </Breadcrumbs.Item>
+  </Breadcrumbs>
+)
+
+export const OverflowMenuNarrowContainer = () => (
+  <div style={{width: '350px', border: '1px solid #ccc', padding: '8px'}}>
+    <Breadcrumbs overflow="menu">
+      <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="#" selected>
+        Current Page
+      </Breadcrumbs.Item>
+    </Breadcrumbs>
+  </div>
+)
+
+// Wrapper components to test that BreadcrumbsItem works when wrapped
+const StyledWrapper = ({children}: {children: React.ReactNode}) => (
+  <span style={{padding: '2px', border: '1px dotted #999'}}>{children}</span>
+)
+
+const ConditionalWrapper = ({children, condition}: {children: React.ReactNode; condition: boolean}) => {
+  return condition ? <strong>{children}</strong> : <>{children}</>
+}
+
+const DataAttributeWrapper = ({children}: {children: React.ReactNode}) => (
+  <span data-testid="wrapper" className="custom-wrapper">
+    {children}
+  </span>
+)
+
+export const WrappedBreadcrumbItemsWithOverflow = () => (
+  <Breadcrumbs overflow="menu">
+    <StyledWrapper>
+      <Breadcrumbs.Item href="#">Wrapped Home</Breadcrumbs.Item>
+    </StyledWrapper>
+    <ConditionalWrapper condition={false}>
+      <Breadcrumbs.Item href="#">Products</Breadcrumbs.Item>
+    </ConditionalWrapper>
+    <DataAttributeWrapper>
+      <Breadcrumbs.Item href="#">Category</Breadcrumbs.Item>
+    </DataAttributeWrapper>
+    <StyledWrapper>
+      <Breadcrumbs.Item href="#">Subcategory</Breadcrumbs.Item>
+    </StyledWrapper>
+    <ConditionalWrapper condition={true}>
+      <Breadcrumbs.Item href="#">Item</Breadcrumbs.Item>
+    </ConditionalWrapper>
+    <DataAttributeWrapper>
+      <Breadcrumbs.Item href="#">Details</Breadcrumbs.Item>
+    </DataAttributeWrapper>
+    <Breadcrumbs.Item href="#" selected>
+      Current Page
+    </Breadcrumbs.Item>
+  </Breadcrumbs>
+)

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

@@ -1,6 +1,7 @@
 .BreadcrumbsBase {
   display: flex;
   justify-content: space-between;
+  width: 100%;
 }
 
 .BreadcrumbsList {
@@ -9,31 +10,31 @@
   margin-bottom: 0;
 }
 
-.ItemWrapper {
-  display: inline-block;
+/* Prevent wrapping when using menu overflow */
+[data-overflow='menu'] .BreadcrumbsList {
+  white-space: nowrap;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+}
+
+.BreadcrumbsItem {
+  display: inline-grid;
+  grid-auto-flow: column;
+  align-items: center;
+  flex: 0 99999 auto;
+  min-width: auto;
   font-size: var(--text-body-size-medium);
   white-space: nowrap;
   list-style: none;
 
-  &::after {
-    display: inline-block;
-    height: 0.8em;
-    /* stylelint-disable-next-line primer/spacing */
-    margin: 0 0.5em;
-    font-size: var(--text-body-size-medium);
-    content: '';
-    /* stylelint-disable-next-line primer/borders, primer/colors */
-    border-right: 0.1em solid var(--fgColor-muted);
-    transform: rotate(15deg) translateY(0.0625em);
-  }
-
   &:first-child {
     margin-left: 0;
   }
 
   &:last-child {
-    &::after {
-      content: none;
+    .ItemSeparator {
+      display: none;
     }
   }
 }
@@ -43,18 +44,29 @@
   font-size: var(--text-body-size-medium);
   color: var(--fgColor-link);
   text-decoration: none;
+  padding-inline: var(--base-size-6);
+  padding-block: var(--base-size-4);
+  border-radius: var(--borderRadius-medium);
 
-  &:hover,
+  &:hover {
+    background: var(--control-transparent-bgColor-hover);
+  }
   &:focus {
-    text-decoration: underline;
+    box-shadow: none;
+    outline: 2px solid var(--focus-outlineColor, var(--color-accent-fg));
+    outline-offset: -2px;
   }
 }
 
-.ItemSelected {
-  color: var(--fgColor-default);
-  pointer-events: none;
+.MenuButton {
+  color: var(--fgColor-link);
+}
 
-  &:focus {
-    text-decoration: none;
-  }
+.ItemSeparator {
+  color: var(--fgColor-muted);
+  display: flex;
+  align-self: center;
+  justify-content: center;
+  white-space: nowrap;
+  user-select: none;
 }