AAAAAAAA

documentation/content/components.feedback.badge.md

@@ -17,7 +17,8 @@ tabs:
       ## Text overflow
 
       <CodeBlock live={true} preview={true} code={`<Tooltip.Provider>
-        <Badge css={{width: 100}} overflow="ellipsis">New Data New Data New Data New Data New Data</Badge>
+        <Badge css={{width: 100}} overflow="ellipsis">
+        <Icon is={Wifi} /> New Data New Data New Data New Data New Data</Badge>
       </Tooltip.Provider>`} language={"tsx"} />
 
 

lib/src/components/badge/Badge.tsx

@@ -12,7 +12,7 @@ import { colorSchemes as badgeColorSchemes } from './stitches.badge.colorscheme.
 const StyledBadgeIcon = styled(Icon, { flexShrink: 0 })
 const BadgeIcon = (props) => <StyledBadgeIcon size="sm" {...props} />
 
-const StyledBadge = styled(Flex, {
+const StyledBadgeRoot = styled(Flex, {
   justifyContent: 'center',
   alignItems: 'center',
   borderRadius: '$0',
@@ -49,7 +49,7 @@ const StyledBadge = styled(Flex, {
   }
 })
 
-type TBadgeProps = React.ComponentProps<typeof StyledBadge> & {
+type TBadgeProps = React.ComponentProps<typeof StyledBadgeRoot> & {
   theme?: keyof typeof badgeColorSchemes
   overflow?: React.ComponentProps<typeof BadgeText>['overflow']
   colorScheme?: TcolorScheme
@@ -63,6 +63,8 @@ type TBadge = React.ForwardRefExoticComponent<TBadgeProps> & {
 export type TBadgeContext = {
   size?: TBadgeProps['size']
   overflow?: TBadgeProps['overflow']
+  textContent?: React.ReactNode,
+  setTextContent?: React.Dispatch<React.SetStateAction<React.ReactNode>>
 }
 export type TBadgeProviderProps = TBadgeContext
 
@@ -73,25 +75,28 @@ export const BadgeProvider: React.FC<TBadgeProviderProps> = ({
   overflow,
   children
 }) => {
+  const [textContent, setTextContent] = React.useState('')
   const value = React.useMemo<TBadgeContext>(
-    () => ({ size, overflow }),
-    [size, overflow]
+    () => ({ size, overflow, textContent, setTextContent }),
+    [size, overflow, textContent, setTextContent]
   )
   return <BadgeContext.Provider value={value}>{children}</BadgeContext.Provider>
 }
 
-export const Badge = React.forwardRef(
+type TBadgeRootProps = Omit<Omit<TBadgeProps, 'size'>, 'overflow'>
+
+const BadgeRoot = React.forwardRef<HTMLDivElement, TBadgeRootProps>(
   (
     {
       theme = 'non-semantic',
       emphasis = 'subtle',
-      size = 'sm',
-      overflow = 'wrap',
       children,
       ...rest
     },
     ref
   ) => {
+    const { textContent, size, overflow } = React.useContext(BadgeContext)
+
     const isSemanticTheme = [
       'info',
       'success',
@@ -101,41 +106,57 @@ export const Badge = React.forwardRef(
     ].includes(theme)
 
     return (
-      <BadgeProvider size={size} overflow={overflow}>
-        <OptionallyTooltipWrapper
-          hasTooltip={overflow === 'ellipsis'}
-          label={children}
+      <OptionallyTooltipWrapper
+        hasTooltip={overflow === 'ellipsis'}
+        label={textContent}
+      >
+        <ColorScheme
+          className={
+            badgeColorSchemes[isSemanticTheme ? theme : 'non-semantic']
+          }
+          accent={
+            isSemanticTheme || !theme
+              ? undefined
+              : (`${theme}2` as TcolorScheme['accent'])
+          }
+          asChild
         >
-          <ColorScheme
-            className={
-              badgeColorSchemes[isSemanticTheme ? theme : 'non-semantic']
-            }
-            accent={
-              isSemanticTheme || !theme
-                ? undefined
-                : (`${theme}2` as TcolorScheme['accent'])
-            }
-            asChild
+          <StyledBadgeRoot
+            role="status"
+            emphasis={emphasis}
+            size={size}
+            {...rest}
+            ref={ref}
           >
-            <StyledBadge
-              role="status"
-              emphasis={emphasis}
-              size={size}
-              {...rest}
-              ref={ref}
-            >
-              {React.Children.map(children, (child) => {
-                if (typeof child === 'string' || typeof child === 'number') {
-                  return <BadgeText>{child}</BadgeText>
-                }
-                if (React.isValidElement(child) && child.type === Icon) {
-                  return <BadgeIcon {...child.props} />
-                }
-                return child
-              })}
-            </StyledBadge>
-          </ColorScheme>
-        </OptionallyTooltipWrapper>
+            {React.Children.map(children, (child) => {
+              if (typeof child === 'string' || typeof child === 'number') {
+                return <BadgeText>{child}</BadgeText>
+              }
+              if (React.isValidElement(child) && child.type === Icon) {
+                return <BadgeIcon {...child.props} />
+              }
+              return child
+            })}
+          </StyledBadgeRoot>
+        </ColorScheme>
+      </OptionallyTooltipWrapper>
+    )
+  }
+)
+
+export const Badge = React.forwardRef<HTMLDivElement, TBadgeProps>(
+  (
+    {
+      size = 'sm',
+      overflow = 'wrap',
+      ...rest
+    },
+    ref
+  ) => {
+
+    return (
+      <BadgeProvider size={size} overflow={overflow}>
+        <BadgeRoot {...rest} ref={ref} />
       </BadgeProvider>
     )
   }

lib/src/components/badge/BadgeText.tsx

@@ -29,15 +29,19 @@ const toTextSize = {
   md: 'md'
 }
 
-export const BadgeText: React.FC<TBadgeTextProps> = (props) => {
-  const { size: badgeSize, overflow } = React.useContext(BadgeContext)
+export const BadgeText: React.FC<TBadgeTextProps> = ({ children, ...rest }) => {
+  const { size: badgeSize, overflow, setTextContent } = 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} {...props} />
+    <StyledBadgeText noCapsize size={size} overflow={overflow} {...rest}>{children}</StyledBadgeText>
   )
 }