final final

lib/src/components/badge/Badge.tsx

@@ -65,6 +65,8 @@ export type TBadgeContext = {
   overflow?: TBadgeProps['overflow']
   textContent?: React.ReactNode,
   setTextContent?: React.Dispatch<React.SetStateAction<React.ReactNode>>
+  isOverflowing?: boolean,
+  setIsOverflowing?: React.Dispatch<React.SetStateAction<boolean>>
 }
 export type TBadgeProviderProps = TBadgeContext
 
@@ -76,9 +78,11 @@ export const BadgeProvider: React.FC<TBadgeProviderProps> = ({
   children
 }) => {
   const [textContent, setTextContent] = React.useState('')
+  const [isOverflowing, setIsOverflowing] = React.useState(false)
+
   const value = React.useMemo<TBadgeContext>(
-    () => ({ size, overflow, textContent, setTextContent }),
-    [size, overflow, textContent, setTextContent]
+    () => ({ size, overflow, textContent, setTextContent, isOverflowing, setIsOverflowing }),
+    [size, overflow, textContent, setTextContent, isOverflowing, setIsOverflowing]
   )
   return <BadgeContext.Provider value={value}>{children}</BadgeContext.Provider>
 }
@@ -95,7 +99,7 @@ const BadgeRoot = React.forwardRef<HTMLDivElement, TBadgeRootProps>(
     },
     ref
   ) => {
-    const { textContent, size, overflow } = React.useContext(BadgeContext)
+    const { textContent, size, overflow, isOverflowing } = React.useContext(BadgeContext)
 
     const isSemanticTheme = [
       'info',
@@ -107,7 +111,7 @@ const BadgeRoot = React.forwardRef<HTMLDivElement, TBadgeRootProps>(
 
     return (
       <OptionallyTooltipWrapper
-        hasTooltip={overflow === 'ellipsis'}
+        hasTooltip={overflow === 'ellipsis' && isOverflowing}
         label={textContent}
       >
         <ColorScheme

lib/src/components/badge/BadgeText.tsx

@@ -4,6 +4,9 @@ import { overrideStitchesVariantValue } from '~/utilities/override-stitches-vari
 import { BadgeContext } from './Badge'
 import { Text } from '~/components/text'
 import { styled } from '~/stitches'
+import { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'
+import { useResizeObserver } from '~/utilities/hooks/useResizeObserver'
+
 
 const StyledBadgeText = styled(Text, {
   py: '$0',
@@ -29,19 +32,44 @@ const toTextSize = {
   md: 'md'
 }
 
-export const BadgeText: React.FC<TBadgeTextProps> = ({ children, ...rest }) => {
-  const { size: badgeSize, overflow, setTextContent } = React.useContext(BadgeContext)
+export const BadgeTextBase: React.FC<TBadgeTextProps> = React.forwardRef(({ children, ...rest }, ref) => {
+  const { size: badgeSize, overflow } = React.useContext(BadgeContext)
 
   const size = React.useMemo(
     () => overrideStitchesVariantValue(badgeSize, (s) => toTextSize[s]),
     [badgeSize]
   )
 
-  React.useEffect(() => {
-    setTextContent?.(children)
-  }, [setTextContent, children])
+  return (
+    <StyledBadgeText noCapsize size={size} overflow={overflow} ref={ref} {...rest}>{children}</StyledBadgeText>
+  )
+})
+
+// I cannot in good conscience stick a resize observer on every badge.
+// So I'm splitting this into the base logic and the bit that does the ellipsis version which needs extra logic.
+// Should I make changes to the utility instead? .-.
+export const BadgeTextEllipsis: React.FC<TBadgeTextProps> = ({ children, ...rest }) => {
+  const { setTextContent, setIsOverflowing } = React.useContext(BadgeContext)
+
+  React.useEffect(() => setTextContent?.(children), [setTextContent, children])
+
+  const [elRef, setElRef] = useCallbackRefState()
+  useResizeObserver({
+    delay: 0, elements: [elRef], onResize: () => {
+      if (!elRef) return;
+      setIsOverflowing?.(elRef.scrollWidth > elRef.clientWidth)
+    }
+  })
 
   return (
-    <StyledBadgeText noCapsize size={size} overflow={overflow} {...rest}>{children}</StyledBadgeText>
+    <BadgeTextBase {...rest} ref={setElRef}>{children}</BadgeTextBase>
   )
 }
+
+
+export const BadgeText: React.FC<TBadgeTextProps> = (props) => {
+  const { overflow } = React.useContext(BadgeContext)
+
+  if (overflow === 'ellipsis') return <BadgeTextEllipsis {...props} />
+  return <BadgeTextBase {...props} />
+}