From 66a09e97f3577f7003b32cdac953bf69412d00b8 Mon Sep 17 00:00:00 2001
From: VINEETH ASOK KUMAR <vineeth.asokkumar@clickhouse.com>
Date: Wed, 29 Jan 2025 11:59:13 +0100
Subject: [PATCH] Add Badge Ellipsis content boolean toggle

---
 src/components/Badge/Badge.tsx             |  3 +++
 src/components/IconWrapper/IconWrapper.tsx | 23 +++++++++++++---------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
index 6386fb84..b0d19a37 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -24,6 +24,7 @@ export interface CommonBadgeProps extends HTMLAttributes<HTMLDivElement> {
   type?: BadgeType;
   icon?: ImageName;
   iconDir?: HorizontalDirection;
+  ellipsisContent?: boolean;
 }
 
 export interface DismissibleBadge extends CommonBadgeProps {
@@ -95,6 +96,7 @@ export const Badge = ({
   type,
   dismissible,
   onClose,
+  ellipsisContent = true,
   ...props
 }: BadgeProps) => (
   <Wrapper
@@ -110,6 +112,7 @@ export const Badge = ({
         iconDir={iconDir}
         size={size}
         $state={state}
+        ellipsisContent={ellipsisContent}
       >
         {text}
       </BadgeContent>
diff --git a/src/components/IconWrapper/IconWrapper.tsx b/src/components/IconWrapper/IconWrapper.tsx
index dad1bf91..b6e52767 100644
--- a/src/components/IconWrapper/IconWrapper.tsx
+++ b/src/components/IconWrapper/IconWrapper.tsx
@@ -21,6 +21,16 @@ const LabelContainer = styled.div<{ $hasIcon: boolean; $iconDir: HorizontalDirec
   gap: ${({ theme }) => theme.click.sidebar.navigation.item.default.space.gap};
 `;
 
+interface IconWrapperProps {
+  icon?: IconName;
+  iconDir?: HorizontalDirection;
+  size?: IconSize;
+  width?: number | string;
+  height?: number | string;
+  children: ReactNode;
+  ellipsisContent?: boolean;
+}
+
 const IconWrapper = ({
   icon,
   iconDir = "start",
@@ -28,15 +38,10 @@ const IconWrapper = ({
   width,
   height,
   children,
+  ellipsisContent = true,
   ...props
-}: {
-  icon?: IconName;
-  iconDir?: HorizontalDirection;
-  children: ReactNode;
-  size?: IconSize;
-  width?: number | string;
-  height?: number | string;
-}) => {
+}: IconWrapperProps) => {
+  const TextWrapper = ellipsisContent ? EllipsisContent : "div";
   return (
     <LabelContainer
       $hasIcon={typeof icon === "string"}
@@ -51,7 +56,7 @@ const IconWrapper = ({
           height={height}
         />
       )}
-      <EllipsisContent>{children}</EllipsisContent>
+      <TextWrapper>{children}</TextWrapper>
       {icon && iconDir === "end" && (
         <Icon
           name={icon}