From c4b602d99a80c89e1c5cafd85ff6b591a56771a2 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Mon, 30 Jun 2025 17:00:47 -0500
Subject: [PATCH 1/4] refactor(Truncate): update Truncate to CSS Modules

---
 .../react/src/Truncate/Truncate.module.css    | 17 +++++++
 packages/react/src/Truncate/Truncate.tsx      | 46 +++++++++++--------
 2 files changed, 43 insertions(+), 20 deletions(-)
 create mode 100644 packages/react/src/Truncate/Truncate.module.css

diff --git a/packages/react/src/Truncate/Truncate.module.css b/packages/react/src/Truncate/Truncate.module.css
new file mode 100644
index 00000000000..9d50957f102
--- /dev/null
+++ b/packages/react/src/Truncate/Truncate.module.css
@@ -0,0 +1,17 @@
+.Truncate {
+  display: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: initial;
+  white-space: nowrap;
+  max-width: var(--truncate-max-width);
+
+  &:where([data-expandable]):hover {
+    max-width: 10000px;
+  }
+
+  &:where([data-inline]) {
+    display: inline-block;
+    vertical-align: top;
+  }
+}
diff --git a/packages/react/src/Truncate/Truncate.tsx b/packages/react/src/Truncate/Truncate.tsx
index 3878a0cfea4..8956bb3d1ba 100644
--- a/packages/react/src/Truncate/Truncate.tsx
+++ b/packages/react/src/Truncate/Truncate.tsx
@@ -1,37 +1,43 @@
 import React from 'react'
-import styled from 'styled-components'
+import {clsx} from 'clsx'
 import type {MaxWidthProps} from 'styled-system'
-import {maxWidth} from 'styled-system'
 import type {SxProp} from '../sx'
-import sx from '../sx'
-import type {ComponentProps} from '../utils/types'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
+import {BoxWithFallback} from '../internal/components/BoxWithFallback'
+import classes from './Truncate.module.css'
 
-type StyledTruncateProps = {
+type TruncateProps = React.HTMLAttributes<HTMLElement> & {
   title: string
   inline?: boolean
   expandable?: boolean
 } & MaxWidthProps &
   SxProp
 
-const StyledTruncate = styled.div<StyledTruncateProps>`
-  display: ${props => (props.inline ? 'inline-block' : 'inherit')};
-  overflow: hidden;
-  text-overflow: ellipsis;
-  vertical-align: ${props => (props.inline ? 'top' : 'initial')};
-  white-space: nowrap;
-  ${maxWidth}
-  ${props => (props.expandable ? `&:hover { max-width: 10000px; }` : '')}
-  ${sx};
-`
-
-export type TruncateProps = ComponentProps<typeof StyledTruncate>
-
 const Truncate = React.forwardRef(function Truncate(
-  {as, expandable = false, inline = false, maxWidth = 125, ...rest},
+  {as, children, className, title, inline, expandable, maxWidth = 125, style, sx, ...rest},
   ref,
 ) {
-  return <StyledTruncate ref={ref} as={as} expandable={expandable} inline={inline} maxWidth={maxWidth} {...rest} />
+  return (
+    <BoxWithFallback
+      {...rest}
+      ref={ref}
+      as={as}
+      className={clsx(className, classes.Truncate)}
+      data-expandable={expandable}
+      data-inline={inline}
+      title={title}
+      style={
+        {
+          ...style,
+          [`--truncate-max-width`]:
+            typeof maxWidth === 'number' ? `${maxWidth}px` : typeof maxWidth === 'string' ? maxWidth : undefined,
+        } as React.CSSProperties
+      }
+      sx={sx}
+    >
+      {children}
+    </BoxWithFallback>
+  )
 }) as PolymorphicForwardRefComponent<'div', TruncateProps>
 
 if (__DEV__) {

From 3ebaecb4e5abc53263ba022f371eafeb753a9579 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Mon, 30 Jun 2025 17:01:26 -0500
Subject: [PATCH 2/4] chore: add changeset

---
 .changeset/stale-cats-wonder.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/stale-cats-wonder.md

diff --git a/.changeset/stale-cats-wonder.md b/.changeset/stale-cats-wonder.md
new file mode 100644
index 00000000000..f21cce65192
--- /dev/null
+++ b/.changeset/stale-cats-wonder.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Update Truncate to use CSS Modules

From d35aaefbba0a118516d8ec03c1d853a95de74397 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Mon, 30 Jun 2025 17:05:45 -0500
Subject: [PATCH 3/4] chore: fix type and lint warnings

---
 packages/react/src/Truncate/Truncate.module.css | 1 -
 packages/react/src/Truncate/Truncate.tsx        | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/Truncate/Truncate.module.css b/packages/react/src/Truncate/Truncate.module.css
index 9d50957f102..a0b2df85f87 100644
--- a/packages/react/src/Truncate/Truncate.module.css
+++ b/packages/react/src/Truncate/Truncate.module.css
@@ -2,7 +2,6 @@
   display: inherit;
   overflow: hidden;
   text-overflow: ellipsis;
-  vertical-align: initial;
   white-space: nowrap;
   max-width: var(--truncate-max-width);
 
diff --git a/packages/react/src/Truncate/Truncate.tsx b/packages/react/src/Truncate/Truncate.tsx
index 8956bb3d1ba..4ece1eaf59f 100644
--- a/packages/react/src/Truncate/Truncate.tsx
+++ b/packages/react/src/Truncate/Truncate.tsx
@@ -44,4 +44,5 @@ if (__DEV__) {
   Truncate.displayName = 'Truncate'
 }
 
+export type {TruncateProps}
 export default Truncate

From d9e5000a32866b4479eddeb7bf610705d58531ee Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Tue, 1 Jul 2025 14:23:26 -0500
Subject: [PATCH 4/4] chore(test): update snapshots

---
 .../src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap b/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap
index d443ebd75e7..e1a65fbd2eb 100644
--- a/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap
+++ b/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap
@@ -2,19 +2,19 @@
 
 exports[`CircleBadge > respects the inline prop 1`] = `
 <div
-  class="sc-feUZmu bYFNcn"
+  class="sc-dAbbOL onCTt"
 />
 `;
 
 exports[`CircleBadge > respects the variant prop 1`] = `
 <div
-  class="sc-feUZmu lbGpjD"
+  class="sc-dAbbOL gIOBDF"
 />
 `;
 
 exports[`CircleBadge > uses the size prop to override the variant prop 1`] = `
 <div
-  class="sc-feUZmu jmFkGb"
+  class="sc-dAbbOL EOzpx"
   size="20"
 />
 `;