From 5371c6a2feda48436363dbecadfe9e81cd8bdace Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Thu, 17 Oct 2024 23:56:13 +0000
Subject: [PATCH 01/13] Convert Breadcrumbs to css module behind feature flag

---
 .../src/Breadcrumbs/Breadcrumbs.module.css    |  57 +++++++
 .../react/src/Breadcrumbs/Breadcrumbs.tsx     | 147 ++++++++++++------
 2 files changed, 155 insertions(+), 49 deletions(-)
 create mode 100644 packages/react/src/Breadcrumbs/Breadcrumbs.module.css

diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.module.css b/packages/react/src/Breadcrumbs/Breadcrumbs.module.css
new file mode 100644
index 00000000000..9a1d621fa39
--- /dev/null
+++ b/packages/react/src/Breadcrumbs/Breadcrumbs.module.css
@@ -0,0 +1,57 @@
+.BreadcrumbsBase {
+  display: flex;
+  justify-content: space-between;
+}
+
+.BreadcrumbsList {
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.ItemWrapper {
+  display: inline-block;
+  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 */
+    border-right: 0.1em solid var(--fgColor-muted);
+    transform: rotate(15deg) translateY(0.0625em);
+  }
+
+  &:first-child {
+    margin-left: 0;
+  }
+
+  &:last-child {
+    &::after {
+      content: none;
+    }
+  }
+}
+
+.Item {
+  display: inline-block;
+
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
+}
+
+.ItemSelected {
+  color: var(--fgColor-default);
+  pointer-events: none;
+
+  &:focus {
+    text-decoration: none;
+  }
+}
diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
index 7b1753aa853..909df8ae58d 100644
--- a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
@@ -7,38 +7,50 @@ import {get} from '../constants'
 import type {SxProp} from '../sx'
 import sx from '../sx'
 import type {ComponentProps} from '../utils/types'
+import classes from './Breadcrumbs.module.css'
+import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
+import {FeatureFlags, useFeatureFlag} from '../FeatureFlags'
+import Link from '../Link'
 
 const SELECTED_CLASS = 'selected'
 
-const Wrapper = styled.li`
-  display: inline-block;
-  white-space: nowrap;
-  list-style: none;
-  &::after {
-    font-size: ${get('fontSizes.1')};
-    content: '';
+const Wrapper = toggleStyledComponent(
+  'primer_react_css_modules_team',
+  'li',
+  styled.li`
     display: inline-block;
-    height: 0.8em;
-    margin: 0 0.5em;
-    border-right: 0.1em solid;
-    border-color: ${get('colors.fg.muted')};
-    transform: rotate(15deg) translateY(0.0625em);
-  }
-  &:first-child {
-    margin-left: 0;
-  }
-  &:last-child {
+    white-space: nowrap;
+    list-style: none;
     &::after {
-      content: none;
+      font-size: ${get('fontSizes.1')};
+      content: '';
+      display: inline-block;
+      height: 0.8em;
+      margin: 0 0.5em;
+      border-right: 0.1em solid;
+      border-color: ${get('colors.fg.muted')};
+      transform: rotate(15deg) translateY(0.0625em);
     }
-  }
-`
+    &:first-child {
+      margin-left: 0;
+    }
+    &:last-child {
+      &::after {
+        content: none;
+      }
+    }
+  `,
+)
 
-const BreadcrumbsBase = styled.nav<SxProp>`
-  display: flex;
-  justify-content: space-between;
-  ${sx};
-`
+const BreadcrumbsBase = toggleStyledComponent(
+  'primer_react_css_modules_team',
+  'nav',
+  styled.nav<SxProp>`
+    display: flex;
+    justify-content: space-between;
+    ${sx};
+  `,
+)
 
 export type BreadcrumbsProps = React.PropsWithChildren<
   {
@@ -46,13 +58,31 @@ export type BreadcrumbsProps = React.PropsWithChildren<
   } & SxProp
 >
 
+const BreadcrumbsList = ({children}: React.PropsWithChildren) => {
+  const enabled = useFeatureFlag('primer_react_css_modules_team')
+  if (enabled) {
+    return <ol className={classes.BreadcrumbsList}>{children}</ol>
+  }
+
+  return (
+    <Box as="ol" my={0} pl={0}>
+      {children}
+    </Box>
+  )
+}
+
 function Breadcrumbs({className, children, sx: sxProp}: React.PropsWithChildren<BreadcrumbsProps>) {
-  const wrappedChildren = React.Children.map(children, child => <Wrapper>{child}</Wrapper>)
+  const enabled = useFeatureFlag('primer_react_css_modules_team')
+  const wrappedChildren = React.Children.map(children, child => (
+    <Wrapper className={clsx({[classes.ItemWrapper]: enabled})}>{child}</Wrapper>
+  ))
   return (
-    <BreadcrumbsBase className={className} aria-label="Breadcrumbs" sx={sxProp}>
-      <Box as="ol" my={0} pl={0}>
-        {wrappedChildren}
-      </Box>
+    <BreadcrumbsBase
+      className={clsx(className, {[classes.BreadcrumbsBase]: enabled})}
+      aria-label="Breadcrumbs"
+      sx={sxProp}
+    >
+      <BreadcrumbsList>{wrappedChildren}</BreadcrumbsList>
     </BreadcrumbsBase>
   )
 }
@@ -62,27 +92,46 @@ type StyledBreadcrumbsItemProps = {
   selected?: boolean
 } & SxProp
 
-const BreadcrumbsItem = styled.a.attrs<StyledBreadcrumbsItemProps>(props => ({
-  className: clsx(props.selected && SELECTED_CLASS, props.className),
-  'aria-current': props.selected ? 'page' : null,
-}))<StyledBreadcrumbsItemProps>`
-  color: ${get('colors.accent.fg')};
-  display: inline-block;
-  font-size: ${get('fontSizes.1')};
-  text-decoration: none;
-  &:hover,
-  &:focus {
-    text-decoration: underline;
-  }
-  &.selected {
-    color: ${get('colors.fg.default')};
-    pointer-events: none;
-  }
-  &.selected:focus {
+const StyledBreadcrumbsItem = toggleStyledComponent(
+  'primer_react_css_modules_team',
+  'a',
+  styled.a.attrs<StyledBreadcrumbsItemProps>(props => ({
+    className: clsx(props.selected && SELECTED_CLASS, props.className),
+    'aria-current': props.selected ? 'page' : null,
+  }))<StyledBreadcrumbsItemProps>`
+    color: ${get('colors.accent.fg')};
+    display: inline-block;
+    font-size: ${get('fontSizes.1')};
     text-decoration: none;
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+    }
+    &.selected {
+      color: ${get('colors.fg.default')};
+      pointer-events: none;
+    }
+    &.selected:focus {
+      text-decoration: none;
+    }
+    ${sx};
+  `,
+)
+const BreadcrumbsItem = ({
+  selected,
+  ...props
+}: StyledBreadcrumbsItemProps & React.ComponentPropsWithoutRef<typeof Link>) => {
+  const enabled = useFeatureFlag('primer_react_css_modules_team')
+  if (enabled) {
+    return (
+      // Remove this when the feature flag is removed from Link
+      <FeatureFlags flags={{primer_react_css_modules_ga: true}}>
+        <Link className={clsx(classes.Item, {[classes.ItemSelected]: selected})} {...props} />
+      </FeatureFlags>
+    )
   }
-  ${sx};
-`
+  return <StyledBreadcrumbsItem selected={selected} {...props} />
+}
 
 Breadcrumbs.displayName = 'Breadcrumbs'
 

From 44c8de5d6189bcd87e2775a923818e71e7cd53d7 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Thu, 17 Oct 2024 16:59:02 -0700
Subject: [PATCH 02/13] Create fair-wolves-attack.md

---
 .changeset/fair-wolves-attack.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fair-wolves-attack.md

diff --git a/.changeset/fair-wolves-attack.md b/.changeset/fair-wolves-attack.md
new file mode 100644
index 00000000000..6bc4d3202b5
--- /dev/null
+++ b/.changeset/fair-wolves-attack.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Convert Breadcrumbs to css module behind feature flag

From a736e0500337c605dface5d64ec1b7a2d64e01d3 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Thu, 17 Oct 2024 16:59:19 -0700
Subject: [PATCH 03/13] Update @primer/react version to minor

---
 .changeset/fair-wolves-attack.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/fair-wolves-attack.md b/.changeset/fair-wolves-attack.md
index 6bc4d3202b5..c618fad7d05 100644
--- a/.changeset/fair-wolves-attack.md
+++ b/.changeset/fair-wolves-attack.md
@@ -1,5 +1,5 @@
 ---
-"@primer/react": patch
+"@primer/react": minor
 ---
 
 Convert Breadcrumbs to css module behind feature flag

From d5cd9e184678a5fa5eb6349e803f0ecfee217ef1 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Tue, 12 Nov 2024 14:21:26 -0800
Subject: [PATCH 04/13] Change `ComponentPropsWithoutRef` to
 `ComponentPropsWithRef`

---
 packages/react/src/Breadcrumbs/Breadcrumbs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
index 909df8ae58d..5b4b8512e7f 100644
--- a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
@@ -120,7 +120,7 @@ const StyledBreadcrumbsItem = toggleStyledComponent(
 const BreadcrumbsItem = ({
   selected,
   ...props
-}: StyledBreadcrumbsItemProps & React.ComponentPropsWithoutRef<typeof Link>) => {
+}: StyledBreadcrumbsItemProps & React.ComponentPropsWithRef<typeof Link>) => {
   const enabled = useFeatureFlag('primer_react_css_modules_team')
   if (enabled) {
     return (

From b27903d33343310932c34cc4fb5049940bddf6f2 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Tue, 12 Nov 2024 20:22:59 +0000
Subject: [PATCH 05/13] Lint fix

---
 packages/react/src/Breadcrumbs/Breadcrumbs.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.module.css b/packages/react/src/Breadcrumbs/Breadcrumbs.module.css
index 9a1d621fa39..a21538b3128 100644
--- a/packages/react/src/Breadcrumbs/Breadcrumbs.module.css
+++ b/packages/react/src/Breadcrumbs/Breadcrumbs.module.css
@@ -22,7 +22,7 @@
     margin: 0 0.5em;
     font-size: var(--text-body-size-medium);
     content: '';
-    /* stylelint-disable-next-line primer/borders */
+    /* stylelint-disable-next-line primer/borders, primer/colors */
     border-right: 0.1em solid var(--fgColor-muted);
     transform: rotate(15deg) translateY(0.0625em);
   }

From e3f4638e344f28021581cb8620608c60d1851648 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Tue, 12 Nov 2024 23:20:13 +0000
Subject: [PATCH 06/13] Use old styled.a for item

---
 .../src/Breadcrumbs/Breadcrumbs.module.css    |  3 ++
 .../react/src/Breadcrumbs/Breadcrumbs.tsx     | 47 +++++++++----------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.module.css b/packages/react/src/Breadcrumbs/Breadcrumbs.module.css
index a21538b3128..96c61e7072c 100644
--- a/packages/react/src/Breadcrumbs/Breadcrumbs.module.css
+++ b/packages/react/src/Breadcrumbs/Breadcrumbs.module.css
@@ -40,6 +40,9 @@
 
 .Item {
   display: inline-block;
+  font-size: var(--text-body-size-medium);
+  color: var(--fgColor-link);
+  text-decoration: none;
 
   &:hover,
   &:focus {
diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
index 5b4b8512e7f..2a10db81a01 100644
--- a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
@@ -9,13 +9,13 @@ import sx from '../sx'
 import type {ComponentProps} from '../utils/types'
 import classes from './Breadcrumbs.module.css'
 import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
-import {FeatureFlags, useFeatureFlag} from '../FeatureFlags'
-import Link from '../Link'
+import {useFeatureFlag} from '../FeatureFlags'
 
 const SELECTED_CLASS = 'selected'
+const CSS_MODULES_FLAG = 'primer_react_css_modules_team'
 
 const Wrapper = toggleStyledComponent(
-  'primer_react_css_modules_team',
+  CSS_MODULES_FLAG,
   'li',
   styled.li`
     display: inline-block;
@@ -43,7 +43,7 @@ const Wrapper = toggleStyledComponent(
 )
 
 const BreadcrumbsBase = toggleStyledComponent(
-  'primer_react_css_modules_team',
+  CSS_MODULES_FLAG,
   'nav',
   styled.nav<SxProp>`
     display: flex;
@@ -59,7 +59,7 @@ export type BreadcrumbsProps = React.PropsWithChildren<
 >
 
 const BreadcrumbsList = ({children}: React.PropsWithChildren) => {
-  const enabled = useFeatureFlag('primer_react_css_modules_team')
+  const enabled = useFeatureFlag(CSS_MODULES_FLAG)
   if (enabled) {
     return <ol className={classes.BreadcrumbsList}>{children}</ol>
   }
@@ -72,7 +72,7 @@ const BreadcrumbsList = ({children}: React.PropsWithChildren) => {
 }
 
 function Breadcrumbs({className, children, sx: sxProp}: React.PropsWithChildren<BreadcrumbsProps>) {
-  const enabled = useFeatureFlag('primer_react_css_modules_team')
+  const enabled = useFeatureFlag(CSS_MODULES_FLAG)
   const wrappedChildren = React.Children.map(children, child => (
     <Wrapper className={clsx({[classes.ItemWrapper]: enabled})}>{child}</Wrapper>
   ))
@@ -90,15 +90,13 @@ function Breadcrumbs({className, children, sx: sxProp}: React.PropsWithChildren<
 type StyledBreadcrumbsItemProps = {
   to?: To
   selected?: boolean
+  className?: string
 } & SxProp
 
 const StyledBreadcrumbsItem = toggleStyledComponent(
-  'primer_react_css_modules_team',
+  CSS_MODULES_FLAG,
   'a',
-  styled.a.attrs<StyledBreadcrumbsItemProps>(props => ({
-    className: clsx(props.selected && SELECTED_CLASS, props.className),
-    'aria-current': props.selected ? 'page' : null,
-  }))<StyledBreadcrumbsItemProps>`
+  styled.a`
     color: ${get('colors.accent.fg')};
     display: inline-block;
     font-size: ${get('fontSizes.1')};
@@ -117,20 +115,19 @@ const StyledBreadcrumbsItem = toggleStyledComponent(
     ${sx};
   `,
 )
-const BreadcrumbsItem = ({
-  selected,
-  ...props
-}: StyledBreadcrumbsItemProps & React.ComponentPropsWithRef<typeof Link>) => {
-  const enabled = useFeatureFlag('primer_react_css_modules_team')
-  if (enabled) {
-    return (
-      // Remove this when the feature flag is removed from Link
-      <FeatureFlags flags={{primer_react_css_modules_ga: true}}>
-        <Link className={clsx(classes.Item, {[classes.ItemSelected]: selected})} {...props} />
-      </FeatureFlags>
-    )
-  }
-  return <StyledBreadcrumbsItem selected={selected} {...props} />
+const BreadcrumbsItem = ({selected, className, ...props}: StyledBreadcrumbsItemProps) => {
+  const enabled = useFeatureFlag(CSS_MODULES_FLAG)
+  return (
+    <StyledBreadcrumbsItem
+      className={clsx(className, {
+        [SELECTED_CLASS]: selected,
+        [classes.Item]: enabled,
+        [classes.ItemSelected]: enabled && selected,
+      })}
+      aria-current={selected ? 'page' : null}
+      {...props}
+    />
+  )
 }
 
 Breadcrumbs.displayName = 'Breadcrumbs'

From f167ed41869456a81032aca18deb2db8242a2f37 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Tue, 12 Nov 2024 23:37:50 +0000
Subject: [PATCH 07/13] Update snapshot and type

---
 packages/react/src/Breadcrumbs/Breadcrumbs.tsx                 | 3 ++-
 .../__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap      | 1 -
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
index 2a10db81a01..8135534b333 100644
--- a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
@@ -91,7 +91,8 @@ type StyledBreadcrumbsItemProps = {
   to?: To
   selected?: boolean
   className?: string
-} & SxProp
+} & SxProp &
+  React.ComponentPropsWithoutRef<'a'>
 
 const StyledBreadcrumbsItem = toggleStyledComponent(
   CSS_MODULES_FLAG,
diff --git a/packages/react/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap b/packages/react/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap
index 9b4c8a741f8..250ad1236ce 100644
--- a/packages/react/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap
+++ b/packages/react/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap
@@ -28,6 +28,5 @@ exports[`Breadcrumbs.Item respects the "selected" prop 1`] = `
 <a
   aria-current="page"
   className="c0 selected"
-  selected={true}
 />
 `;

From a09afd981d85a4c62fcfc7bbf771b88fd61f88c3 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Thu, 14 Nov 2024 10:55:36 -0800
Subject: [PATCH 08/13] Refactor BreadcrumbsItem component with generics

---
 packages/react/src/Breadcrumbs/Breadcrumbs.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
index 8135534b333..993a3bc0af2 100644
--- a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
@@ -1,6 +1,6 @@
 import {clsx} from 'clsx'
 import type {To} from 'history'
-import React from 'react'
+import React, {type ForwardedRef} from 'react'
 import styled from 'styled-components'
 import Box from '../Box'
 import {get} from '../constants'
@@ -87,12 +87,14 @@ function Breadcrumbs({className, children, sx: sxProp}: React.PropsWithChildren<
   )
 }
 
-type StyledBreadcrumbsItemProps = {
+type StyledBreadcrumbsItemProps<As extends React.ElementType> = {
   to?: To
   selected?: boolean
   className?: string
+  as?: As
 } & SxProp &
-  React.ComponentPropsWithoutRef<'a'>
+  React.ComponentPropsWithoutRef<'a'> &
+  DistributiveOmit<React.ComponentPropsWithRef<React.ElementType extends As ? 'a' : As>, 'as'>
 
 const StyledBreadcrumbsItem = toggleStyledComponent(
   CSS_MODULES_FLAG,
@@ -116,7 +118,8 @@ const StyledBreadcrumbsItem = toggleStyledComponent(
     ${sx};
   `,
 )
-const BreadcrumbsItem = ({selected, className, ...props}: StyledBreadcrumbsItemProps) => {
+function BreadcrumbsItem<As extends React.ElementType>(props: StyledBreadcrumbsItemProps<As>, ref: ForwardedRef<any>) {
+  const {selected, className, ...rest} = props
   const enabled = useFeatureFlag(CSS_MODULES_FLAG)
   return (
     <StyledBreadcrumbsItem
@@ -126,11 +129,15 @@ const BreadcrumbsItem = ({selected, className, ...props}: StyledBreadcrumbsItemP
         [classes.ItemSelected]: enabled && selected,
       })}
       aria-current={selected ? 'page' : null}
-      {...props}
+      ref={ref} 
+      {...rest}
     />
   )
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type DistributiveOmit<T, TOmitted extends PropertyKey> = T extends any ? Omit<T, TOmitted> : never
+
 Breadcrumbs.displayName = 'Breadcrumbs'
 
 BreadcrumbsItem.displayName = 'Breadcrumbs.Item'

From 53fbb5f0b657868642349e0aa9357a3e9b87282c Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Thu, 14 Nov 2024 20:31:13 +0000
Subject: [PATCH 09/13] Remove ref

---
 packages/react/src/Breadcrumbs/Breadcrumbs.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
index 993a3bc0af2..e6bc2c70fe7 100644
--- a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
@@ -118,7 +118,8 @@ const StyledBreadcrumbsItem = toggleStyledComponent(
     ${sx};
   `,
 )
-function BreadcrumbsItem<As extends React.ElementType>(props: StyledBreadcrumbsItemProps<As>, ref: ForwardedRef<any>) {
+
+function BreadcrumbsItem<As extends React.ElementType>(props: StyledBreadcrumbsItemProps<As>) {
   const {selected, className, ...rest} = props
   const enabled = useFeatureFlag(CSS_MODULES_FLAG)
   return (
@@ -129,7 +130,6 @@ function BreadcrumbsItem<As extends React.ElementType>(props: StyledBreadcrumbsI
         [classes.ItemSelected]: enabled && selected,
       })}
       aria-current={selected ? 'page' : null}
-      ref={ref} 
       {...rest}
     />
   )

From e79e230623920e6f18b00a801b7717e5644e5ae8 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Thu, 14 Nov 2024 20:37:29 +0000
Subject: [PATCH 10/13] Unused import

---
 packages/react/src/Breadcrumbs/Breadcrumbs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
index e6bc2c70fe7..1af7aaca94b 100644
--- a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
@@ -1,6 +1,6 @@
 import {clsx} from 'clsx'
 import type {To} from 'history'
-import React, {type ForwardedRef} from 'react'
+import React from 'react'
 import styled from 'styled-components'
 import Box from '../Box'
 import {get} from '../constants'

From b4d3c3299c6fbfd1176c4b8b76031686cc394e72 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Thu, 14 Nov 2024 21:36:57 +0000
Subject: [PATCH 11/13] Refactor BreadcrumbsItem to support polymorphic
 components and add tests for "as" prop

---
 .../react/src/Breadcrumbs/Breadcrumbs.tsx     | 16 ++++------
 .../__tests__/BreadcrumbsItem.test.tsx        |  4 +++
 .../BreadcrumbsItem.test.tsx.snap             | 31 +++++++++++++++++++
 3 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
index 1af7aaca94b..32b72149679 100644
--- a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
@@ -10,6 +10,7 @@ import type {ComponentProps} from '../utils/types'
 import classes from './Breadcrumbs.module.css'
 import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
 import {useFeatureFlag} from '../FeatureFlags'
+import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 
 const SELECTED_CLASS = 'selected'
 const CSS_MODULES_FLAG = 'primer_react_css_modules_team'
@@ -87,14 +88,12 @@ function Breadcrumbs({className, children, sx: sxProp}: React.PropsWithChildren<
   )
 }
 
-type StyledBreadcrumbsItemProps<As extends React.ElementType> = {
+type StyledBreadcrumbsItemProps = {
   to?: To
   selected?: boolean
   className?: string
-  as?: As
 } & SxProp &
-  React.ComponentPropsWithoutRef<'a'> &
-  DistributiveOmit<React.ComponentPropsWithRef<React.ElementType extends As ? 'a' : As>, 'as'>
+  React.ComponentPropsWithoutRef<'a'>
 
 const StyledBreadcrumbsItem = toggleStyledComponent(
   CSS_MODULES_FLAG,
@@ -119,8 +118,7 @@ const StyledBreadcrumbsItem = toggleStyledComponent(
   `,
 )
 
-function BreadcrumbsItem<As extends React.ElementType>(props: StyledBreadcrumbsItemProps<As>) {
-  const {selected, className, ...rest} = props
+const BreadcrumbsItem = React.forwardRef(({selected, className, ...rest}, ref) => {
   const enabled = useFeatureFlag(CSS_MODULES_FLAG)
   return (
     <StyledBreadcrumbsItem
@@ -130,13 +128,11 @@ function BreadcrumbsItem<As extends React.ElementType>(props: StyledBreadcrumbsI
         [classes.ItemSelected]: enabled && selected,
       })}
       aria-current={selected ? 'page' : null}
+      ref={ref}
       {...rest}
     />
   )
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type DistributiveOmit<T, TOmitted extends PropertyKey> = T extends any ? Omit<T, TOmitted> : never
+}) as PolymorphicForwardRefComponent<'a', StyledBreadcrumbsItemProps>
 
 Breadcrumbs.displayName = 'Breadcrumbs'
 
diff --git a/packages/react/src/Breadcrumbs/__tests__/BreadcrumbsItem.test.tsx b/packages/react/src/Breadcrumbs/__tests__/BreadcrumbsItem.test.tsx
index ebb0f2e8c61..a836d08e08f 100644
--- a/packages/react/src/Breadcrumbs/__tests__/BreadcrumbsItem.test.tsx
+++ b/packages/react/src/Breadcrumbs/__tests__/BreadcrumbsItem.test.tsx
@@ -20,4 +20,8 @@ describe('Breadcrumbs.Item', () => {
   it('respects the "selected" prop', () => {
     expect(render(<Breadcrumbs.Item selected />)).toMatchSnapshot()
   })
+
+  it('respects the "as" prop', () => {
+    expect(render(<Breadcrumbs.Item as="h2" selected />)).toMatchSnapshot()
+  })
 })
diff --git a/packages/react/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap b/packages/react/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap
index 250ad1236ce..e12b83e9176 100644
--- a/packages/react/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap
+++ b/packages/react/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap
@@ -1,5 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Breadcrumbs.Item respects the "as" prop 1`] = `
+.c0 {
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  display: inline-block;
+  font-size: 14px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:hover,
+.c0:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c0.selected {
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
+  pointer-events: none;
+}
+
+.c0.selected:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+<h2
+  aria-current="page"
+  className="c0 selected"
+/>
+`;
+
 exports[`Breadcrumbs.Item respects the "selected" prop 1`] = `
 .c0 {
   color: var(--fgColor-accent,var(--color-accent-fg,#0969da));

From 4ac8469db9d4fb4e964875f0c8e1acfdc029ac57 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Thu, 14 Nov 2024 21:29:28 -0800
Subject: [PATCH 12/13] Remove test for 'as' prop in BreadcrumbsItem

---
 .../react/src/Breadcrumbs/__tests__/BreadcrumbsItem.test.tsx  | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/react/src/Breadcrumbs/__tests__/BreadcrumbsItem.test.tsx b/packages/react/src/Breadcrumbs/__tests__/BreadcrumbsItem.test.tsx
index a836d08e08f..ebb0f2e8c61 100644
--- a/packages/react/src/Breadcrumbs/__tests__/BreadcrumbsItem.test.tsx
+++ b/packages/react/src/Breadcrumbs/__tests__/BreadcrumbsItem.test.tsx
@@ -20,8 +20,4 @@ describe('Breadcrumbs.Item', () => {
   it('respects the "selected" prop', () => {
     expect(render(<Breadcrumbs.Item selected />)).toMatchSnapshot()
   })
-
-  it('respects the "as" prop', () => {
-    expect(render(<Breadcrumbs.Item as="h2" selected />)).toMatchSnapshot()
-  })
 })

From 2909b807321788c65285c27cd7865becf8745561 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Fri, 15 Nov 2024 05:52:43 +0000
Subject: [PATCH 13/13] Remove snapshot test for 'as' prop in BreadcrumbsItem

---
 .../BreadcrumbsItem.test.tsx.snap             | 31 -------------------
 1 file changed, 31 deletions(-)

diff --git a/packages/react/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap b/packages/react/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap
index e12b83e9176..250ad1236ce 100644
--- a/packages/react/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap
+++ b/packages/react/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap
@@ -1,36 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Breadcrumbs.Item respects the "as" prop 1`] = `
-.c0 {
-  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  display: inline-block;
-  font-size: 14px;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c0:hover,
-.c0:focus {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c0.selected {
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
-  pointer-events: none;
-}
-
-.c0.selected:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-<h2
-  aria-current="page"
-  className="c0 selected"
-/>
-`;
-
 exports[`Breadcrumbs.Item respects the "selected" prop 1`] = `
 .c0 {
   color: var(--fgColor-accent,var(--color-accent-fg,#0969da));